MagentoGo-DesignGuide
Content
Note: This document is subject to change without notice. We recommend that, rather than print this document, that you visit the Magento Go support site to download the latest version.
Ver: 1.2.0
Important Notice
Magento reserves the right to make corrections, modifications, enhancements, improvements, and other changes to its products and services at any time and to discontinue any product or service without notice. Customers should obtain the latest relevant information before placing orders and should verify that such information is current and complete. All products are sold subject to Magento's terms and conditions of sale supplied at the time of order acknowledgment. Magento warrants performance of its products to the specifications applicable at the time of sale in accordance with Magento's standard warranty. Testing and other quality control techniques are used to the extent Magento deems necessary to support this warranty. Except where mandated by government requirements, testing of all parameters of each product is not necessarily performed. Magento assumes no liability for applications assistance or customer product design. Customers are responsible for their products and applications using Magento components. To minimize the risks associated with customer products and applications, customers should provide adequate design and operating safeguards. Magento does not warrant or represent that any license, either express or implied, is granted under any Magento patent right, copyright, mask work right, or other Magento intellectual property rights relating to any combination, machine, or process in which Magento products or services are used. Information published by Magento regarding third-party products or services does not constitute a license from Magento to use such products or services or a warranty or endorsement thereof. Use of such information may require a license from a third party under the patents or other intellectual property of the third party, or a license from Magento under the patents or other intellectual property of Magento. Resale of Magento products or services with statements different from or beyond the parameters stated by Magento for that product or service voids all express and any implied warranties for the associated Magento product or service and is an unfair and deceptive business practice. Magento is not responsible or liable for any such statements. All company and brand products and service names are trademarks or registered trademarks of their respective holders. Magento™ is a trademark of Magento Copyright © 2012 Magento A division of X.commerce, Inc., an eBay Company
Contents
Part I: Getting Started CHAPTER 1:
Designing Your Store ............................................................................................. 1 Where to Find Help ................................................................................................ 2
CHAPTER 2:
A Quick Tour .......................................................................................................... 5 Design Tools .......................................................................................................... 6
Part II: Layout & Content Blocks CHAPTER 3:
Page Structure and Layout .................................................................................. 11 Understanding Page Layout ................................................................................ 12 Column Dimensions ............................................................................................. 14 1 Column Layout ........................................................................................... 14 2 Columns Right Bar ..................................................................................... 15 2 Columns Left Bar ........................................................................................ 15 3 Columns ..................................................................................................... 16 Content Blocks ..................................................................................................... 17 A Few Examples .................................................................................................. 18
CHAPTER 4:
Using the Layout Editor ........................................................................................ 21 Making Changes to Blocks .................................................................................. 22 Adding a Block ............................................................................................... 24 Deleting a Block ............................................................................................. 25 Previewing Changes...................................................................................... 26 Creating a Custom Block ..................................................................................... 27 Making Layout Updates ....................................................................................... 31 Block References ................................................................................................. 33
Magento Go Design Guide
v
Contents
CHAPTER 5:
Adding Dynamic Content ..................................................................................... 35 Adding a “New Products” List .............................................................................. 36 Frontend App Types ............................................................................................ 40 Creating a Frontend App ...................................................................................... 41 Banner Rotator .............................................................................................. 44 Banner Layout Update Options............................................................... 46 Banner Frontend App Options ................................................................ 48 CMS Hierarchy Node Link ............................................................................. 50 CMS Page Link .............................................................................................. 51 CMS Static Block ........................................................................................... 52 Catalog Category Link ................................................................................... 53 Catalog New Products List ............................................................................ 54 Catalog Product Link ..................................................................................... 55 Recently Compared Products ....................................................................... 56 Recently Viewed Products ............................................................................ 57
Part III: Themes, Styles & More CHAPTER 6:
Choosing a Theme ............................................................................................... 61 Previewing a Theme ............................................................................................ 62 Changing the Current Theme .............................................................................. 64 Adding Your Logos .............................................................................................. 65 Adding Alt Text .............................................................................................. 66 Email Logo ..................................................................................................... 67 Favicon .......................................................................................................... 68
CHAPTER 7:
Customizing Your Theme .................................................................................... 69 Changing Interface Text ....................................................................................... 70 Using the Design Settings Editor ......................................................................... 76 Body Settings ................................................................................................ 77 Using the Color Picker ............................................................................ 77 Text Properties ........................................................................................ 78 Link Properties ........................................................................................ 79 Background Properties ........................................................................... 80 Headings Settings ......................................................................................... 81
vi
Magento Go Design Guide
Contents Border Properties .................................................................................... 82 Header Settings ............................................................................................. 83 Footer Settings .............................................................................................. 84 Preview Your Theme ........................................................................................... 85 Apply Your Theme ............................................................................................... 86 Troubleshooting ................................................................................................... 87 Resizing Catalog Images ..................................................................................... 88
CHAPTER 8:
Using the CSS Editor ........................................................................................... 91 Uploading a Custom CSS File ............................................................................. 93 Managing Your Image Assets .............................................................................. 94 Uploading Images.......................................................................................... 95 Managing Your Font Assets ................................................................................. 96 Uploading Fonts ............................................................................................ 97 Examples of CSS Code ....................................................................................... 98
CHAPTER 9:
Working with JavaScript ....................................................................................... 99 Adding Custom Code ......................................................................................... 101 Managing Load Order.................................................................................. 100 Using jQuery ...................................................................................................... 101
Appendices Appendix A: Appendix B: Appendix C: Appendix D:
Glossary ............................................................................................................. 110 Editor Toolbar Buttons ....................................................................................... 117 Block References ............................................................................................... 123 Page References ............................................................................................... 126
Index............................................................................................ 129
Magento Go Design Guide
vii
Part I: Getting Started
CHAPTER 1:
Designing Your Store
“Design is what you do when you don't [yet] know what you are doing.” George Stiny, Professor of Architecture, Massachusetts Institute of Technology
This guide is written for experienced designers and frontend developers, as well as for merchants with an eye for design. Our mission is to explain the rules of the road, show you where things are kept, and how to get things done. One of the biggest challenges for some—even for those who have been designing websites for many years—is the fact that there is no single HTML page that corresponds to any given page in a Magento Go store. That’s because Magento Go is an object-oriented environment, and every page is assembled from separate components. But this is also the same reason why so many designers love Magento. Because once you understand the basics, you can do just about anything imaginable. The best way to learn is to jump in and start noodling around. As happens so often when you don’t quite yet know what you are doing—some of the best ideas find their way to the top. As far as the design of your store is concerned—you’re the expert in that department, and we’ll leave that part up to you. So jump in, feel free to experiment, and see what you can do!
Part I: Getting Started
1
CHAPTER 1: Designing Your Store
Where to Find Help
Where to Find Help
Magento provides a wide range of support resources to help you get up and running in a hurry. Please let us know how we can be of assistance!
Knowledge Base The Magento Go Knowledge Base is continually updated the latest information. You’ll find a link to the Knowledge Base in the top navigation of the Magento Go site, and in the Admin panel of your store. Go there now!
Video Tutorials A picture is worth a thousand words! Check our support site for the latest Magento Go video tutorials. Go there now!
Community Forum Here’s a chance to meet other users, share tips, and ask questions. Be sure to join the Magento Go community, so you can learn, and also share your experience and knowledge with others. Go there now!
2
Magento Go Design Guide
CHAPTER 1: Designing Your Store
Where to Find Help
Support Site Have a question? Please let us know how we can help you succeed. To access our support site, click the Support link in the upper-right corner of the Admin panel. Go there now!
Blog Keep up with the latest product news, trends, and featured stores on the Magento Go blog. Go there now!
Webinars Sign up to attend a free webinar, taught by a Magento expert. Go there now!
Guides Learn everything you need to know about building your store by downloading a complete set of documentation from our website. Go there now!
Part I: Getting Started
3
CHAPTER 1: Designing Your Store
Where to Find Help
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
4
Magento Go Design Guide
CHAPTER 2:
A Quick Tour
The first half of this guide has an emphasis on page layout and working with blocks of content and frontend apps. The second half addresses what might be considered to be more common aspects of web design, including working with cascading style sheets (CSS) and implementing JavaScript interactions. By the time you work your way through this guide, you’ll be ready to put the “how to” aside, and focus your energy on creating attention-seizing and crowd-pleasing designs for online stores.
Content Blocks on the Home Page
Part I: Getting Started
5
CHAPTER 2: A Quick Tour
Design Tools
Design Tools
Your Magento Go store includes a suite of tools for designers—with or without programming experience—and frontend developers.
Theme Editor The Theme Editor lets you customize the styles which are used to format the main sections of the page, without editing the CSS code:
Theme Text Editor The Theme Text Editor lets you change the terminology that is used throughout the interface of your store.
Layout Editor The Layout Editor lets you add pre-configured Magento Go blocks to the left and right columns of most pages in your store. You can also rearrange, lock in place, and remove the blocks from view.
6
Magento Go Design Guide
CHAPTER 2: A Quick Tour
Design Tools
Design Settings Editor The Design Settings Editor provides an easy-to-use interface so you can change the most common CSS styles without entering any code.
CSS Editor The CSS Editor provides access to the CSS style sheets used by the current theme. You can download them to become familiar with the styles, and enter your own updates to override existing styles.
Java Script Editor The Java Script Editor lets you implement custom code, hosted scripts, and libraries such as TypeKit, JQuery, and MooTools.
Catalog Images Catalog Images lets you control the size of the images used throughout the store and catalog.
Part I: Getting Started
7
CHAPTER 2: A Quick Tour
Design Tools
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
8
Magento Go Design Guide
Part II: Layout & Content Blocks
CHAPTER 3:
Page Structure and Layout
Each page of your Magento Go store is divided into distinct sections, or structural blocks, that define the header, footer, and content areas of the page. Depending on the layout applied, the content area may consist of one, two, three columns, or more. You can think of the layout as the “floor plan” of each page.
Structural Blocks
Part II: Layout & Content Blocks
11
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
Understanding Page Layout
Each page of your store has a fixed header and footer, with a content area that is divided into one, two, or three columns. The manner in which page layouts are used throughout your store is determined by the theme. In addition, you can apply different layouts to any content page you create, including your home page.
1 Column The “1 Column” layout can be used to create a dramatic home page or landing page for a single product with a large image or focal point. It’s a good choice for any content page that has a large amount of text, or a combination of text, images, and video. A singlecolumn layout can give the appearance of multiple columns if the text is formatted into columns using HTML and CSS.
2 Columns with Left Bar The “2 Columns with Left Bar” layout is often used for pages with navigation on the left. You will find this layout used for catalog and search results pages that have “layered navigation” It’s also an excellent choice for home pages that need additional navigation or blocks of supporting content on the left.
12
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
2 Columns with Right Bar The “2 Columns with Right Bar” layout is the one that is used for the home page examples in this guide The main content area is large enough for an eye-catching image or banner. This layout is also often used for Product View pages that have blocks of supporting content on the right.
3 Columns The “3 Columns” layout has a center column that is wide enough for a column of text, with room on each side for additional navigation and blocks of supporting content. The Customer Service page in the sample data is based on the “3 Columns” layout. (You can find a link to that page in the footer of your store.)
Empty The “Empty” layout can be used to define your own page layout. For example, you can use the Empty layout to create a 4-column page.
Part II: Layout & Content Blocks
13
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
Column Dimensions
The main column of your Magento Go store has a fixed width of 990 pixels, as defined by the CSS. Although depending on your screen resolution, there might be some empty space on each side of the main column, all of the activity for your store takes place within this enclosed area. When you add up the width of the content columns, and throw in a little extra, the total comes to 990 pixels.
Main Column
1 Column Layout
The content area of a “1 Column” layout spans the full-width of the main column. This layout is often used for pages that require no navigation, such as a login page, splash page, video, or full-page advertisement.
1-Column
14
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
2 Columns Right Bar
The content area of this layout is divided into two columns. The main content column is 740 pixels wide and floats to the far left. The right side bar is 230 pixels wide, and floats to the right. The remaining 20 pixels is the unused space between the two.
2-Columns Right Bar
Column Main Content Column Right Side Bar Unused Space Total
Width 740px 230px 20px 990px
2 Columns Left Bar
This layout is a mirror image of the other two-column layout. This time, the left side bar floats to the left, followed by the main content column.
2-Columns Left Bar
Part II: Layout & Content Blocks
15
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
3 Columns
A 3-column layout has two side columns of 230 pixels each, and a main content area of 490 pixels. The left side bar and main content column are wrapped together, and float as a unit to the left. The right side bar is 230 pixels wide, and floats to the right.
3-Columns
Column Left Side Bar Main Content Column Right Side Bar Unused Space Total
Width 230px 490px 230px 40px 990px
16
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Content Blocks
Content Blocks
Content is organized into blocks that float along to fill the available space, according to the section of the page layout to which they are assigned. If you change the page from a two-column to three-column layout, the blocks in each section flow along and adjust to the space. This fluid approach, or liquid layout, makes it possible to change the layout without interfering with the content. Content blocks are assigned to a specific section of the page layout. Therefore, if you change the layout from a three-column to a two-column layout, the blocks that are associated with the unused side bar will disappear from the page. And if you restore the three-column layout, they reappear. From this perspective, it doesn’t matter what kind of content is in each block. They’re just blocks of content that float along. If you are used to working with individual HTML pages, you will discover that this modular, “building block” approach requires a very different way of thinking.
Preconfigured Blocks
Magento Go includes a set of standard, preconfigured blocks that you can use to add a variety of features and functionality to your store. Some blocks are required components of your store, while others can be enabled or disabled according to your preference.
Custom Blocks
Magento Go’s design and layout tools make it possible to manipulate blocks and even create new ones without writing any code. Custom blocks can be created for any purpose imaginable, and be assigned to any part of the page layout.
Part II: Layout & Content Blocks
17
CHAPTER 3: Page Structure and Layout
A Few Examples
A Few Examples
Here are a few preconfigured blocks that are standard features of your Magento Go store:
Poll The Poll block displays polls or surveys that you have set up.
Compare Products The Compare Products block lets your customers quickly compare items sideby-side.
Recently Viewed Products The Recently Viewed Products block keeps track of products which customers have recently viewed, so they can quickly and easily find them again.
18
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
A Few Examples
Wishlist Displays the wishlist of a logged in customer.
Orders Allows customers who are logged in to view the Order Summary page.
PayPal Displays the PayPal logo, to announce that your store accepts payments by PayPal.
Part II: Layout & Content Blocks
19
CHAPTER 3: Page Structure and Layout
A Few Examples
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
20
Magento Go Design Guide
CHAPTER 4:
Using the Layout Editor
The Layout Editor lets you add pre-configured Magento Go blocks to the left and right columns of most pages in your store. You can also rearrange, lock in place, and remove the blocks from view. The Layout Editor cannot be used on singlecolumn pages, and is disabled for the Customer Account Dashboard. To make changes to the Customer Dashboard, see: “Creating a Frontend App,” on page 41. The selection of blocks varies by page, but includes the following: Layered Navigation Popular Tags Poll Compare Products Recently Compared Products Recently Viewed Products PayPal Wishlist Orders
Launching the Layout Editor
Part II: Layout & Content Blocks
21
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Making Changes to Blocks
To launch the Layout Editor:
Before launching the Layout Editor, make sure that your browser is set to allow popups.
1. From the Admin panel, select Design > Layout Editor. 2. Click the Launch button.
The Layout Editor opens your store in a new window, with each block which can be edited outlined in red.
Moving a Block
The order of blocks in a column can be changed by dragging a block from one location to another. However, you cannot drag a block to another column.
Moving a Block
22
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
To move a block 1. From the Layout Editor, navigate to the page where you want to move the block.
When the Highlight Draggable Blocks checkbox is selected, each block is outlined in red.
2. To rearrange the blocks in the column, simply drag a block from one place to
another.
3. To save the changes, click the Apply Changes button. 4. When prompted to refresh the search index, select Catalog > Search Index, and
click the Refresh Index button.
Locking a Block
If you don’t want a block to be moved or deleted, you can lock it in place.
To lock a block:
From the Layout Editor, click the padlock symbol in the lower-right corner of the block. The block area turns gray.
Locked Block
Part II: Layout & Content Blocks
23
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Adding a Block
You can add a block to the sidebar of most pages that have a two- or threecolumn layout. The selection of blocks differs on each page, so you should visit each page in the store, to see which blocks are available.
Layout Editor - Add Block
To add a new block: 1. From the Layout Editor, navigate to the page where you want to place the block,
and click the Add Block button.
2. In the Add Block list, select the block you want to add, and click the Add button.
Then, click the X in the upper-right corner to close the Add Block list. An outline of the block appears on the page.
Add Block
3. To save the changes, click the Apply Changes button. 4. When prompted to refresh the search index, select Catalog > Search Index, and
click the Refresh Index button.
24
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Deleting a Block
You can remove a block from a page without permanently deleting it.
To remove a block from the page: 1. From the Layout Editor, click the orange “X” in the upper-right corner of the
block.
2. When prompted to confirm, click OK. 3. Click the Apply Changes button to save the changes.
Restoring Defaults
You can easily restore the default selection of standard Magento Go blocks. The change applies throughout the store.
To restore the default blocks: 1. From the Layout Editor, click the Restore Defaults button. 2. When prompted to confirm, click OK. 3. After the defaults are restored, click the Apply Changes button to save your
changes.
Part II: Layout & Content Blocks
25
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Previewing Changes
After you apply layout changes, you should be able to preview them immediately by refreshing the browser.
To preview changes: 1. Close all preview windows. 2. From the Admin panel, select Design > Theme Editor. 3. Click the Preview button to open a new preview for your theme. 4. If necessary, press F5 to refresh your browser window to see the changes.
To discard your layout changes:
From the Layout Editor, click the Cancel button. Changes made to the layout not be applied to your store.
26
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Creating a Custom Block
With Magento Go, you can create blocks of content and place them anywhere in your store. Because the contents of these static blocks are defined in the CMS (content management system), rather than hard-coded into the theme, you can easily change the blocks, even after your store is live, without editing the theme. It’s really quite simple, and yet powerful. You can create and place a custom block in three easy steps: Step 1: Create a Block Step 2: Place the Block Step 3: Preview the Block
Step 1:
Create the Block
1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New Block button. Then, complete the following fields:
Block Title: Identifier: Assign a title to the block of content. Assign a unique identifier to the block. Use all lowercase characters, with underscores instead of spaces. The identifier is used for internal reference. Store View: Status: Content: Select the store views in where this content block will be visible. Set to “Enabled” to make the block visible in the store. Complete the content for the block. You can use the Editor to format text, create links and tables, add images, and link to embedded video and audio files.
3. Click the Save Block button to save your changes.
Part II: Layout & Content Blocks
27
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Step 2:
Place the Block
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, set the Type list to “CMS Static Block.” Then, click the
Continue button.
Frontend App Type
4. In the Frontend Properties section, complete the following fields:
Frontend App Instance Title: Enter a descriptive title for your frontend app. This title is not shown in your storefront—it is visible only in the administrative back office of your store. Sort Order: (Optional) Enter a numeric priority value for your frontend app. This is used to sort frontend apps in the same block. The lower the sort order number, the higher its priority. The highest priority sort order is 0. Assign to Store Views: Select the store views in which you want your new frontend app to be visible. You can select a specific store view, or select All Store Views if you want the app to be visible in all storefronts.
28
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
5. In the Layout Updates section, click the Add Layout Update button. Then, do
the following: a. In the Display On field, select “All Pages.” b. Set Block Reference to “Left Column.”
Layout Updates
6. In the panel on the left, select Frontend App Options. Then, do the following:
a. Click the Select Block button. b. In the list, click to select the block you want to place.
Select Block
7. Click the Save button to save your changes.
Part II: Layout & Content Blocks
29
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Step 3:
Preview the Block
To preview your work, do one of the following: From the Admin panel, select Design > Theme Editor. Then, click the Preview button for your theme. Return to the Preview window and refresh your browser.
The new static block appears at the bottom of the left column. If there are no other blocks in the column, it appears at the top.
New Block in Left Column
Troubleshooting
After you make and apply several layout changes, if you don’t see your changes right away, do the following:
1. Close all Preview windows. 2. Then, from Admin panel > Design > Theme Editor, click the Preview button
for your theme.
30
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Layout Updates
Making Layout Updates
Magento Go is a hosted solution, which means that you don’t have to worry about servers or file management. It also means that you don’t have FTP access to files on the server. Don’t worry, however, because you can still insert custom code. The code that controls the page layout and placement of content blocks is written in XML. You might notice references to XML Page Layout Updates throughout the Admin panel of your store. Every product, category, and piece of content — whether it’s a page, block, banner, or app, has a section where you can update the XML that relates to the item.
Making Page Layout Updates in XML to CMS Home Page
If you have a basic knowledge of XML, and have experience with the Community or Enterprise editions of Magento, you may be comfortable entering code directly into the Layout Update XML box. For example, the following code causes the layered navigation block to appear in the left column of a page.
Example
<reference name="left"> <block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/> </reference>
You can learn a little about how blocks are referenced by examining the layout update code for your home page. Depending on your theme, it might contain instructions to remove blocks, unset blocks, and add blocks. It also might contain references to .phtml template pages, which are a combination of HTML and PHP.
Part II: Layout & Content Blocks
31
CHAPTER 4: Using the Layout Editor
Making Layout Updates
Making a Layout Update to a Specific Product
Even if you are not a programmer, you can still make the same types of changes— and with a lot less work — by using a combination of CMS Blocks and Frontend Apps. It’s simply a matter of creating the content, and then selecting the page and location on the page, where you want it to appear. Once you understand the basics of page layout, the sky’s the limit!
Making a Layout Update to a Specific Category
32
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Block References
Block References
CMS Home Page Block References
Part II: Layout & Content Blocks
33
CHAPTER 4: Using the Layout Editor
Block References
Category Page Block References
34
Magento Go Design Guide
CHAPTER 5:
Adding Dynamic Content
Magento Go allows merchants without advanced technical knowledge to easily add dynamic content, including product data, to pages in their stores. This gives you the control and flexibility you need to create compelling content right from the Admin panel. The term, frontend app refers to a block of content with a predefined set of behaviors. Here are a few examples of the types of content you can create: Landing pages for a marketing campaign Dynamically updated information such as recently viewed items Promotional images that you can position in blocks and side columns Interactive elements and action blocks, such as external review systems, video chats, voting, and subscription forms Alternative navigation elements, such as tag clouds and catalog image sliders Interactive and dynamic Flash elements that can be easily configured and embedded with content
CMS > Frontend Apps
Part II: Layout & Content Blocks
35
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
Adding a “New Products” List
One of the most popular frontend apps for an online store is a list of new products. To add a “New Products” list to the home page of your store, follow these steps: Step 1: Step 2: Step 3: Step 4: Add a New Instance of the Frontend App Place the List on Your Home Page Configure the List Preview Your “New Products” List
Step 1:
Create a Working Copy
To create a working copy, simply save a copy of an existing app. Your working copy is a new “instance” of the app, and the changes you make will not affect the original.
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select Catalog New Products List. Then, click the
Continue button.
Frontend App Type
36
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
4. In the Frontend Properties section, complete the following fields:
Frontend App Instance Title: Enter a descriptive title for your app. This title is not shown in your storefront—it is visible only in the administrative back office of your store. Sort Order: (Optional) Enter a numeric priority value for your app. This is used to sort frontend apps in the same block. The lower the sort order number, the higher its priority. The highest priority sort order is zero. Assign to Store Views: Select the store views in which you want your new app to be visible. You can select a specific store view, or select All Store Views if you want the app to be visible in all storefronts.
Frontend Properties
Part II: Layout & Content Blocks
37
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
Step 2:
Select the Location for the List
1. In the Layout Updates section, click the Add Layout Update button. 2. In the Layout Updates section, do the following:
a. Set Display On to “Specified Page.” b. Set Page to “CMS Home Page.” c. Set Block Reference to “Main Content Area.” d. Set Template to one of the following: New Product Lists Templates New Products Grid Template
Layout Updates
3. Click the Save and Continue Edit button to save your changes and continue
editing.
Step 3:
Configure the List
1. In the panel on the left, select Frontend App Options. Then, do the following: 2. Set Display Products to one of the following:
All products: New products: The most recently added products. Products that you define as “New”
Note: A product is determined to be New if the current date falls between the product’s “Set Product As New From” date and “Set Product As New To” date.
3. Complete the rest of the fields as follows:
a. In the Number of Products to Display field, enter the number of new products you want to include in the list. The default setting is 10.
38
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
b. Set Display page control to one of the following: Yes No c. Displays a new product list with navigation for multiple pages. Displays a single list of new products without navigation.
(Optional) In the Cache Lifetime (Seconds) field, select how often you want to refresh the list of new products. By default, the cache is set to 86400 seconds, or 24 hours.
Frontend App Options
4. Click the Save button to save your settings.
Step 4:
Preview Your “New Products” List
1. From the Admin panel, select CMS > Pages > Manage Content. 2. Find your published Home page in the list. Then, in the Action column, click the
Preview link. A new window opens with your home page and “New Products” list.
Part II: Layout & Content Blocks
39
CHAPTER 5: Adding Dynamic Content
Frontend App Types
Frontend App Types
Type Banner Rotator Description Displays a banner or block of content that can be defined to rotate in sequence or at random. Displays a link to a selected hierarchy node. Allows you to specify custom text and a link to the node. Displays a link to a selected page. Allows you to specify custom text and title. Displays the content of a specified static block of content. Displays a link to a selected catalog category. Allows you to specify custom text and a title. Two templates are available: inline and block. Displays a block on the home page that contains all new products. A product is designated as new based on a range of dates specified in the product record. Displays a link to a selected catalog product. Allows you to specify custom text and a title. Two templates are available: inline and block. Displays a block that contains recently compared products. Allows you to specify the number of products to be displayed. Two templates are available: product list and product grid view. Displays a block that contains recently viewed products. Allows you to specify the number of products to be displayed. Two templates are available: product list and product grid view.
CMS Hierarchy Node Link
CMS Page Link
CMS Static Block
Catalog Category Link
Catalog New Products List
Catalog Product Link
Recently Compared Products
Recently Viewed Products
40
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Creating a Frontend App
The process of creating a Frontend App is nearly the same for each type. You can follow the first part of the instructions, which is the same for all types, and then complete the last part for the specific type of app that you want to create.
Step 1:
Choose the App Type
To create a frontend app: 1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select the Type of app you want to create. Then, click the
Continue button.
Select Type
4. In the Frontend Properties section, do the following:
a. In the Frontend App Instance Title, enter a descriptive title for your app. This title is for internal use only, and won’t be visible to your customers. b. Enter a number in the Sort Order field to determine the order of the block when listed with others in the column. The top position is zero. c. Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down, and select each option.
Part II: Layout & Content Blocks
41
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Frontend Properties
Step 2:
Choose Where It Goes
1. In the Layout Updates section, click the Add Layout Update button.
Add Layout Update
2. Set the Display On field to the type of category or product page where you want
this banner to appear. For Anchor and Non-Anchor settings, you can assign the banner to specific categories. For All Product Types, you can assign the banner to specific product pages.
3. In the Block Reference list, select the block or section of your page layout where
you want this banner to appear.
42
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Step 3:
Choose the Template
1. Set Template to one of the following:
Block Template: Inline Template: Displays the banner as a block section on its own. Displays the app as an inline element in the Block Reference section specified.
2. Click Save and Continue Edit to save your changes and continue editing.
Step 4:
Follow the Instructions for Your App
Banner Rotator CMS Hierarchy Node Link CMS Page Link CMS Static Block Catalog Category Link Catalog New Products List Catalog Product Link Recently Compared Products Recently Viewed Products
Step 5:
Save Your Work and Check It Out!
1. Click the Save button to save your settings. 2. Go to the frontend of your store and see if it’s working as expected.
Part II: Layout & Content Blocks
43
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Rotator
The Banner Rotator app type lets you display a series of rotating banners in your store. Banners can be set to display in a specific sequence or random order. To learn more about banners, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. Set Banners to Display to “Specified Banners.” 3. (Optional) To limit the banner to a certain section of the store, set Restrict by
Banner Types to the section where you want it to appear.
4. In the Rotation Mode list, select one of the following:
Do not rotate, display all at once One at a time, Random One at a time, Series One at a time, Shuffle
44
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Step 3:
Select the Banners:
1. To select the banners to include, do the following:
a. In the Specify Banners section, click the Reset Filter button to list all the available banners. You can also use the search filters to find the banners you want to include. b. Select the checkbox of each banner you want to include in the rotator. c. To set the sequence of each banner in relation to the others, enter a number in the Position column. The number 1 places the banner in the first position.
Specify Banners
2. Click the Save button to save your settings.
Part II: Layout & Content Blocks
45
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Layout Update Options
Layout Updates with Catalog
Option Display On
Description Categories Anchor Categories Appears only on anchored category pages, which are category pages that are shown in the layered navigation. Non-Anchor Categories Appears only on non-anchored category pages, which are category pages that are not shown in the layered navigation. Products All Product Types Simple Product Grouped Product Configurable Product Bundle Product Virtual Product Gift Card
46
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Option Categories
Description To limit the banner to certain categories, select each category where the banner will be available. Options include: Breadcrumbs Left Column Main Content Area My Cart Extra Actions Navigation Bar Page Bottom Page Footer Before Page Footer Bottom Page Header Page Top Right Column Store Language
Block Reference
Template
Options include: Banner Block Template Banner Inline Template
Part II: Layout & Content Blocks
47
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Frontend App Options
Frontend App Options
Option Banners to Display
Description Options include: Specified Banners Shopping Cart Promotions Related This option automatically selects all shopping cart promotion related banners. Catalog Promotions Related This option automatically selects all catalog promotion related banners.
Restrict by Banner Types
Limits the banner to a certain section. Options include: Content Area Footer Header Left Column Right Column
48
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Option Rotation Mode
Description Options include: Do not rotate, display all at once One at the time, Random Displays the banners that you specify in a randomly generated order. Every time the page is refreshed, a different (and random) banner appears. One at the time, Series Displays the banners that you specify by the order of their position every time the page is refreshed. One at the time, Shuffle Displays one banner at a time in a shuffled position order. This option is similar to the One at a time, Random option, except that the same banner does not repeat back-to-back (unless you have only one banner).
Specify Banners
Select the banners to include from the list of available banners.
Part II: Layout & Content Blocks
49
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Hierarchy Node Link
The CMS Hierarchy Node Link app type gives you the ability to place a link to a content node. You can also enter the text to appear when someone hovers over the link. To learn more, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: a. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Node or Page name is used. b. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Page or Node button. Then, select the page or node that will be
linked.
3. Click the Save button to save your settings.
50
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Page Link
The CMS Page Link app type gives you the ability to place a link on a content page. You can also enter text to appear when someone hovers over the link. To learn more about working with CMS content pages, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: c. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Node or Page name is used. d. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Page or Node button. Then, select the page that will be linked.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
51
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Static Block
The CMS Static Block app type gives you the ability to place a block of content nearly anywhere in your store.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: a. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Page name is used. b. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Block button. Then, select block that you want to include. 3. Click the Save button to save your settings.
52
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog Category Link
The Catalog Category Link app type gives you the ability to link to any category page in the catalog. You can also enter text to appear when someone hovers over the link. The two templates available are: inline and block.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options.
Anchor Custom Text:
Enter a descriptive link name for the new app. If this field is left blank, the Category name is used. Enter a title. This title, or caption, is displayed when the user hovers over the link.
Anchor Custom Title:
2. Click the Select Category button. This button opens an in-page box that allows
you to navigate to select your category.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
53
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog “New Products” List
The Catalog “New Products” list app type gives you the ability to display a list of all products which are identified as new. Products are included based on a date range that can be defined in the each product record. For more information, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. For the Display Products option, select one of the following:
All products: New products: The most recently added products Products that you define as “New”
3. In the Number of Products to Display field, select how many new products you
want your customers to see. The default is 10.
4. In the Display page control field, select “Yes” or “No,” depending on whether
you want to display multiple pages of new products that the customer can click through. If you select “Yes,” a new field appears for Number of Products per Page. Here you define how many products you want displayed on each page.
5. In the Cache Lifetime (Seconds) field, select how often you want Magento Go to
refresh the list of new products. By default, the cache is set to 86400 seconds, or 24 hours.
6. Click the Save button to save your settings.
54
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog Product Link
The Catalog Product Link app type gives you the ability to place a link to any product in the catalog. You can also enter the text that appears when someone hovers over the link. The two templates available are: inline and block.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options.
Frontend App Options
2. Complete the following information:
Anchor Custom Text: Enter a descriptive link name for the new app. If this field is left blank, the Product name is used. Anchor Custom Title: Enter a title. This title, or caption, is displayed when the user hovers over the link.
3. Click the Select Product button. This button opens an in-page box that allows
you to navigate to select your product.
4. Click the Save button to save your settings.
Part II: Layout & Content Blocks
55
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Recently Compared Products
The Recently Compared Products app type gives you the ability to display a block of recently compared products. You can specify the number of products displayed in the block, and choose the list template. The two templates available are: product list and product grid view.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. In the Number of Products to Display field, select the number of recently
compared products to display to your customers.
3. Click the Save button to save your settings.
56
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Recently Viewed Products
The Recently Viewed Products app type gives you the ability to display a list of recently viewed products. You can specify the number of products displayed in the block, and choose the template that is used to format the list. The two templates available are: product list and product grid view.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. In the Number of Products to Display field, select the number of recently
compared products to display to your customers.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
57
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
58
Magento Go Design Guide
Part III: Themes, Styles & More
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CHAPTER 6:
Choosing a Theme
Magento Go includes a growing library of professionally-designed themes which you can use “off the shelf,” or customize to suit your needs. In this chapter, you will learn the basics of page layout, how to preview and apply a theme, and brand your store and email messages with your logo. Understanding Page Layout Choosing a Theme Adding Logos
Design > Themes Editor
Part III: Themes, Styles & More
61
CHAPTER 6: Choosing a Theme
Previewing a Theme
Previewing a Theme
You can preview any theme using the actual content from your store, without interrupting the operation of your site. While in Preview mode, you can explore each menu and option. Make sure to examine every page to see how items are arranged within the space. Note: To preview a theme, your browser must be set to allow popups.
To preview a theme: 1. From the Admin panel, select Design > Themes Editor. 2. Click the Preview link below the thumbnail image of any theme. A preview
window opens to show how the theme looks when applied to your store.
Previewing the “Texture” Theme
62
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Previewing a Theme
3. To try a different theme, select its name from the Change Theme list in the
upper-left corner of the page, and click the Change Theme button.
4. To close the preview window, click the Quit Preview button at the top of the
page.
5. When you find a theme you want to try, make a copy that you can edit.
a. Click the Duplicate link below the thumbnail image of the theme you want to copy. b. Enter a new Theme Name and Description if you like, and click the Save button. A new copy of the theme you have chosen, called by the name you have assigned, appears in the left column under My Customizations. This is now your working copy of the theme.
Part III: Themes, Styles & More
63
CHAPTER 6: Choosing a Theme
Previewing a Theme
Changing the Current Theme
To apply the new theme to your store: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section.
2. Under the thumbnail image of your theme, click Apply.
Your new theme now appears at the top of the list under Current Theme.
3. To see the new theme in your store, open a new tab or browser window and type
your store URL in the address bar. If you have a standard domain such as mystore, type: http://mystore.gostorego.com If you have a custom domain such as mystore.com, type: http://www.mystore.com If the new theme doesn’t immediately appear, press the Refresh (F5) button.
Applying a Theme
64
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Adding Your Logos
Adding Your Logos
Your Magento Go store uses three different logo files. The first appears in the header of your store, the second on email messages sent from your store, and the third is the favicon in the address bar of your browser. To achieve the best resolution, it’s best to upload your logo images at their actual display size, rather than resize them in the code. If you want to use the exact size of the sample logo in a theme, you can right-click the logo to find the exact width and height of the image. The information is listed under Properties. You can also use the CSS Editor to modify the dimensions and relative position of the logo, if necessary.
Header Logo
Your store logo appears in the upper-left header of your store with a clickable link back to your home page. The general size and position of the store logo file is determined by the theme.
To upload the Header logo: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section.
2. Under the thumbnail image of your theme, click Customize. 3. In the Theme Customization panel on the left, click Design Settings Editor.
Theme Customization: Design Settings Editor - Header Settings
Part III: Themes, Styles & More
65
CHAPTER 6: Choosing a Theme
Adding Your Logos
Adding Alt Text
The Alt text that is associated with an image appears whenever a visitor to your site hovers over the image with their mouse. The text is indexed by search engines, and also improves the accessibility of your site for people who use screen readers. It’s a best practice to include Alt text for each image on your site.
Logo Image Alt Text
To add Alt text to your logo: 1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under General, select Design. 3. Click to expand the Header section. 4. Type the Logo Image Alt text that you want to appear whenever someone hovers
over your logo.
System > Configuration > General > Design > Header
5. Click the Save Config button.
66
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Adding Your Logos
Email Logo
This logo appears at the top of automated email messages sent to customers. These messages are referred to as “transactional emails” and are based on templates. To learn more, see the Magento Go User Guide.
To upload your Email logo: 1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under Design, select Transactional
Emails.
System > Configuration > Design > Transactional Emails
3. Click the Browse button and select the Logo Image from your computer. 4. In the Logo Image Alt field, type the Alt text you want to use for the image. 5. When complete, click the Save Config button.
Logo Image on Transactional Email
Part III: Themes, Styles & More
67
CHAPTER 6: Choosing a Theme
Adding Your Logos
Favicon
The favicon (short for favorite icon) is the little icon in your browser address bar before the URL. The favicon also appears on the tab of each browser page. By default, the Magento logo is the favicon that appears in your Magento Go store.
Default Magento Favicon
Favicons are generally 16x16 pixels or 32x32 pixels in size. Although Magento accepts .ico, .png, .jpg, .jpeg, .apng and .svg file types, not all browsers support these formats. The safest format to use for a favicon file is an .ico. Many free favicon converter tools are available online to convert other, more common image types, like .png, .gif, and .jpg to the .ico format. Because Magento Go does not convert an image from one format to another, any file conversion should take place before the file is uploaded to your store.
Step 1:
Create a Favicon
1. Create a 16x16 or 32x32 graphic image of our logo, using in the image editor of
your choice.
2. Use one of the available online tools to convert the image to the .ico format.
Name the file “favicon.ico” and save it to your computer.
Step 2:
Upload the Favicon to Your Store
1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under General, select Design. Then, click
to expand the HTML Head section.
3. At the Favicon Icon field, click the Browse button to find your favicon file. 4. Click the Save Config button to save your changes.
68
Magento Go Design Guide
CHAPTER 7:
Customizing Your Theme
After you have selected a starting theme, you can customize the theme to suit your brand and business needs. In this chapter, you’ll learn how to take advantage of Magento Go’s design editors to completely change the look and feel of your store. Changing Interface Text Using Maintenance Mode Changing Theme Styles Resizing Catalog Images
Theme Editor
Part III: Themes, Styles & More
69
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Changing Interface Text
The Theme Text Editor lets you change the terminology that is used throughout the interface of your store. For example, Magento Go uses the terminology “My Account,” “My Wishlist,” “My Dashboard,” and so on, to help customers find their way around. To simplify matters, you might prefer to use the word “Account.” And for consistency, you might change the title of the customer account Dashboard, so that it no longer says, “My Dashboard,” but simply, “Dashboard.” Then, you might change the text in the following paragraph, so that it says, “From your Account Dashboard, you have the ability to….” Or, you might change the message entirely. If your store is available in multiple languages, you can use the Theme Text Editor to make fine adjustments to the translated text of the locale. For learn more about translating your store, see the Magento Go User Guide. The Theme Text Editor outlines all of the pre-defined text that is on a page, so you can see which parts can be changed. You can also easily change text in the header and other interface elements, without editing the code.
Theme Text Editor
70
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Step 1:
Turn On Maintenance Mode
Because your store is unavailable to customers while in Maintenance Mode, it is best to perform routine maintenance on your store after normal business hours.
1. From the Admin panel, select System > Maintenance Mode. 2. In the Configuration panel on the left, under General, select Maintenance Mode. 3. In the Maintenance Mode Options section, set Enable Maintenance Mode
to “Yes.”
System > Configuration > General > Maintenance Mode > Maintenance Mode Options
4. Set Maintenance Mode Page to “503 Service Unavailable.”
You can customize the default “503 Service Unavailable” page to make it more friendly. For more information, see the Magento Go User Guide.
5. In the Whitelist field, enter your IP address, so you will be permitted access to
your store while others are redirected to the “Services Unavailable” page.
6. Click the Save Config button to save your settings, and put your store into
Maintenance Mode.
Part III: Themes, Styles & More
71
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Step 2:
Edit the Store Text
Note: Before launching the Theme Text Editor, make sure that your browser is set to allow popups.
1. From the Admin panel, select Design > Theme Text Editor. 2. Click the Launch button.
The Theme Text Editor displays a new Preview window with a toolbar at the top. All text that can be edited is outlined in red.
3. To change the meta title that appears in the address bar of the browser, do the
following: a. Hover over the yellow TITLE box, and click the Book icon.
b. Type your changes into the text box, and click the green checkmark to close the text box and temporarily save your changes.
4. To change the text that appears in the Quick Search box, do the following:
a. Hover over the yellow SCRIPT box, and click the Book icon. b. Type your changes into the text box, and click the green checkmark to close the text box and temporarily save your changes.
72
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
5. To edit text on the page, do the following:
a. Hover over the text that you want to edit, and click the Book icon.
b. Type your changes into the text box. Then, click the green checkmark to close the text box. Your changes are temporarily saved, and appear immediately.
6. When finished with all the edits for this page, click the Save button. 7. As you navigate throughout your store, remember to save the changes made to
each page before continuing to the next page.
8. When complete, click the Quit Inline Text Editor button at the top of the page.
Step 3:
Turn Off Maintenance Mode
When you are finished working in the Theme Text Editor, don’t forget to bring your store back online!
1. From the Admin panel, select System > Maintenance Mode. 2. In the Configuration panel on the left, under General, select Maintenance Mode. 3. In the Maintenance Mode Options section, set Enable Maintenance Mode
to “No.”
4. Click the Save Config button to save your changes, and bring your store online.
Part III: Themes, Styles & More
73
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Changing Theme Styles
The Theme Editor lets you customize the styles which are used to format the following sections of the page, without editing the CSS code: Body: Heading: Header: Footer: Text, links, and background Heading levels and page title Logo image, and header border and background Footer border and background
Experiment with each of them to see the effects in your theme.
Theme Editor
74
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
To make changes to theme styles: 1. From the Admin panel, select Design > Themes Editor. 2. In the Theme Editor, select the theme you want to use as a starting point, and
click the Customize button below the thumbnail.
3. In the Theme Information section, complete the following:
Theme Name Theme Description
4. Click the Save button.
Additional options appear in the Theme Customization panel on the left.
Theme Customization
Part III: Themes, Styles & More
75
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Using the Design Settings Editor
The Design Settings Editor lets you make changes to the CSS styles without writing any code. Each section represents a specific part of the page, and includes a selection of options that correspond to CSS properties and values.
To access the Design Settings Editor: 1. In the Theme Customization panel on the left, select Design Settings Editor.
Design Settings Editor
2. Click to expand the section with the settings you want to change. 3. Select the property values that you want to apply. 4. Click the Save and Continue Edit button. You must save your customized theme
before you can preview it. Your theme is now listed in the My Customizations section of the Theme Editor. Tip: As you customize your theme, be sure to save your work periodically. When you get your theme to a good point, if you duplicate your customized theme, you are essentially making a backup copy that you can revert back to if you change your mind.
76
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Body Settings
In the Body Settings section, you can modify your store’s global settings for the following: Text: Links: Font, size, alignment, color, and line spacing Font, size, and color for all link states: Default, Hover, Active, and Visited Background: Image, color, repeat pattern, and position
Body Settings – Text
Using the Color Picker
The Color Picker lets you select the text color as a hexadecimal value. The value always begins with the # symbol, followed by the hexadecimal value for the color.
To pick a color: 1. Click anywhere on the hue map to select a color. 2. On the right, move the slider to adjust the intensity.
The color picker generates the hexadecimal code for the selected color.
Part III: Themes, Styles & More
77
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Text Properties
CSS Example
body { background:#000; font:12px Arial, Helvetica, sans-serif; color:#999; text-align:left; }
Property Font Values: Size Not assigned Arial, Helvetica, sans-serif Verdana, Geneva, sans-serif Tahoma, Geneva, sans-serif Georgia, serif
Values: 6px 8px 10px 12px 14px 16px
Italic Bold Align Values: Color Line height Values: Not assigned 0.8 0.9 1.0 1.1 1.2 1.3 Not assigned left center right
78
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Link Properties
You can assign different styles to links to indicate the current state. Each tab represents a different state, but the properties are the same. Default Hover, Active, or Visited
Body Settings – Links
CSS Example
a { color:#087698; } a:hover { color:#AB24D4; }
Property Font Values: Size Not assigned Arial, Helvetica, sans-serif Verdana, Geneva, sans-serif Tahoma, Geneva, sans-serif Georgia, serif
Values: 6px 8px 10px 12px 14px 16px
Italic Bold Color
Part III: Themes, Styles & More
79
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Background Properties
The Background section lets you select a background image, and select a background color. You can control whether the image is repeated, and set its starting position.
Body Settings – Background
CSS Example
body { background:#000; font:12px/1.35 Arial, Helvetica, sansserif; color:#999; text-align:center; }
Property Image Color Repeat Values: Position Not assigned no-repeat repeat repeat-x repeat-y inherit
Values: left top left center left bottom right top right center right Bottom center top center center center bottom custom
80
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Headings Settings
In the Headings Settings section, you can modify the heading levels, page title, background, and borders. The tabs represent heading levels <h1> through <h6>, and the page title. The selection of settings is the same on each tab.
CSS Example
h1 { font-size:18px; font-weight:normal; color:#000; }
Headings Settings
Part III: Themes, Styles & More
81
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Text Properties
See the Body Settings section.
Background Properties
See the Body Settings section.
Border Properties
The Borders section of the Heading Settings lets you apply borders to the heading levels and page title, and set the style, color, and width. The borders can be applied to all sides, or to any combination of the top, right, bottom, or left of the associated heading style. All Top, Right, Bottom, or Left Property Style Values: Color Width Values: Not assigned None 1px 2px 3px 4px 5px Not assigned hidden dotted dashed solid double groove ridge inset outset
82
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Header Settings
In the Header Settings section, you can upload a background image, set the background color, and apply borders. Image Header background: Upload a background image Select an image and color, and set the repeat pattern, and position Header borders: Set the, style, color, and width of borders
Header Settings – Background
CSS Example
.header { background:#000; border:1px solid #ccc;}
Background Properties
See Body Settings on page:
Border Properties
See Headings Settings on page:
Part III: Themes, Styles & More
83
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Footer Settings
In the Footer Settings section, you can modify the background image, and borders of the footer. Footer background: Footer borders: Image, color, repeat pattern, and position Position, style, color, and width
CSS Example
footer { background:#fff; border:1px solid #ccc;}
Footer Settings – Border
Background Properties
See Body Settings on page:
Border Properties
See Headings Settings on page:
84
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Preview Your Theme
Before previewing your theme, make sure that your browser is set to allow popups.
To preview your theme: 1. Click the Preview button in the upper-right corner.
You can see how the changes will look in your store, but they have not yet been applied to your store.
2. To preview other themes, select a theme from the Change Theme list, and click
the Change button.
3. When you’re finished, click the Quit Preview button.
Previewing Themes
Part III: Themes, Styles & More
85
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Apply Your Theme
To apply the new theme to your store: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section. Under the thumbnail image of your theme, click Apply. Your new theme appears at the top of the list under Current Theme.
2. To see the new theme in your store, open a new tab or browser window and type
your store URL into the address bar of your browser. If you have a standard domain such as mystore, type this: http://mystore.gostorego.com If you have a custom domain such as mystore.com, type this: http://www.mystore.com If the new theme doesn’t immediately appear, press the Refresh (F5) button.
Applying a Theme
86
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Troubleshooting
If the changes don’t appear when you refresh the page, try this:
1. From the Admin panel, select Design > Themes Editor. 2. In the Current Theme section, click the Customize button below the thumbnail. 3. In the Theme Customization panel on the left, select CSS Editor. 4. Scroll down to the Custom CSS section at the bottom of the page, and make sure
that the Ignore Design Settings Editor checkbox is not selected. If necessary, clear the checkbox.
If selected, any custom CSS settings in your current theme will override the Design Settings Editor.
5. Click the Save button to save the setting. 6. Click the Preview button to verify that your design settings have been applied.
Custom CSS - Clear Ignore Design Settings Editor
Part III: Themes, Styles & More
87
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
Resizing Catalog Images
Magento Go resizes the product images that you upload according to the dimensions specified by the theme. As a best practice, you should standardize the size of your images to ensure that they appear at the highest possible resolution, and maintain the correct proportion. Using images of various sizes and dimensions may impact the quality of the images displayed in your product catalog. One way to ensure that images maintain the correct proportion, or aspect ratio, when scaled is to make each image square. However, you can override the default size by specifying an exact size (in pixels) for any image. This is an easy solution for images that appear blurry or distorted. If you specify a new size for the base image, the associated small image and thumbnail resize automatically.
Design > Themes Editor > Customize (Theme) > Catalog Images
88
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
To resize catalog images: 1. From the Admin panel, select Design > Themes Editor. 2. In the Current Theme section on the left, under the thumbnail for your current
theme, click Customize.
3. In the Theme Customization panel on the left, select Catalog Images.
Theme Customization > Catalog Images
4. In the Location column, find the image you want to resize. Then, set Image Type
to one of the following: Thumbnail Small Image Base Image
If you set one of the three image types to a custom size, the other two are resized automatically.
Part III: Themes, Styles & More
89
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
5. Enter the size, in pixels, for the image:
Width (px): (Required) If only the width is specified, the image is resized proportionally. Height (px): If both width and height are specified, the image is resized exactly.
Resizing an Image
6. To restore the default size of an image, do the following:
Click the Reset button to the right of the image. To restore all catalog images to their default sizes, click the Restore Default button in the upper right of the Catalog Images section.
7. To preview your change, click the Save button. Then, click the Preview button in
the upper-right corner to preview the resized image.
8. When finished, click the Save button.
Note: When you resize a catalog image, the change applies to all themes. After resizing a catalog image, you should also update any custom CSS to ensure that the image renders correctly.
90
Magento Go Design Guide
CHAPTER 8:
Using the CSS Editor
Most websites cascading style sheets to control the look and formatting of the site. If you’re comfortable working with and editing CSS, you can further customize the look and feel of your store. Magento Go allows you to add your own custom CSS file to override any of the default CSS used in the available themes. This gives you complete control of the formatting of all the elements of your store. This chapter does not teach you how to use CSS. If you want to learn more about CSS, try one of the many online tutorials or books. You can also use online plugins to help you work with CSS.
Design > Themes Editor > Customize
Part III: Themes, Styles & More
91
CHAPTER 8: Using the CSS Editor
Resizing Catalog Images
Step 1:
Download the Style Sheet
1. From the Admin panel, select Design > Themes Editor. 2. In the Theme Editor, select the theme you want to use as a template, and click the
Customize button.
3. In the Theme Customization panel on the left, select CSS Editor. Then, do the
following: a. In the Theme CSS section, click to select the styles.css file. b. When prompted, save the file to your computer. You can now open the file with your favorite text editor, to become familiar with the styles. Note: The .css files are saved in an optimized format that removes the whitespace, so when you view a file online, all spaces between the words are removed.
Step 2:
Enter Your Own Custom CSS Code
In the Custom CSS panel, you can override any existing CSS style, or add new ones for your theme. Any custom CSS that you enter overrides the default CSS for the theme.
1. To change CSS styles for your theme, you can enter your new CSS styles directly
in the Edit custom.css field. For example, the following CSS style turns off the “Checkout” link in the header:
.top-link-checkout { display: none; }
Note: The CSS styles entered in the “Edit custom.css” field are processed last. Therefore, they override styles that are uploaded as a custom.css file, as well as those in the default theme CSS files.
2. If you want any settings from the Design Settings Editor to be ignored, check the
Ignore Design Settings Editor checkbox at the bottom of the screen.
3. Click the Save and Continue Edit button to save your changes, but continue
working.
92
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Uploading a Custom CSS File
Uploading a Custom CSS File
You can also create a new CSS file with only the declarations that you want to use as overrides, and then upload it to your store. (Don’t include all of the default CSS declarations for your theme, but only the ones with changes.)
To upload a custom CSS file: 1. From the CSS Editor, in the Custom CSS section, browse to find your own custom
CSS file on your computer.
2. Select the file to copy the path to the Upload custom.css file box.
The allowed file type is .css. The file you upload replaces any existing custom.css file that might be shown in the “Edit custom.css” box.
3. Click the Save button to save your work.
Custom CSS
Part III: Themes, Styles & More
93
CHAPTER 8: Using the CSS Editor
Managing Your Image Assets
Managing Your Image Assets
Magento Go uses a Content Delivery Network (CDN) to manage images that are uploaded to Media Storage. You can keep things organized by creating folders for your images. The following types of images can be uploaded to Media Storage: .jpg .png .gif (.jpeg)
To create an image folder: 1. From the CSS Editor, click the Images Assets Manage button. 2. From Media Storage, click the Create Folder button. 3. If prompted, click to allow scripted windows. 4. In the popup window, enter the New Folder Name, using hyphens or
underscores instead of spaces. Then, click OK. The new folder appears in the Css Editor Images section of the directory tree.
Creating a Folder for Images
94
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Managing Your Image Assets
Uploading Images
If you want to use your own background images or fonts in your theme, you can upload the images or fonts using the CSS Editor. It is important to use relative URLs when referencing your uploaded images from CSS. This will preserve the link to the image, even if the location on the server changes. The following examples show how to format a relative path to an image in Media Storage.
../css_editor_images/imageName ../css_editor_images/subdirName/imageName
The next examples show how to reference relative URLs in CSS styles.
.styleName { background:url(../css_editor_images/imageName.gif) no-repeat } .styleName { background:url(../css_editor_images/subdirName/imageName.gif) no-repeat }
Make sure that all CSS references to your uploaded images follow these conventions.
To upload your images: 1. From the CSS Editor, in the Custom CSS section, click the Image Assets Manage
button.
2. From Media Storage, do the following:
a. In the directory tree on the left, navigate to the folder where you want to place the uploaded image. b. Click the Browse Files button, and select the image file to upload. (Hold the Ctrl key down to select more than one file at a time.) c. Click the Upload Files button to upload the file(s) to the specified folder.
Part III: Themes, Styles & More
95
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Managing Your Font Assets
The @font-face CSS rule makes it possible to use a wide variety of fonts, beyond the few which are traditionally considered to be “web safe.” The @font-face rule is supported by all major browsers. Firefox, Chrome, Safari and Opera support .ttf and .otf font file formats for use with the CSS @font-face rule . At the time of this writing, Internet Explorer does not support True Type and Open Type fonts. It does, however, support Microsoft’s proprietary Embedded OpenType (.eot) file format.
To create a fonts folder: 1. From the CSS Editor, click the Fonts Assets Manage button. 2. From Media Storage, click the Create Folder button. If prompted, click to allow
scripted windows.
3. In the popup window, enter the New Folder Name, using hyphens or
underscores instead of spaces. Then, click OK.
4. The new folder appears in the Css Editor Fonts section of the directory tree.
Creating a Folder for Fonts
96
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Uploading Fonts
Both True Type and Open Type fonts can be uploaded to the Css Editor Fonts section of Media Storage. .ttf .otf True Type font Open Type font
If you implement True Type or Open Type fonts in your theme, any browser that does not support the fonts will render the pages using standard “web safe” fonts instead.
To upload your fonts: 1. From the CSS Editor, in the Custom CSS section, click the Fonts Assets Manage
button.
2. From Media Storage, do the following:
a. In the directory tree on the left, navigate to the folder where you want to place the uploaded font. b. Click the Browse Files button, and select the font file to upload. (Hold the Ctrl key down to select more than one file at a time.) c. Click the Upload Files button to upload the file(s) to the specified folder.
CSS Example
@font-face { font-family: "myfontname"; src: url("../css_editor_fonts/MyUploadedFont.ttf"); } .demo-notice { font-family: } "myfontname", Georgia, serif;
Part III: Themes, Styles & More
97
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Examples of CSS Code
Here are some examples of CSS customizations that you can use to make common modifications to the Media theme in Magento Go. Each theme is a little different, so these are only examples. The specific values needed may vary by theme. You can experiment by entering CSS code directly into Edit Custom .css box, to see the effect of the style changes in your theme. Tip: Use the Firefox plug-in Firebug to help you determine the specific names and values used in your theme.
/* To remove the white space under the nav bar at the top of the page */ .top-container { margin: 0; padding: 0; }
/* To turn off the checkout link at the top of the page and remove the separator bar after the cart link */ .top-link-checkout { display: none; } .top-cart .block-title strong { background-image: none; }
/* To move the search box down into the nav bar area */ .header .form-search { position: absolute; right: 10px; top: 100px; }
/* To remove the Newsletter signup from the footer */ .footer .form-subscribe { display: none; }
98
Magento Go Design Guide
CHAPTER 9:
Working with JavaScript
Your store layout, design, and functionality can be customized using the design tools which are available from the Admin panel. However, if you have a working knowledge of JavaScript, you can make additional changes to enhance your store. Magento Go allows you to add your own custom JavaScript files to add client-side functionality – which is executed at the individual browser level, rather than on the server. In this chapter, you will learn how to work with JavaScript libraries, hosted scripts, and snippets of code to implement custom features for your Magento Go store. This material was written for frontend developers who have a working knowledge of JavaScript. If you would like to learn more, you can find a wealth of educational material online or at your favorite book store.
Adding Custom Code
There are two primary methods for adding custom JavaScript to your Magento Go store, and one you use depends on what you want to do. Method 1: To implement custom code (.js file), hosted scripts, or JavaScript libraries (such as TypeKit, JQuery, or MooTools), use the Java Script Editor in the Theme Customization section. Method 2: To add hosted scripts or invoke custom snippets of code, add the code to a static block and use a Frontend App to make the code available to the appropriate pages.
Part III: Themes, Styles & More
99
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Method 1: Upload JavaScript Files
1. From the Admin panel, select Design > Theme Editor. 2. In the Theme Editor, below the thumbnail for the theme you are working with,
click Customize.
3. In the Theme Customization panel on the left, select Java Script Editor. 4. In the Theme JavaScript section, do the following:
a. Click the Browse Files button to select the JavaScript file from your computer. Repeat this step to add the path to every JavaScript file that you want to upload. To upload multiple JavaScript files, first add each file, and then upload them all at once—you don’t need to upload each file separately. b. Click the Upload Files button to upload the JavaScript file to your store. After the file is uploaded, the JavaScript will be available to all pages.
5. Click the Save button to save your changes.
Managing Load Order
For many JavaScript libraries, scripts and libraries must load in the correct order to function properly. You can manage the load order of scripts by dragging and dropping the files into position in the list of JavaScript files to upload. Uploading them in sequence ensures that they are in correct order automatically.
100
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Using jQuery
To take advantage of the jQuery library or any of the custom plug-ins that are available, follow the steps below. Note: This method might not always work because different version of JavaScript might conflict with each other. We believe the noConflict() solution is the best alternative currently available. To learn more about noConflict(), visit the jQuery API page.
To add custom code using the Built-In Library (v.1.3.1): 1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New button. Then, do the following:
a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(jQuery); </script>
d. Replace the comments with your custom jQuery code.
Adding jQuery Code to CMS Block
Part III: Themes, Styles & More
101
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
To add custom jQuery code using any version of jQuery:
Note: This example uses the hosted jQuery Library version 1.5.2 from Google APIs.
1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, select Design. Then, do the following:
a. In the HTML Head section, scroll down to the Miscellaneous Scripts box and paste the following code:
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’ type="text/javascript"></script>
b. Click the Save button. c. Paste the following code immediately after the hosted jQuery library that you included:
<script type="text/javascript"> var j152 = jQuery.noConflict(true); </script> d. Click the Save Config button to save the changes.
3. From the Admin panel, select CMS > Static Blocks. 4. Click the Add New button. Then, do the following:
a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
102
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
d. Replace the commented out lines with your custom jQuery code.
Adding jQuery Code to the CMS block
5. Click the Save Block button to save your changes.
To add custom jQuery code using an uploaded version of jQuery: 1. Open the jQuery library file in a text editor, and do the following:
a. Paste the following code at the end of the file. b. Change the name of the variable j152 to match the version of jQuery that you are using.
var j152 = jQuery.noConflict(true);
2. From the Admin panel, select Design > Theme Editor. 3. In the Theme Editor, below the thumbnail for the theme you are working with,
click Customize.
4. In the Theme Customization panel on the left, select Java Script Editor. Then,
do the following: a. In the Theme Java Script section, click the Browse Files button. Select the modified jQuery file that you want to use. b. Click the Upload Files button. c. Click the Save button to save your changes.
Part III: Themes, Styles & More
103
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
5. From the Admin panel, select CMS > Static Blocks. Click the Add New button,
and do the following: a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
d. Change the variable name (j152) to correspond to the variable you created. e. Replace the comments with your custom jQuery code.
6. Click the Save button to save your changes.
Applying JavaScript Actions
For a JavaScript file to work properly, you must first invoke it within a page by entering a small script.
To invoke JavaScript actions for a page: 1. From the Admin panel, select CMS > Pages > Manage Content. 2. Do one of the following:
Click to open the page where you want to invoke the script. Click the Add New Page button.
3. In the Page Information panel on the left, select Content. Then, do the following:
a. Click the Show / Hide Editor button to work in plain code mode. b. Paste the script code, immediately after the JavaScript plug-in instructions.
4.
Click the Save Page button to save your changes.
5. Preview the page you just created to make sure that the script works correctly.
Tip: If your script is not functioning as intended, double-check your code and follow the developer’s instructions precisely.
104
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Method 2:
Use Hosted Scripts and Code Snippets
To add code snippets or a link to hosted scripts, you need to include the code in a new static block. Then, use a frontend app to add the static block to your store. For more information, see: “Adding Dynamic Content,” on page 35. Step 1: Step 2: Step 3: Step 4: Add a New Static Block Create a New Frontend App Choose Where it Goes Verify that the Code Works
Step 1:
Add a New Static Block
1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New Block button, and do the following:
a. Complete the required fields. b. Click the Show/Hide Editor button to work in plain code mode. c. In the Content box, paste your code snippet or script link.
CMS Block Content
3. Click the Save button.
Part III: Themes, Styles & More
105
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Step 2:
Create a New Frontend App
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select the Type of app you want to create. Then, click the
Continue button.
Select Type
4. In the Frontend Properties section, do the following:
a. In the Frontend App Instance Title, enter a descriptive title for your app. This title is for internal use only, and won’t be visible to your customers. b. Enter a number in the Sort Order field to determine the order of the block when listed with others in the column. The top position in zero. c. Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down, and select each option.
106
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Step 3:
Choose Where It Goes
1. In the Layout Updates section, click the Add Layout Update button. Then, do
the following: a. Set Display On to “All Pages.” b. Set Block Reference to “Page Footer.”
2. In the panel on the left, select Frontend App Options. Then, do the following:
a. Click the Select Block button. b. In the list, click to select the block where you inserted the code..
3. Click the Save button to save your changes.
After you have completed these steps to create a static block with the JavaScript code (or script source link), and the Frontend app that references the block, your script should be running.
Step 4:
Verify that the Code Works
1. Go to any page in your store. 2. Right-click on the page, and select View Page Source (or a similar variation,
depending on your browser).
View Page Source
3. In the page source view, click Ctrl+F to open the Find tool.
Part III: Themes, Styles & More
107
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
4. Search for the file name of the JavaScript file that you added. If the file name is
included in your page source, the file is running.
View Source - Find
To verify a code snippet or script source: 1. Go to any page in your store, or to the specific type of page where the code is
used.
2. Right-click on the page, and select View Page Source (or similar command,
depending on your browser).
3. In the page source view, click CTRL+F (or similar command) to open the Find
tool.
4. Search for any line of code from the code snippet (preferably a unique line, so you
don’t have to search through other code to find it). If you find the code in the page, then it is running.
108
Magento Go Design Guide
Appendices
Glossary Editor Toolbar Buttons Block References Page References
Appendices
109
Appendix A:
Glossary
above the fold The web page content that is immediately visible in the browser window; section of a page that is displayed without the need to scroll. Administrative panel; back office; private section of store where orders, catalog, content, and configurations are managed. The text that is displayed in place of an image when the user is unable to view the image. The visible text that is anchored to another page or page section; the literal text of a hyperlink. Application Program Interface: A software interface that lets third-party applications read and write to a system using programming language constructs or statements. A characteristic or property of a product; anything that describes a product. Examples of product attributes include color, size, weight, and price. To give a service permission to perform certain actions or to access resources. Product price, less coupons or discounts, plus freight and applicable taxes. The average is determined by adding the beginning cost of inventory each month, plus the ending cost of inventory for the last month of the period. Promotional graphics displayed either horizontally on the top of a web page or vertically on the left or right margins. Website advertisements are often displayed as banners.
Admin panel
alt text
anchor text
API
attribute
authorization
average inventory cost
banner
110
Appendices
Appendix A: Glossary
B2B
Business to Business: A type of business transaction between two business entities that are not the final consumers of the goods or services. Business to Consumer: Business transactions between a business entity and a consumer. To perform a task or make a change to multiple items all at once, without manual repetition. The percentage of visitors to your site that leave without viewing any other pages. A unique identity that defines a particular product or group of products. A navigation aid that helps the user to keep track of their location within your store. A retail business with a permanent physical location, as opposed to being entirely virtual. A hyperlink that fails to send the user to its intended web page. The canonical meta tag redirects search engines to the correct URL, when seemingly duplicate content is encountered on the server. The process of converting the authorized amount into a billable transaction. Transactions cannot be captured until authorized, and authorizations cannot be captured until the goods or services have been shipped. A person who opens a credit card account and is authorized to make purchases. A set of products that share particular characteristics or attributes. A marketing term that indicates a goal has been reached. If the goal is to sell a product, conversion is reached when a visitor to your site becomes a buyer. The percentage of visitors who are converted into buyers.
B2C
batch processing
bounce rate
brand
breadcrumb
brick and mortar
broken link
canonical URL
capture
cardholder
category
conversion
conversion rate
Appendices
111
Appendix A: Glossary
checkout process
The process of gathering the payment and shipping information that is necessary to complete the purchase of items in the shopping cart. In the final step, the customer reviews and places the order. Content Management System: A software system that is used to create, edit, and maintain content on a website. Comma Separated Values: A type of file used to store data values which are separated from each other by commas. Card Verification Method: A way to verify the identity of the customer by confirming a 3-digit or 4-digit credit card security code with the payment processor. A document issued by the merchant to a customer to write off an outstanding balance because of overcharge, rebate, or return of goods. Cascading Style Sheets: A style sheet language that controls the appearance of HTML documents; a way to control the appearance of text, graphics, lists, links, and all other elements on a web page. The address of a website on the web; what the customer types in their browser address bar to access the store. The process for subscribing email recipients by requiring them to take a secondary step to confirm that they want to receive emails. A web page that displays different content depending on the user request. A term or phrase used in a search to filter for content that is of significant importance to that term or phrase. Frequently Asked Questions.
CMS
CSV
CVM
credit memo
CSS
domain
double opt-in
dynamic content
keyword
FAQ
112
Magento Go Design Guide
Appendix A: Glossary
favicon
Short for favorites icon; a 16x16 or 32x32 pixel icon associated with a website; is displayed in the browser address bar and next to the site name in a bookmark list. Freight On Board: A shipping term indicating who is responsible for paying transportation charges. The process of managing customer shipments. A transaction bridge between a customer and a payment processing service that is used to transfer money between the customer and the merchant. The difference between the cost and price of a product. The first home page a visitor sees when they access your website URL. Considered the most important page on your website according to search engine indexers. HyperText Markup Language: A standard for tagging and structuring text, images, videos, and other media on a web page. A document that provides a detailed description of a purchase, including products purchased, quantity, price, shipping cost, sales tax, and total. A scripting language used with HTML to produce dynamic effects and interactions on web pages. A page on your site where a visitor arrives after clicking a link or advertisement. The value and authority transferred from one web page to another via hyperlinks (or links). Link juice affects a website’s page rank, a factor used to rank a search engine results page. A set of configurations that defines the user’s language, country, tax rate, and other settings. The process of signing into an online account.
FOB
fulfillment gateway
gross margin
home page
HTML
invoice
JavaScript
landing page
link juice
locale
login
Appendices
113
Appendix A: Glossary
markdown
The amount subtracted from the original price of a product. A percentage added to the cost of an item to determine the retail price. An account with a bank or financial institution that makes it possible to accept credit card transactions. Information in a web page that is not displayed on the page itself, but is used by search engines to determine the page title, description, and page keywords. The primary group of web page links that a customer uses to navigate around the website; the navigation links to the most important categories or pages on an online store. The process by which a user consents to receiving emails from an online store. A document that is usually included in a shipped package that describes the contents. Packing slips do not include financial or account information. A service that charges your customers’ credit cards and sends the funds to your merchant account, for deposit into your business bank account. Payment Card Industry: Refers to debit and credit cards and their associated businesses. A written sales contract between a buyer and seller that describes the merchandise or service to be purchased from a vendor. A document that explains the merchant’s policies for handling customer information. A method used to alert browsers and search engines that a page has been moved. 301 Redirect: Permanent change 302 Redirect: Temporary change
markup
merchant account
meta tags
navigation
opt-in
packing slip
payment gateway
PCI
purchase order (PO)
privacy policy
redirect
114
Magento Go Design Guide
Appendix A: Glossary
relative link
A hyperlink that includes only the address of the linked page that is relative to the linking page, rather than the full URL. A document that explains the merchant’s rules regarding the return of products by customers. A file placed on a website that tells search engine crawlers which pages not to index. Really Simple Syndication: A technology that creates web content syndication and allows web users to subscribe to product feeds, websites, and blogs. Software as a Service: A software delivery model where the vendor provides the software and hosting environment, and customers pay for the service by subscription or per use. Information that is used by the SSL protocol to establish a secure connection. Search Engine Optimization: The process of improving a website’s search engine rankings in order to increase valued visitors. Settlement occurs when the acquiring bank and the issuer exchange funds and the proceeds are deposited into the merchant account. A company that transports packages. Common carriers include UPS, FedEx, DHL, and USPS. A grouping of products that the customer wishes to purchase at the end of their shopping session. A page that provides search engines with an efficient, alternate route through your site. Stock Keeping Unit: A number or code assigned to a product to identify the product, options, price, and manufacturer. A promotional page with a product or advertisement; normally displayed before the home page.
return policy
robots.txt
RSS feed
SaaS
security certificate
SEO
settlement
shipping carrier
shopping cart
sitemap
SKU
splash page
Appendices
115
Appendix A: Glossary
SSL certificate
A validation and security mechanism that identifies the merchant and encrypts credit card and other sensitive information. Content that does not change frequently. See also dynamic content. A fixed content block that can be displayed on various content pages in a store. A package that contains graphics and appearance information, and customizes the look and feel of the store. A notification email sent to the customer when a transaction is processed. Uniform Resource Locator: The unique address of a page on the internet. Refers to the degree to which a product or service is easy to use by its customers. What You See Is What You Get: An editor that displays formatted text as it will appear in its final published form. Extensible Markup Language: A markup format derived from SGML that it used to format information for publication and distribution.
static content
static block
theme
transactional email
URL
usability
WYSIWYG
XML
116
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Appendix B:
Editor Toolbar Buttons
Styles and Fonts
List Description Styles
Format
Font Family
Font Size
Character Format
Button Description Bold
Italic
Underline
Strikeout
Subscript
Superscript
Appendices
117
Appendix B: Editor Toolbar Buttons
Special Characters
Button Description Insert Symbol
Insert Non-Breaking Space
Color
Button Description Select Text Color
Select Background Color
Paragraph Format
Button Description Left Justify
Center
Right Justify
Full Justify
Outdent
Indent
Blockquote
Insert Page Break
118
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Lists
Button Description Bulleted (Unordered) List
Numbered (Ordered) List
Rules
Button Description Insert Simple Horizontal Rule
Insert Formatted Horizontal Rule
Images and Media
Button Description Insert Media
Insert / Edit Image
Links and Anchors
Button Description Insert / Edit Link
Remove Link
Insert / Edit Anchor
Appendices
119
Appendix B: Editor Toolbar Buttons
Tables
Button Description Insert / Modify Table
Table Row Properties
Table Cell Properties
Insert Row Above
Insert Row Below
Remove Column
Split Merged Table Cells
Merge Table Cells
Layers
Button Description Insert New Layer
Move Layer Forward
Move Layer Backward
Toggle Absolute Positioning
120
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Variables and Apps
Button Description Insert Variable
Insert / Edit Attributes
Insert Frontend App
Editing Tools
Button Description Undo
Redo
Cut
Copy
Paste
Paste as Plain Text
Paste from Word
Find
Find and Replace
Spellchecker (not installed)
Appendices
121
Appendix B: Editor Toolbar Buttons
Button
Description Mark as Deletion
Mark as Insertion
Citation
Abbreviation
Acronym
Help
Coding Tools
Button Description Remove Formatting
Cleanup Messy Code
Workspace Preferences
Button Description Toggle Fullscreen Mode
Display Visual Control Characters (On / Off)
Toggle Guidelines / Invisible Elements
Set Typing Direction Left-to-Right
Set Typing Direction Right-to-Left
122
Magento Go Design Guide
Appendix C: Block References
Appendix C:
Block References
Category and CMS Pages
Block Reference Breadcrumbs Position Content is posted to the right of the breadcrumbs—the navigation aid that provides links as a path—that’s showcased below the navigation bar. Content is posted below the left column blocks. Content is posted below the main content area. Content is posted below the Cart Subtotal in the My Cart popup located within the top link. Content is posted below the main navigation bar. Content is posted at the bottom of the page. Content is posted above the footer of the page. Content is posted below the header of the page. Content is posted at the top of the page. Content is posted below the right column blocks. If your plan allows multiple store views and you have created at least two store views, the store language switcher is enabled. It is usually located at the top of the page. Content is posted to the right of the dropdown language switcher.
Left Column
Main Content Area
My Cart Extra Actions
Navigation Bar
Page Bottom
Page Footer
Page Header
Page Top
Right Column
Store Language
Appendices
123
Appendix C: Block References
Product Detail Pages
Block Reference Alert URLs Position Content is placed below the title of the product within the product detail page. If custom variants and options are added, content is placed below the Add to Cart button. Content is placed to the right of breadcrumbs—the navigation aid that provides links as a path—that’s showcased below the navigation bar. If a custom variant and options are added, content is placed next to it. The same location applies to configurable options. Content is placed below the left column blocks. Content is placed below the main content area. Content is placed below the Cart Subtotal in the My Cart popup located within the top link. Content is placed below the main navigation bar. Content is placed at the bottom of the page.
Bottom Block Options Wrapper
Breadcrumbs
Info Column Options Wrapper
Left Column
Main Content Area
My Cart Extra Actions
Navigation Bar
Page Bottom
Page Footer
Content is placed above the footer of the page. Content is placed below the header of the page. Content is placed at the top of the page.
Page Header
Page Top
124
Magento Go Design Guide
Appendix C: Block References
Block Reference PayPal Express Checkout (Payflow Edition) Shortcut Wrapper PayPal Express Checkout Shortcut Wrapper
Position If the PayPal payment method is enabled, content is placed below the PayPal buy button. If the PayPal payment method is enabled, content is placed below the PayPal buy button. Content is placed below the products tag bar.
Product Tags List
Product View Extra Hint
Content is placed below the main top price of the product. Content is placed below the right column blocks. If your plan allows multiple store views and you have created at least two store views, the store language switcher is enabled. It is usually located at the top of the page. Content is posted to the right of the drop-down language switcher. Content is placed above the Add Your Tags field.
Right Column
Store Language
Tags List Before
Appendices
125
Appendix D: Page References
Appendix D:
Page References
To learn more about Page References, see: “Frontend App Types,” on page 40. Page Reference Advanced Search Form Advanced Search Result All Empty Layout Pages All One-Column Layout Pages All Pages (Print Version) All Three-Column Layout Pages All Two-Column Layout Pages (Left Column) All Two-Column Layout Pages (Right Column) CMS Home Page CMS No-Route Page CMS Pages (All) Catalog Product Email to a Friend Catalog Product Review View Catalog Product Reviews List Catalog Seo Popular Search Terms Catalog Seo Sitemap (Category List) Catalog Seo Sitemap (Category Tree) Catalog Sitemap (Common) Catalog Sitemap (Product List) Contact Us Form Customer Account Edit Form Customer Account Login Form Customer Account Logout Success Customer Account Registration Form Customer Forgot Password From Customer My Account (All Pages) Customer My Account Address Customer My Account Address Edit Form Customer My Account Dashboard Customer My Account Gift Card Check Form Customer My Account My Tags List Customer My Account My Wishlist
126
Magento Go Design Guide
Appendix D: Page References
Page Reference Customer My Account Newsletter Subscriptions Customer My Account Order Creditmemo View Customer My Account Order History Customer My Account Order Invoice View Customer My Account Order Shipment View Customer My Account Order View Customer My Account Product Reviews Customer My Account Review Details Customer My Account Store Credit Customer My Account Tag View Customer My Account Wishlist Sharing Form Customer Shared Wishlist View Gift Card Balance Check Form One Page Checkout One Page Checkout Failure One Page Checkout Overview One Page Checkout Success PayPal Express Order Review Form PayPal Express Checkout (Payflow Edition) PayPal Express Checkout Shortcut Popular Search Terms Quick Search Form RSS Feeds List Sales Invoice Print View Sales Order Print View Sales Shipment Print View Shipment Tracking Popup Shopping Cart Tagged Products List Tags List (All Available) Website Maintenance Mode
Appendices
127
128
Appendices
Index
.eot, 96 .gif, 94 .ico, 68 .jpeg, 94 .jpg, 94 .js file, 99 .otf, 97 .phtml template, 31 .png, 94 .ttf, 97 @font-face, 96 Alt text, 66, 110 Anchor Categories, 46 Anchor text, 110 Anchors, 119 API, 110 Apps, 121 aspect ratio, 88 Attribute, 110 Authorization, 110 Average Inventory Cost, 110
B
1 Column, 12 1 Column Layout, 14 2 Columns Left Bar, 15 2 Columns Right Bar, 15 2 Columns with Left Bar, 12 2 Columns with Right Bar, 13 3 Columns, 13, 16 301 Redirect, 114 302 Redirect, 114 4-column, 13 B2B, 111 B2C, 111 Background, 77, 81 color, 80, 83 image, 83 properties, 80 footer, 84 Banner, 31, 110 Block Template, 47 Inline Template, 47 Layout Updates, 46 Rotator, 40, 44 base image, 88 Batch processing, 111 Block, 31 Add, 24 Custom, 27 Delete, 25 Lock, 23 Move, 22 New, 30 Restore Defaults, 25 Static, 27 Block Reference, 33, 47, 123 Category Page, 34 CMS Home Page, 33 Product Detail Page, 124 blocks, 17 Blog, 3
A
Above the fold, 110 accessibility, 66 Active, link, 79 add blocks, 31 address bar, browser, 68 Admin panel, 31, 110 Advanced Search Form, 126 Advanced Search Result, 126 Alert URLs, 124 Align, 78 All Empty Layout Pages, 126 All One-Column Layout Pages, 126 All Pages (Print Version), 126 All Three-Column Layout Pages, 126 All Two-Column Layout Pages (Left Column), 126 All Two-Column Layout Pages (Right Column), 126
Index
129
Index
Body, 74 Settings, 77 Bold, 78, 79 Book icon, 72 Border Properties, 82 borders, 81, 83 footer, 84 Bottom Block Options Wrapper, 124 Bounce rate, 111 Brand, 111 breadcrumb, 47, 111, 123, 124 Brick and mortar, 111 Broken link, 111 browse, 22 browser, 62, 96, 99 Built-In Library, jQuery, 101 CMS Block 32 Hierarchy, 50 Hierarchy Node Link, 40 Home Page, 31, 33, 126 jQuery in, 101 No-Route Page, 126 Page Block References, 123 Page Link, 40, 51 Pages (All), 126 Static Block, 40, 52 code, 31 Coding Tools, 122 Color, 78, 79, 80, 118 background, 80 Picker, 77 border, 82 Column Dimensions, 14 Community Magento, 31 Forum, 2 Compare Products, 18, 21 Contact Us Form, 126 content area, 11, 12 blocks, 17 Delivery Network, 94 node, 50 conversion rate 111 Credit Memo, 112 CSS, 5, 12, 14, 76, 91, 95, 112 Code, 98 Editor, 7, 65, 87, 91 Editor Fonts, 96 CSV, 112 Current Theme, 64 Custom Blocks, 17, 27 code, 31 CSS, 87, 90, 92, 93 domain, 64, 86 plug-ins, 101 Customer Account Edit Form, 126 Account Login Form, 126 Account Logout Success, 126 Account Registration Form, 126 Forgot Password From, 126 My Account (All Pages), 126 Address, 126
C
Canonical URL, 111 Capture, 111 Cardholder, 111 cascading style sheets, 5, 91 Catalog, 54 Category Link, 40, 53 Images, 7, 69, 89 resize, 88 "New Products" List, 40, 54 Product Email to a Friend, 126 Link, 40, 55 Review View, 126 Reviews List, 126 Seo Popular Search Terms, 126 Sitemap (Category List), 126 Sitemap (Category Tree), 126 Sitemap (Common), 126 Sitemap (Product List), 126 Categories, 47, 111 Category, 31 Block References, 123 Link, 53 page, 34, 53 CDN, 94 Change Theme, 85 Character Format, 117 Checkout process, 112 Chrome, 96 client-side, 99 CMS, 112
130
Magento Go Design Guide
Index
Address Edit Form, 126 Dashboard, 126 Gift Card Check Form, 126 My Tags List, 126 My Wishlist, 126 Newsletter Subscriptions, 126 Order Creditmemo View, 126 Order History, 126 Order Invoice View, 126 Order Shipment View, 126 Order View, 126 Product Reviews, 126 Review Details, 126 Store Credit, 126 Tag View, 126 Wishlist Sharing Form, 126 Shared Wishlist View, 126 Customize, 87, 91 CVM, 112 Firefox, 96 Firebug, 98 fixed width, 14 Flash, 35 float, 16, 17 FOB, 113 Font, 78, 79, 95, 96, 117 web safe, 97 footer, 11, 12, 74 background, 84 borders, 84 Settings, 84 Frontend App, 32, 35, 41, 99, 106, 121 Create, 41 developers, 99 Instance, 28, 36, 106 Options, 39, 48, 50, 51, 52 Properties, 37 Types, 28, 40, 126 FTP, 31 Fulfillment, 113
D
Dashboard, 70 Default, 79 Design Settings Editor, 7, 65, 76 Design Tools, 6 directory tree, 95, 96, 97 domain, 64, 86, 112 Double Opt-In, 112 Download style sheet, 92 Dynamic Content, 35, 112
G
Gateway, 113 Gift Card Balance Check Form, 126 grid view, 57 Gross margin, 113 Guides, 3
E
Edit custom.css, 92, 98 Editing Tools, 121 Editor Toolbar, 117 Email Logo, 67 Embedded OpenType, 96 Empty, 13 Enterprise Magento, 31
H
hard-coded, 27 header, 11, 12, 74 logo, 65 Settings, 83 Heading, 74 levels, 81, 82 tags, 82 Headings Settings, 81 Height (px), 90 Help, 2 hexadecimal code, 77 Hierarchy, 50 Home page, 113 hosted scripts, 99, 105 Hover, link, 79 HTML, 1, 12, 17, 31, 113 Head, 68 hue map, 77
F
FAQ, 112 favicon, 68, 113 file conversion, 68 file format, font, 96 file type favicon, 68
Magento Go Design Guide
131
Index
Links, 77, 119 list view, 57 Lists, 119 Load Order, JavaScript, 100 Locale, 113 Log In, 113 login page, 14 logo, 65 email, 67 files, 65 image Image Alt, 66 size, 65 Logos, 61
I
Ignore Design Settings Editor, 87, 92 image, 80 Alt text, 66 Assets, 94 background, 80 folder, 94 Resize, 69 sliders, 35 images, 119 uploading, 95 resize, 88 Info Column Options Wrapper, 124 Inline Template, 43 intensity, 77 Interface Text, 69, 70 Internet Explorer, 96 invoice, 113 invoke JavaScript, 104 Italic, 78, 79
M
Magento, 31 Main Content Area, 47, 123, 124 Maintenance Mode, 69, 71, 73 markdown, 114 marketing campaign, 35 markup, 114 Media, 119 Media Storage, 94 Merchant Account, 114 meta tags, 114 title, 72 Miscellaneous Scripts, 102 MooTools, 7, 99 My Cart Extra Actions, 47, 123, 124 My Customizations, 63, 76
J
Java Script Editor, 7, 99, 100 JavaScript, 5, 99, 113 Actions, 104 Libraries, 99 jQuery, 7, 99, 101 API, 101 Library, 101, 102
K
Keyword, 112 Knowledge Base, 2
N
navigation, 35, 114 bar, 47, 123, 124 New Products List, 36, 54 noConflict(), 101 Node, 50 Non-Anchor Categories, 46
L
landing page, 35, 113 languages, multiple, 70 layered navigation, 12, 21 Layers, 120 Layout Editor, 6, 21 Layout Update, 29, 31, 32, 38 Category, 32 Left Column, 47, 123, 124 libraries, JavaScript, 100 Line height, 78 link juice, 113 Link Properties, 79
O
One Page Checkout, 126 Failure, 126 Overview, 126 Success, 126 Open Type font, 96, 97 Opera, 96
132
Magento Go Design Guide
Index
optimized format, 92 opt-in, 114 Orders, 19, 21 overrides, 93
Q
Quick Search Form, 126
R P
packing slip, 114 page, 31 Bottom, 47, 123, 124 Footer, 123, 124 Footer Before, 47 Footer Bottom, 47 Header, 47, 123, 124 Layout, 12, 61 Layout Updates, 31 Link, 51 title, 81, 82 Top, 47, 123, 124 Paragraph Format, 118 payment gateway, 114 PayPal, 19, 21 Express Checkout (Payflow Edition), 126 Express Checkout (Payflow Edition) Shortcut Wrapper, 125 Express Checkout Shortcut, 126 Express Checkout Shortcut Wrapper, 125 Express Order Review Form, 126 PCI, 114 PHP, 31 pixels, 14, 88 Poll, 18, 21 Popular Search Terms, 126 Popular Tags, 21 popups, 22, 62 Position, 80 Preconfigured Blocks, 17 pre-defined text, 70 Preview, 26, 30, 62, 85 Privacy Policy, 114 product, 31 catalog, 88 Detail Page, block references, 124 Link, 55 Tags List, 125 Types, 46 View Extra Hint, 125 proportion, 88 purchase order, 114 Recently Compared Products, 21, 40, 56 Recently Viewed Products, 18, 21, 40, 57 Redirect, 114 Relative Link, 115 URLs, 95 remove blocks, 31 Repeat, 80 resize images, 69, 88 resolution, logo, 65 Return Policy, 115 Right Column, 47, 123, 125 Robots.txt, 115 Rotation Mode, 49 RSS Feed, 115 Feeds List, 126 Rules, 119
S
SaaS, 115 Safari, 96 Sales Invoice Print View, 126 Order Print View, 126 Shipment Print View, 126 screen resolution, 14 SCRIPT box, 72 search engines, 66 Security Certificate, 115 SEO, 115 server, 99 Settlement, 115 Shipment Tracking Popup, 126 Shipping Carrier, 115 Shopping Cart, 115, 126 Sitemap, 115 Size, 78, 79 SKU, 115 sliders, 35 small image, 88 Snippets, 105 Special Characters, 118 Specified Banners, 48
Magento Go Design Guide
133
Index
splash page, 14, 115 SSL Certificate, 116 Static Block, 27, 30, 52, 99, 116 Static Content, 116 Store Language, 47, 123, 125 structural blocks, 11 Style Sheet, download, 92 Style, border, 82 styles, 76, 117 subscription forms, 35 Support Site, 3
U
UI Text, 69 unset blocks, 31 upload, 93 custom.css file, 93 JavaScript files, 100 Uploading Fonts, 97 Images, 95 URL, 116 Usability, 116
T
Tables, 120 tag clouds, 35 Tagged Products List, 126 Tags List (All Available), 126 Before, 125 Text, 77 Properties, 78 theme, 12, 61, 116 apply, 86 Customization, 65, 75, 99 Editor, 6, 64, 65, 74 Styles, 69, 74 Text Editor, 6, 70 themes, 61 Editor, 61, 87, 92 thumbnail image, 88 Transactional Email, 67, 116 logo, 67 Troubleshooting, 30, 87 True Type font, 96, 97 TypeKit, 7, 99
V
Variables, 121 video chats, 35 tutorials, 2 View Page Source, 107, 108 Visited, link, 79 voting, 35
W
web safe fonts, 97 Webinars, 3 Website Maintenance Mode, 126 Width (px), 90 Width, border, 82 Wishlist, 19, 21 Working Copy, 36 Workspace Preferences, 122 WYSIWYG, 116
X
XML, 31, 116 XML Page Layout Updates, 31
134
Magento Go Design Guide
Ver: 1.2.0
Important Notice
Magento reserves the right to make corrections, modifications, enhancements, improvements, and other changes to its products and services at any time and to discontinue any product or service without notice. Customers should obtain the latest relevant information before placing orders and should verify that such information is current and complete. All products are sold subject to Magento's terms and conditions of sale supplied at the time of order acknowledgment. Magento warrants performance of its products to the specifications applicable at the time of sale in accordance with Magento's standard warranty. Testing and other quality control techniques are used to the extent Magento deems necessary to support this warranty. Except where mandated by government requirements, testing of all parameters of each product is not necessarily performed. Magento assumes no liability for applications assistance or customer product design. Customers are responsible for their products and applications using Magento components. To minimize the risks associated with customer products and applications, customers should provide adequate design and operating safeguards. Magento does not warrant or represent that any license, either express or implied, is granted under any Magento patent right, copyright, mask work right, or other Magento intellectual property rights relating to any combination, machine, or process in which Magento products or services are used. Information published by Magento regarding third-party products or services does not constitute a license from Magento to use such products or services or a warranty or endorsement thereof. Use of such information may require a license from a third party under the patents or other intellectual property of the third party, or a license from Magento under the patents or other intellectual property of Magento. Resale of Magento products or services with statements different from or beyond the parameters stated by Magento for that product or service voids all express and any implied warranties for the associated Magento product or service and is an unfair and deceptive business practice. Magento is not responsible or liable for any such statements. All company and brand products and service names are trademarks or registered trademarks of their respective holders. Magento™ is a trademark of Magento Copyright © 2012 Magento A division of X.commerce, Inc., an eBay Company
Contents
Part I: Getting Started CHAPTER 1:
Designing Your Store ............................................................................................. 1 Where to Find Help ................................................................................................ 2
CHAPTER 2:
A Quick Tour .......................................................................................................... 5 Design Tools .......................................................................................................... 6
Part II: Layout & Content Blocks CHAPTER 3:
Page Structure and Layout .................................................................................. 11 Understanding Page Layout ................................................................................ 12 Column Dimensions ............................................................................................. 14 1 Column Layout ........................................................................................... 14 2 Columns Right Bar ..................................................................................... 15 2 Columns Left Bar ........................................................................................ 15 3 Columns ..................................................................................................... 16 Content Blocks ..................................................................................................... 17 A Few Examples .................................................................................................. 18
CHAPTER 4:
Using the Layout Editor ........................................................................................ 21 Making Changes to Blocks .................................................................................. 22 Adding a Block ............................................................................................... 24 Deleting a Block ............................................................................................. 25 Previewing Changes...................................................................................... 26 Creating a Custom Block ..................................................................................... 27 Making Layout Updates ....................................................................................... 31 Block References ................................................................................................. 33
Magento Go Design Guide
v
Contents
CHAPTER 5:
Adding Dynamic Content ..................................................................................... 35 Adding a “New Products” List .............................................................................. 36 Frontend App Types ............................................................................................ 40 Creating a Frontend App ...................................................................................... 41 Banner Rotator .............................................................................................. 44 Banner Layout Update Options............................................................... 46 Banner Frontend App Options ................................................................ 48 CMS Hierarchy Node Link ............................................................................. 50 CMS Page Link .............................................................................................. 51 CMS Static Block ........................................................................................... 52 Catalog Category Link ................................................................................... 53 Catalog New Products List ............................................................................ 54 Catalog Product Link ..................................................................................... 55 Recently Compared Products ....................................................................... 56 Recently Viewed Products ............................................................................ 57
Part III: Themes, Styles & More CHAPTER 6:
Choosing a Theme ............................................................................................... 61 Previewing a Theme ............................................................................................ 62 Changing the Current Theme .............................................................................. 64 Adding Your Logos .............................................................................................. 65 Adding Alt Text .............................................................................................. 66 Email Logo ..................................................................................................... 67 Favicon .......................................................................................................... 68
CHAPTER 7:
Customizing Your Theme .................................................................................... 69 Changing Interface Text ....................................................................................... 70 Using the Design Settings Editor ......................................................................... 76 Body Settings ................................................................................................ 77 Using the Color Picker ............................................................................ 77 Text Properties ........................................................................................ 78 Link Properties ........................................................................................ 79 Background Properties ........................................................................... 80 Headings Settings ......................................................................................... 81
vi
Magento Go Design Guide
Contents Border Properties .................................................................................... 82 Header Settings ............................................................................................. 83 Footer Settings .............................................................................................. 84 Preview Your Theme ........................................................................................... 85 Apply Your Theme ............................................................................................... 86 Troubleshooting ................................................................................................... 87 Resizing Catalog Images ..................................................................................... 88
CHAPTER 8:
Using the CSS Editor ........................................................................................... 91 Uploading a Custom CSS File ............................................................................. 93 Managing Your Image Assets .............................................................................. 94 Uploading Images.......................................................................................... 95 Managing Your Font Assets ................................................................................. 96 Uploading Fonts ............................................................................................ 97 Examples of CSS Code ....................................................................................... 98
CHAPTER 9:
Working with JavaScript ....................................................................................... 99 Adding Custom Code ......................................................................................... 101 Managing Load Order.................................................................................. 100 Using jQuery ...................................................................................................... 101
Appendices Appendix A: Appendix B: Appendix C: Appendix D:
Glossary ............................................................................................................. 110 Editor Toolbar Buttons ....................................................................................... 117 Block References ............................................................................................... 123 Page References ............................................................................................... 126
Index............................................................................................ 129
Magento Go Design Guide
vii
Part I: Getting Started
CHAPTER 1:
Designing Your Store
“Design is what you do when you don't [yet] know what you are doing.” George Stiny, Professor of Architecture, Massachusetts Institute of Technology
This guide is written for experienced designers and frontend developers, as well as for merchants with an eye for design. Our mission is to explain the rules of the road, show you where things are kept, and how to get things done. One of the biggest challenges for some—even for those who have been designing websites for many years—is the fact that there is no single HTML page that corresponds to any given page in a Magento Go store. That’s because Magento Go is an object-oriented environment, and every page is assembled from separate components. But this is also the same reason why so many designers love Magento. Because once you understand the basics, you can do just about anything imaginable. The best way to learn is to jump in and start noodling around. As happens so often when you don’t quite yet know what you are doing—some of the best ideas find their way to the top. As far as the design of your store is concerned—you’re the expert in that department, and we’ll leave that part up to you. So jump in, feel free to experiment, and see what you can do!
Part I: Getting Started
1
CHAPTER 1: Designing Your Store
Where to Find Help
Where to Find Help
Magento provides a wide range of support resources to help you get up and running in a hurry. Please let us know how we can be of assistance!
Knowledge Base The Magento Go Knowledge Base is continually updated the latest information. You’ll find a link to the Knowledge Base in the top navigation of the Magento Go site, and in the Admin panel of your store. Go there now!
Video Tutorials A picture is worth a thousand words! Check our support site for the latest Magento Go video tutorials. Go there now!
Community Forum Here’s a chance to meet other users, share tips, and ask questions. Be sure to join the Magento Go community, so you can learn, and also share your experience and knowledge with others. Go there now!
2
Magento Go Design Guide
CHAPTER 1: Designing Your Store
Where to Find Help
Support Site Have a question? Please let us know how we can help you succeed. To access our support site, click the Support link in the upper-right corner of the Admin panel. Go there now!
Blog Keep up with the latest product news, trends, and featured stores on the Magento Go blog. Go there now!
Webinars Sign up to attend a free webinar, taught by a Magento expert. Go there now!
Guides Learn everything you need to know about building your store by downloading a complete set of documentation from our website. Go there now!
Part I: Getting Started
3
CHAPTER 1: Designing Your Store
Where to Find Help
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
4
Magento Go Design Guide
CHAPTER 2:
A Quick Tour
The first half of this guide has an emphasis on page layout and working with blocks of content and frontend apps. The second half addresses what might be considered to be more common aspects of web design, including working with cascading style sheets (CSS) and implementing JavaScript interactions. By the time you work your way through this guide, you’ll be ready to put the “how to” aside, and focus your energy on creating attention-seizing and crowd-pleasing designs for online stores.
Content Blocks on the Home Page
Part I: Getting Started
5
CHAPTER 2: A Quick Tour
Design Tools
Design Tools
Your Magento Go store includes a suite of tools for designers—with or without programming experience—and frontend developers.
Theme Editor The Theme Editor lets you customize the styles which are used to format the main sections of the page, without editing the CSS code:
Theme Text Editor The Theme Text Editor lets you change the terminology that is used throughout the interface of your store.
Layout Editor The Layout Editor lets you add pre-configured Magento Go blocks to the left and right columns of most pages in your store. You can also rearrange, lock in place, and remove the blocks from view.
6
Magento Go Design Guide
CHAPTER 2: A Quick Tour
Design Tools
Design Settings Editor The Design Settings Editor provides an easy-to-use interface so you can change the most common CSS styles without entering any code.
CSS Editor The CSS Editor provides access to the CSS style sheets used by the current theme. You can download them to become familiar with the styles, and enter your own updates to override existing styles.
Java Script Editor The Java Script Editor lets you implement custom code, hosted scripts, and libraries such as TypeKit, JQuery, and MooTools.
Catalog Images Catalog Images lets you control the size of the images used throughout the store and catalog.
Part I: Getting Started
7
CHAPTER 2: A Quick Tour
Design Tools
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
8
Magento Go Design Guide
Part II: Layout & Content Blocks
CHAPTER 3:
Page Structure and Layout
Each page of your Magento Go store is divided into distinct sections, or structural blocks, that define the header, footer, and content areas of the page. Depending on the layout applied, the content area may consist of one, two, three columns, or more. You can think of the layout as the “floor plan” of each page.
Structural Blocks
Part II: Layout & Content Blocks
11
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
Understanding Page Layout
Each page of your store has a fixed header and footer, with a content area that is divided into one, two, or three columns. The manner in which page layouts are used throughout your store is determined by the theme. In addition, you can apply different layouts to any content page you create, including your home page.
1 Column The “1 Column” layout can be used to create a dramatic home page or landing page for a single product with a large image or focal point. It’s a good choice for any content page that has a large amount of text, or a combination of text, images, and video. A singlecolumn layout can give the appearance of multiple columns if the text is formatted into columns using HTML and CSS.
2 Columns with Left Bar The “2 Columns with Left Bar” layout is often used for pages with navigation on the left. You will find this layout used for catalog and search results pages that have “layered navigation” It’s also an excellent choice for home pages that need additional navigation or blocks of supporting content on the left.
12
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
2 Columns with Right Bar The “2 Columns with Right Bar” layout is the one that is used for the home page examples in this guide The main content area is large enough for an eye-catching image or banner. This layout is also often used for Product View pages that have blocks of supporting content on the right.
3 Columns The “3 Columns” layout has a center column that is wide enough for a column of text, with room on each side for additional navigation and blocks of supporting content. The Customer Service page in the sample data is based on the “3 Columns” layout. (You can find a link to that page in the footer of your store.)
Empty The “Empty” layout can be used to define your own page layout. For example, you can use the Empty layout to create a 4-column page.
Part II: Layout & Content Blocks
13
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
Column Dimensions
The main column of your Magento Go store has a fixed width of 990 pixels, as defined by the CSS. Although depending on your screen resolution, there might be some empty space on each side of the main column, all of the activity for your store takes place within this enclosed area. When you add up the width of the content columns, and throw in a little extra, the total comes to 990 pixels.
Main Column
1 Column Layout
The content area of a “1 Column” layout spans the full-width of the main column. This layout is often used for pages that require no navigation, such as a login page, splash page, video, or full-page advertisement.
1-Column
14
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
2 Columns Right Bar
The content area of this layout is divided into two columns. The main content column is 740 pixels wide and floats to the far left. The right side bar is 230 pixels wide, and floats to the right. The remaining 20 pixels is the unused space between the two.
2-Columns Right Bar
Column Main Content Column Right Side Bar Unused Space Total
Width 740px 230px 20px 990px
2 Columns Left Bar
This layout is a mirror image of the other two-column layout. This time, the left side bar floats to the left, followed by the main content column.
2-Columns Left Bar
Part II: Layout & Content Blocks
15
CHAPTER 3: Page Structure and Layout
Understanding Page Layout
3 Columns
A 3-column layout has two side columns of 230 pixels each, and a main content area of 490 pixels. The left side bar and main content column are wrapped together, and float as a unit to the left. The right side bar is 230 pixels wide, and floats to the right.
3-Columns
Column Left Side Bar Main Content Column Right Side Bar Unused Space Total
Width 230px 490px 230px 40px 990px
16
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
Content Blocks
Content Blocks
Content is organized into blocks that float along to fill the available space, according to the section of the page layout to which they are assigned. If you change the page from a two-column to three-column layout, the blocks in each section flow along and adjust to the space. This fluid approach, or liquid layout, makes it possible to change the layout without interfering with the content. Content blocks are assigned to a specific section of the page layout. Therefore, if you change the layout from a three-column to a two-column layout, the blocks that are associated with the unused side bar will disappear from the page. And if you restore the three-column layout, they reappear. From this perspective, it doesn’t matter what kind of content is in each block. They’re just blocks of content that float along. If you are used to working with individual HTML pages, you will discover that this modular, “building block” approach requires a very different way of thinking.
Preconfigured Blocks
Magento Go includes a set of standard, preconfigured blocks that you can use to add a variety of features and functionality to your store. Some blocks are required components of your store, while others can be enabled or disabled according to your preference.
Custom Blocks
Magento Go’s design and layout tools make it possible to manipulate blocks and even create new ones without writing any code. Custom blocks can be created for any purpose imaginable, and be assigned to any part of the page layout.
Part II: Layout & Content Blocks
17
CHAPTER 3: Page Structure and Layout
A Few Examples
A Few Examples
Here are a few preconfigured blocks that are standard features of your Magento Go store:
Poll The Poll block displays polls or surveys that you have set up.
Compare Products The Compare Products block lets your customers quickly compare items sideby-side.
Recently Viewed Products The Recently Viewed Products block keeps track of products which customers have recently viewed, so they can quickly and easily find them again.
18
Magento Go Design Guide
CHAPTER 3: Page Structure and Layout
A Few Examples
Wishlist Displays the wishlist of a logged in customer.
Orders Allows customers who are logged in to view the Order Summary page.
PayPal Displays the PayPal logo, to announce that your store accepts payments by PayPal.
Part II: Layout & Content Blocks
19
CHAPTER 3: Page Structure and Layout
A Few Examples
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
20
Magento Go Design Guide
CHAPTER 4:
Using the Layout Editor
The Layout Editor lets you add pre-configured Magento Go blocks to the left and right columns of most pages in your store. You can also rearrange, lock in place, and remove the blocks from view. The Layout Editor cannot be used on singlecolumn pages, and is disabled for the Customer Account Dashboard. To make changes to the Customer Dashboard, see: “Creating a Frontend App,” on page 41. The selection of blocks varies by page, but includes the following: Layered Navigation Popular Tags Poll Compare Products Recently Compared Products Recently Viewed Products PayPal Wishlist Orders
Launching the Layout Editor
Part II: Layout & Content Blocks
21
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Making Changes to Blocks
To launch the Layout Editor:
Before launching the Layout Editor, make sure that your browser is set to allow popups.
1. From the Admin panel, select Design > Layout Editor. 2. Click the Launch button.
The Layout Editor opens your store in a new window, with each block which can be edited outlined in red.
Moving a Block
The order of blocks in a column can be changed by dragging a block from one location to another. However, you cannot drag a block to another column.
Moving a Block
22
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
To move a block 1. From the Layout Editor, navigate to the page where you want to move the block.
When the Highlight Draggable Blocks checkbox is selected, each block is outlined in red.
2. To rearrange the blocks in the column, simply drag a block from one place to
another.
3. To save the changes, click the Apply Changes button. 4. When prompted to refresh the search index, select Catalog > Search Index, and
click the Refresh Index button.
Locking a Block
If you don’t want a block to be moved or deleted, you can lock it in place.
To lock a block:
From the Layout Editor, click the padlock symbol in the lower-right corner of the block. The block area turns gray.
Locked Block
Part II: Layout & Content Blocks
23
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Adding a Block
You can add a block to the sidebar of most pages that have a two- or threecolumn layout. The selection of blocks differs on each page, so you should visit each page in the store, to see which blocks are available.
Layout Editor - Add Block
To add a new block: 1. From the Layout Editor, navigate to the page where you want to place the block,
and click the Add Block button.
2. In the Add Block list, select the block you want to add, and click the Add button.
Then, click the X in the upper-right corner to close the Add Block list. An outline of the block appears on the page.
Add Block
3. To save the changes, click the Apply Changes button. 4. When prompted to refresh the search index, select Catalog > Search Index, and
click the Refresh Index button.
24
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Deleting a Block
You can remove a block from a page without permanently deleting it.
To remove a block from the page: 1. From the Layout Editor, click the orange “X” in the upper-right corner of the
block.
2. When prompted to confirm, click OK. 3. Click the Apply Changes button to save the changes.
Restoring Defaults
You can easily restore the default selection of standard Magento Go blocks. The change applies throughout the store.
To restore the default blocks: 1. From the Layout Editor, click the Restore Defaults button. 2. When prompted to confirm, click OK. 3. After the defaults are restored, click the Apply Changes button to save your
changes.
Part II: Layout & Content Blocks
25
CHAPTER 4: Using the Layout Editor
Making Changes to Blocks
Previewing Changes
After you apply layout changes, you should be able to preview them immediately by refreshing the browser.
To preview changes: 1. Close all preview windows. 2. From the Admin panel, select Design > Theme Editor. 3. Click the Preview button to open a new preview for your theme. 4. If necessary, press F5 to refresh your browser window to see the changes.
To discard your layout changes:
From the Layout Editor, click the Cancel button. Changes made to the layout not be applied to your store.
26
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Creating a Custom Block
With Magento Go, you can create blocks of content and place them anywhere in your store. Because the contents of these static blocks are defined in the CMS (content management system), rather than hard-coded into the theme, you can easily change the blocks, even after your store is live, without editing the theme. It’s really quite simple, and yet powerful. You can create and place a custom block in three easy steps: Step 1: Create a Block Step 2: Place the Block Step 3: Preview the Block
Step 1:
Create the Block
1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New Block button. Then, complete the following fields:
Block Title: Identifier: Assign a title to the block of content. Assign a unique identifier to the block. Use all lowercase characters, with underscores instead of spaces. The identifier is used for internal reference. Store View: Status: Content: Select the store views in where this content block will be visible. Set to “Enabled” to make the block visible in the store. Complete the content for the block. You can use the Editor to format text, create links and tables, add images, and link to embedded video and audio files.
3. Click the Save Block button to save your changes.
Part II: Layout & Content Blocks
27
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Step 2:
Place the Block
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, set the Type list to “CMS Static Block.” Then, click the
Continue button.
Frontend App Type
4. In the Frontend Properties section, complete the following fields:
Frontend App Instance Title: Enter a descriptive title for your frontend app. This title is not shown in your storefront—it is visible only in the administrative back office of your store. Sort Order: (Optional) Enter a numeric priority value for your frontend app. This is used to sort frontend apps in the same block. The lower the sort order number, the higher its priority. The highest priority sort order is 0. Assign to Store Views: Select the store views in which you want your new frontend app to be visible. You can select a specific store view, or select All Store Views if you want the app to be visible in all storefronts.
28
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
5. In the Layout Updates section, click the Add Layout Update button. Then, do
the following: a. In the Display On field, select “All Pages.” b. Set Block Reference to “Left Column.”
Layout Updates
6. In the panel on the left, select Frontend App Options. Then, do the following:
a. Click the Select Block button. b. In the list, click to select the block you want to place.
Select Block
7. Click the Save button to save your changes.
Part II: Layout & Content Blocks
29
CHAPTER 4: Using the Layout Editor
Creating a Custom Block
Step 3:
Preview the Block
To preview your work, do one of the following: From the Admin panel, select Design > Theme Editor. Then, click the Preview button for your theme. Return to the Preview window and refresh your browser.
The new static block appears at the bottom of the left column. If there are no other blocks in the column, it appears at the top.
New Block in Left Column
Troubleshooting
After you make and apply several layout changes, if you don’t see your changes right away, do the following:
1. Close all Preview windows. 2. Then, from Admin panel > Design > Theme Editor, click the Preview button
for your theme.
30
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Making Layout Updates
Making Layout Updates
Magento Go is a hosted solution, which means that you don’t have to worry about servers or file management. It also means that you don’t have FTP access to files on the server. Don’t worry, however, because you can still insert custom code. The code that controls the page layout and placement of content blocks is written in XML. You might notice references to XML Page Layout Updates throughout the Admin panel of your store. Every product, category, and piece of content — whether it’s a page, block, banner, or app, has a section where you can update the XML that relates to the item.
Making Page Layout Updates in XML to CMS Home Page
If you have a basic knowledge of XML, and have experience with the Community or Enterprise editions of Magento, you may be comfortable entering code directly into the Layout Update XML box. For example, the following code causes the layered navigation block to appear in the left column of a page.
Example
<reference name="left"> <block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/> </reference>
You can learn a little about how blocks are referenced by examining the layout update code for your home page. Depending on your theme, it might contain instructions to remove blocks, unset blocks, and add blocks. It also might contain references to .phtml template pages, which are a combination of HTML and PHP.
Part II: Layout & Content Blocks
31
CHAPTER 4: Using the Layout Editor
Making Layout Updates
Making a Layout Update to a Specific Product
Even if you are not a programmer, you can still make the same types of changes— and with a lot less work — by using a combination of CMS Blocks and Frontend Apps. It’s simply a matter of creating the content, and then selecting the page and location on the page, where you want it to appear. Once you understand the basics of page layout, the sky’s the limit!
Making a Layout Update to a Specific Category
32
Magento Go Design Guide
CHAPTER 4: Using the Layout Editor
Block References
Block References
CMS Home Page Block References
Part II: Layout & Content Blocks
33
CHAPTER 4: Using the Layout Editor
Block References
Category Page Block References
34
Magento Go Design Guide
CHAPTER 5:
Adding Dynamic Content
Magento Go allows merchants without advanced technical knowledge to easily add dynamic content, including product data, to pages in their stores. This gives you the control and flexibility you need to create compelling content right from the Admin panel. The term, frontend app refers to a block of content with a predefined set of behaviors. Here are a few examples of the types of content you can create: Landing pages for a marketing campaign Dynamically updated information such as recently viewed items Promotional images that you can position in blocks and side columns Interactive elements and action blocks, such as external review systems, video chats, voting, and subscription forms Alternative navigation elements, such as tag clouds and catalog image sliders Interactive and dynamic Flash elements that can be easily configured and embedded with content
CMS > Frontend Apps
Part II: Layout & Content Blocks
35
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
Adding a “New Products” List
One of the most popular frontend apps for an online store is a list of new products. To add a “New Products” list to the home page of your store, follow these steps: Step 1: Step 2: Step 3: Step 4: Add a New Instance of the Frontend App Place the List on Your Home Page Configure the List Preview Your “New Products” List
Step 1:
Create a Working Copy
To create a working copy, simply save a copy of an existing app. Your working copy is a new “instance” of the app, and the changes you make will not affect the original.
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select Catalog New Products List. Then, click the
Continue button.
Frontend App Type
36
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
4. In the Frontend Properties section, complete the following fields:
Frontend App Instance Title: Enter a descriptive title for your app. This title is not shown in your storefront—it is visible only in the administrative back office of your store. Sort Order: (Optional) Enter a numeric priority value for your app. This is used to sort frontend apps in the same block. The lower the sort order number, the higher its priority. The highest priority sort order is zero. Assign to Store Views: Select the store views in which you want your new app to be visible. You can select a specific store view, or select All Store Views if you want the app to be visible in all storefronts.
Frontend Properties
Part II: Layout & Content Blocks
37
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
Step 2:
Select the Location for the List
1. In the Layout Updates section, click the Add Layout Update button. 2. In the Layout Updates section, do the following:
a. Set Display On to “Specified Page.” b. Set Page to “CMS Home Page.” c. Set Block Reference to “Main Content Area.” d. Set Template to one of the following: New Product Lists Templates New Products Grid Template
Layout Updates
3. Click the Save and Continue Edit button to save your changes and continue
editing.
Step 3:
Configure the List
1. In the panel on the left, select Frontend App Options. Then, do the following: 2. Set Display Products to one of the following:
All products: New products: The most recently added products. Products that you define as “New”
Note: A product is determined to be New if the current date falls between the product’s “Set Product As New From” date and “Set Product As New To” date.
3. Complete the rest of the fields as follows:
a. In the Number of Products to Display field, enter the number of new products you want to include in the list. The default setting is 10.
38
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Adding a “New Products” List
b. Set Display page control to one of the following: Yes No c. Displays a new product list with navigation for multiple pages. Displays a single list of new products without navigation.
(Optional) In the Cache Lifetime (Seconds) field, select how often you want to refresh the list of new products. By default, the cache is set to 86400 seconds, or 24 hours.
Frontend App Options
4. Click the Save button to save your settings.
Step 4:
Preview Your “New Products” List
1. From the Admin panel, select CMS > Pages > Manage Content. 2. Find your published Home page in the list. Then, in the Action column, click the
Preview link. A new window opens with your home page and “New Products” list.
Part II: Layout & Content Blocks
39
CHAPTER 5: Adding Dynamic Content
Frontend App Types
Frontend App Types
Type Banner Rotator Description Displays a banner or block of content that can be defined to rotate in sequence or at random. Displays a link to a selected hierarchy node. Allows you to specify custom text and a link to the node. Displays a link to a selected page. Allows you to specify custom text and title. Displays the content of a specified static block of content. Displays a link to a selected catalog category. Allows you to specify custom text and a title. Two templates are available: inline and block. Displays a block on the home page that contains all new products. A product is designated as new based on a range of dates specified in the product record. Displays a link to a selected catalog product. Allows you to specify custom text and a title. Two templates are available: inline and block. Displays a block that contains recently compared products. Allows you to specify the number of products to be displayed. Two templates are available: product list and product grid view. Displays a block that contains recently viewed products. Allows you to specify the number of products to be displayed. Two templates are available: product list and product grid view.
CMS Hierarchy Node Link
CMS Page Link
CMS Static Block
Catalog Category Link
Catalog New Products List
Catalog Product Link
Recently Compared Products
Recently Viewed Products
40
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Creating a Frontend App
The process of creating a Frontend App is nearly the same for each type. You can follow the first part of the instructions, which is the same for all types, and then complete the last part for the specific type of app that you want to create.
Step 1:
Choose the App Type
To create a frontend app: 1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select the Type of app you want to create. Then, click the
Continue button.
Select Type
4. In the Frontend Properties section, do the following:
a. In the Frontend App Instance Title, enter a descriptive title for your app. This title is for internal use only, and won’t be visible to your customers. b. Enter a number in the Sort Order field to determine the order of the block when listed with others in the column. The top position is zero. c. Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down, and select each option.
Part II: Layout & Content Blocks
41
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Frontend Properties
Step 2:
Choose Where It Goes
1. In the Layout Updates section, click the Add Layout Update button.
Add Layout Update
2. Set the Display On field to the type of category or product page where you want
this banner to appear. For Anchor and Non-Anchor settings, you can assign the banner to specific categories. For All Product Types, you can assign the banner to specific product pages.
3. In the Block Reference list, select the block or section of your page layout where
you want this banner to appear.
42
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Step 3:
Choose the Template
1. Set Template to one of the following:
Block Template: Inline Template: Displays the banner as a block section on its own. Displays the app as an inline element in the Block Reference section specified.
2. Click Save and Continue Edit to save your changes and continue editing.
Step 4:
Follow the Instructions for Your App
Banner Rotator CMS Hierarchy Node Link CMS Page Link CMS Static Block Catalog Category Link Catalog New Products List Catalog Product Link Recently Compared Products Recently Viewed Products
Step 5:
Save Your Work and Check It Out!
1. Click the Save button to save your settings. 2. Go to the frontend of your store and see if it’s working as expected.
Part II: Layout & Content Blocks
43
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Rotator
The Banner Rotator app type lets you display a series of rotating banners in your store. Banners can be set to display in a specific sequence or random order. To learn more about banners, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. Set Banners to Display to “Specified Banners.” 3. (Optional) To limit the banner to a certain section of the store, set Restrict by
Banner Types to the section where you want it to appear.
4. In the Rotation Mode list, select one of the following:
Do not rotate, display all at once One at a time, Random One at a time, Series One at a time, Shuffle
44
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Step 3:
Select the Banners:
1. To select the banners to include, do the following:
a. In the Specify Banners section, click the Reset Filter button to list all the available banners. You can also use the search filters to find the banners you want to include. b. Select the checkbox of each banner you want to include in the rotator. c. To set the sequence of each banner in relation to the others, enter a number in the Position column. The number 1 places the banner in the first position.
Specify Banners
2. Click the Save button to save your settings.
Part II: Layout & Content Blocks
45
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Layout Update Options
Layout Updates with Catalog
Option Display On
Description Categories Anchor Categories Appears only on anchored category pages, which are category pages that are shown in the layered navigation. Non-Anchor Categories Appears only on non-anchored category pages, which are category pages that are not shown in the layered navigation. Products All Product Types Simple Product Grouped Product Configurable Product Bundle Product Virtual Product Gift Card
46
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Option Categories
Description To limit the banner to certain categories, select each category where the banner will be available. Options include: Breadcrumbs Left Column Main Content Area My Cart Extra Actions Navigation Bar Page Bottom Page Footer Before Page Footer Bottom Page Header Page Top Right Column Store Language
Block Reference
Template
Options include: Banner Block Template Banner Inline Template
Part II: Layout & Content Blocks
47
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Banner Frontend App Options
Frontend App Options
Option Banners to Display
Description Options include: Specified Banners Shopping Cart Promotions Related This option automatically selects all shopping cart promotion related banners. Catalog Promotions Related This option automatically selects all catalog promotion related banners.
Restrict by Banner Types
Limits the banner to a certain section. Options include: Content Area Footer Header Left Column Right Column
48
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Option Rotation Mode
Description Options include: Do not rotate, display all at once One at the time, Random Displays the banners that you specify in a randomly generated order. Every time the page is refreshed, a different (and random) banner appears. One at the time, Series Displays the banners that you specify by the order of their position every time the page is refreshed. One at the time, Shuffle Displays one banner at a time in a shuffled position order. This option is similar to the One at a time, Random option, except that the same banner does not repeat back-to-back (unless you have only one banner).
Specify Banners
Select the banners to include from the list of available banners.
Part II: Layout & Content Blocks
49
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Hierarchy Node Link
The CMS Hierarchy Node Link app type gives you the ability to place a link to a content node. You can also enter the text to appear when someone hovers over the link. To learn more, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: a. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Node or Page name is used. b. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Page or Node button. Then, select the page or node that will be
linked.
3. Click the Save button to save your settings.
50
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Page Link
The CMS Page Link app type gives you the ability to place a link on a content page. You can also enter text to appear when someone hovers over the link. To learn more about working with CMS content pages, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: c. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Node or Page name is used. d. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Page or Node button. Then, select the page that will be linked.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
51
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CMS Static Block
The CMS Static Block app type gives you the ability to place a block of content nearly anywhere in your store.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. In the Frontend App Instance panel on the left, select Frontend App Options.
Then, do the following: a. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Page name is used. b. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
Frontend App Options
2. Click the Select Block button. Then, select block that you want to include. 3. Click the Save button to save your settings.
52
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog Category Link
The Catalog Category Link app type gives you the ability to link to any category page in the catalog. You can also enter text to appear when someone hovers over the link. The two templates available are: inline and block.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options.
Anchor Custom Text:
Enter a descriptive link name for the new app. If this field is left blank, the Category name is used. Enter a title. This title, or caption, is displayed when the user hovers over the link.
Anchor Custom Title:
2. Click the Select Category button. This button opens an in-page box that allows
you to navigate to select your category.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
53
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog “New Products” List
The Catalog “New Products” list app type gives you the ability to display a list of all products which are identified as new. Products are included based on a date range that can be defined in the each product record. For more information, see the Magento Go User Guide.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. For the Display Products option, select one of the following:
All products: New products: The most recently added products Products that you define as “New”
3. In the Number of Products to Display field, select how many new products you
want your customers to see. The default is 10.
4. In the Display page control field, select “Yes” or “No,” depending on whether
you want to display multiple pages of new products that the customer can click through. If you select “Yes,” a new field appears for Number of Products per Page. Here you define how many products you want displayed on each page.
5. In the Cache Lifetime (Seconds) field, select how often you want Magento Go to
refresh the list of new products. By default, the cache is set to 86400 seconds, or 24 hours.
6. Click the Save button to save your settings.
54
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Catalog Product Link
The Catalog Product Link app type gives you the ability to place a link to any product in the catalog. You can also enter the text that appears when someone hovers over the link. The two templates available are: inline and block.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options.
Frontend App Options
2. Complete the following information:
Anchor Custom Text: Enter a descriptive link name for the new app. If this field is left blank, the Product name is used. Anchor Custom Title: Enter a title. This title, or caption, is displayed when the user hovers over the link.
3. Click the Select Product button. This button opens an in-page box that allows
you to navigate to select your product.
4. Click the Save button to save your settings.
Part II: Layout & Content Blocks
55
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Recently Compared Products
The Recently Compared Products app type gives you the ability to display a block of recently compared products. You can specify the number of products displayed in the block, and choose the list template. The two templates available are: product list and product grid view.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. In the Number of Products to Display field, select the number of recently
compared products to display to your customers.
3. Click the Save button to save your settings.
56
Magento Go Design Guide
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Recently Viewed Products
The Recently Viewed Products app type gives you the ability to display a list of recently viewed products. You can specify the number of products displayed in the block, and choose the template that is used to format the list. The two templates available are: product list and product grid view.
Step 1:
Complete Steps 1 – 3
Choose the type of app. Specify the page and location on the page, where it belongs. Choose the template.
Step 2:
Set the Options
1. Click Frontend App Options in the left panel to configure the app options. 2. In the Number of Products to Display field, select the number of recently
compared products to display to your customers.
3. Click the Save button to save your settings.
Part II: Layout & Content Blocks
57
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
Notes:
_______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________
58
Magento Go Design Guide
Part III: Themes, Styles & More
CHAPTER 5: Adding Dynamic Content
Creating a Frontend App
CHAPTER 6:
Choosing a Theme
Magento Go includes a growing library of professionally-designed themes which you can use “off the shelf,” or customize to suit your needs. In this chapter, you will learn the basics of page layout, how to preview and apply a theme, and brand your store and email messages with your logo. Understanding Page Layout Choosing a Theme Adding Logos
Design > Themes Editor
Part III: Themes, Styles & More
61
CHAPTER 6: Choosing a Theme
Previewing a Theme
Previewing a Theme
You can preview any theme using the actual content from your store, without interrupting the operation of your site. While in Preview mode, you can explore each menu and option. Make sure to examine every page to see how items are arranged within the space. Note: To preview a theme, your browser must be set to allow popups.
To preview a theme: 1. From the Admin panel, select Design > Themes Editor. 2. Click the Preview link below the thumbnail image of any theme. A preview
window opens to show how the theme looks when applied to your store.
Previewing the “Texture” Theme
62
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Previewing a Theme
3. To try a different theme, select its name from the Change Theme list in the
upper-left corner of the page, and click the Change Theme button.
4. To close the preview window, click the Quit Preview button at the top of the
page.
5. When you find a theme you want to try, make a copy that you can edit.
a. Click the Duplicate link below the thumbnail image of the theme you want to copy. b. Enter a new Theme Name and Description if you like, and click the Save button. A new copy of the theme you have chosen, called by the name you have assigned, appears in the left column under My Customizations. This is now your working copy of the theme.
Part III: Themes, Styles & More
63
CHAPTER 6: Choosing a Theme
Previewing a Theme
Changing the Current Theme
To apply the new theme to your store: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section.
2. Under the thumbnail image of your theme, click Apply.
Your new theme now appears at the top of the list under Current Theme.
3. To see the new theme in your store, open a new tab or browser window and type
your store URL in the address bar. If you have a standard domain such as mystore, type: http://mystore.gostorego.com If you have a custom domain such as mystore.com, type: http://www.mystore.com If the new theme doesn’t immediately appear, press the Refresh (F5) button.
Applying a Theme
64
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Adding Your Logos
Adding Your Logos
Your Magento Go store uses three different logo files. The first appears in the header of your store, the second on email messages sent from your store, and the third is the favicon in the address bar of your browser. To achieve the best resolution, it’s best to upload your logo images at their actual display size, rather than resize them in the code. If you want to use the exact size of the sample logo in a theme, you can right-click the logo to find the exact width and height of the image. The information is listed under Properties. You can also use the CSS Editor to modify the dimensions and relative position of the logo, if necessary.
Header Logo
Your store logo appears in the upper-left header of your store with a clickable link back to your home page. The general size and position of the store logo file is determined by the theme.
To upload the Header logo: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section.
2. Under the thumbnail image of your theme, click Customize. 3. In the Theme Customization panel on the left, click Design Settings Editor.
Theme Customization: Design Settings Editor - Header Settings
Part III: Themes, Styles & More
65
CHAPTER 6: Choosing a Theme
Adding Your Logos
Adding Alt Text
The Alt text that is associated with an image appears whenever a visitor to your site hovers over the image with their mouse. The text is indexed by search engines, and also improves the accessibility of your site for people who use screen readers. It’s a best practice to include Alt text for each image on your site.
Logo Image Alt Text
To add Alt text to your logo: 1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under General, select Design. 3. Click to expand the Header section. 4. Type the Logo Image Alt text that you want to appear whenever someone hovers
over your logo.
System > Configuration > General > Design > Header
5. Click the Save Config button.
66
Magento Go Design Guide
CHAPTER 6: Choosing a Theme
Adding Your Logos
Email Logo
This logo appears at the top of automated email messages sent to customers. These messages are referred to as “transactional emails” and are based on templates. To learn more, see the Magento Go User Guide.
To upload your Email logo: 1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under Design, select Transactional
Emails.
System > Configuration > Design > Transactional Emails
3. Click the Browse button and select the Logo Image from your computer. 4. In the Logo Image Alt field, type the Alt text you want to use for the image. 5. When complete, click the Save Config button.
Logo Image on Transactional Email
Part III: Themes, Styles & More
67
CHAPTER 6: Choosing a Theme
Adding Your Logos
Favicon
The favicon (short for favorite icon) is the little icon in your browser address bar before the URL. The favicon also appears on the tab of each browser page. By default, the Magento logo is the favicon that appears in your Magento Go store.
Default Magento Favicon
Favicons are generally 16x16 pixels or 32x32 pixels in size. Although Magento accepts .ico, .png, .jpg, .jpeg, .apng and .svg file types, not all browsers support these formats. The safest format to use for a favicon file is an .ico. Many free favicon converter tools are available online to convert other, more common image types, like .png, .gif, and .jpg to the .ico format. Because Magento Go does not convert an image from one format to another, any file conversion should take place before the file is uploaded to your store.
Step 1:
Create a Favicon
1. Create a 16x16 or 32x32 graphic image of our logo, using in the image editor of
your choice.
2. Use one of the available online tools to convert the image to the .ico format.
Name the file “favicon.ico” and save it to your computer.
Step 2:
Upload the Favicon to Your Store
1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, under General, select Design. Then, click
to expand the HTML Head section.
3. At the Favicon Icon field, click the Browse button to find your favicon file. 4. Click the Save Config button to save your changes.
68
Magento Go Design Guide
CHAPTER 7:
Customizing Your Theme
After you have selected a starting theme, you can customize the theme to suit your brand and business needs. In this chapter, you’ll learn how to take advantage of Magento Go’s design editors to completely change the look and feel of your store. Changing Interface Text Using Maintenance Mode Changing Theme Styles Resizing Catalog Images
Theme Editor
Part III: Themes, Styles & More
69
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Changing Interface Text
The Theme Text Editor lets you change the terminology that is used throughout the interface of your store. For example, Magento Go uses the terminology “My Account,” “My Wishlist,” “My Dashboard,” and so on, to help customers find their way around. To simplify matters, you might prefer to use the word “Account.” And for consistency, you might change the title of the customer account Dashboard, so that it no longer says, “My Dashboard,” but simply, “Dashboard.” Then, you might change the text in the following paragraph, so that it says, “From your Account Dashboard, you have the ability to….” Or, you might change the message entirely. If your store is available in multiple languages, you can use the Theme Text Editor to make fine adjustments to the translated text of the locale. For learn more about translating your store, see the Magento Go User Guide. The Theme Text Editor outlines all of the pre-defined text that is on a page, so you can see which parts can be changed. You can also easily change text in the header and other interface elements, without editing the code.
Theme Text Editor
70
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Step 1:
Turn On Maintenance Mode
Because your store is unavailable to customers while in Maintenance Mode, it is best to perform routine maintenance on your store after normal business hours.
1. From the Admin panel, select System > Maintenance Mode. 2. In the Configuration panel on the left, under General, select Maintenance Mode. 3. In the Maintenance Mode Options section, set Enable Maintenance Mode
to “Yes.”
System > Configuration > General > Maintenance Mode > Maintenance Mode Options
4. Set Maintenance Mode Page to “503 Service Unavailable.”
You can customize the default “503 Service Unavailable” page to make it more friendly. For more information, see the Magento Go User Guide.
5. In the Whitelist field, enter your IP address, so you will be permitted access to
your store while others are redirected to the “Services Unavailable” page.
6. Click the Save Config button to save your settings, and put your store into
Maintenance Mode.
Part III: Themes, Styles & More
71
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Step 2:
Edit the Store Text
Note: Before launching the Theme Text Editor, make sure that your browser is set to allow popups.
1. From the Admin panel, select Design > Theme Text Editor. 2. Click the Launch button.
The Theme Text Editor displays a new Preview window with a toolbar at the top. All text that can be edited is outlined in red.
3. To change the meta title that appears in the address bar of the browser, do the
following: a. Hover over the yellow TITLE box, and click the Book icon.
b. Type your changes into the text box, and click the green checkmark to close the text box and temporarily save your changes.
4. To change the text that appears in the Quick Search box, do the following:
a. Hover over the yellow SCRIPT box, and click the Book icon. b. Type your changes into the text box, and click the green checkmark to close the text box and temporarily save your changes.
72
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
5. To edit text on the page, do the following:
a. Hover over the text that you want to edit, and click the Book icon.
b. Type your changes into the text box. Then, click the green checkmark to close the text box. Your changes are temporarily saved, and appear immediately.
6. When finished with all the edits for this page, click the Save button. 7. As you navigate throughout your store, remember to save the changes made to
each page before continuing to the next page.
8. When complete, click the Quit Inline Text Editor button at the top of the page.
Step 3:
Turn Off Maintenance Mode
When you are finished working in the Theme Text Editor, don’t forget to bring your store back online!
1. From the Admin panel, select System > Maintenance Mode. 2. In the Configuration panel on the left, under General, select Maintenance Mode. 3. In the Maintenance Mode Options section, set Enable Maintenance Mode
to “No.”
4. Click the Save Config button to save your changes, and bring your store online.
Part III: Themes, Styles & More
73
CHAPTER 7: Customizing Your Theme
Changing Interface Text
Changing Theme Styles
The Theme Editor lets you customize the styles which are used to format the following sections of the page, without editing the CSS code: Body: Heading: Header: Footer: Text, links, and background Heading levels and page title Logo image, and header border and background Footer border and background
Experiment with each of them to see the effects in your theme.
Theme Editor
74
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Changing Interface Text
To make changes to theme styles: 1. From the Admin panel, select Design > Themes Editor. 2. In the Theme Editor, select the theme you want to use as a starting point, and
click the Customize button below the thumbnail.
3. In the Theme Information section, complete the following:
Theme Name Theme Description
4. Click the Save button.
Additional options appear in the Theme Customization panel on the left.
Theme Customization
Part III: Themes, Styles & More
75
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Using the Design Settings Editor
The Design Settings Editor lets you make changes to the CSS styles without writing any code. Each section represents a specific part of the page, and includes a selection of options that correspond to CSS properties and values.
To access the Design Settings Editor: 1. In the Theme Customization panel on the left, select Design Settings Editor.
Design Settings Editor
2. Click to expand the section with the settings you want to change. 3. Select the property values that you want to apply. 4. Click the Save and Continue Edit button. You must save your customized theme
before you can preview it. Your theme is now listed in the My Customizations section of the Theme Editor. Tip: As you customize your theme, be sure to save your work periodically. When you get your theme to a good point, if you duplicate your customized theme, you are essentially making a backup copy that you can revert back to if you change your mind.
76
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Body Settings
In the Body Settings section, you can modify your store’s global settings for the following: Text: Links: Font, size, alignment, color, and line spacing Font, size, and color for all link states: Default, Hover, Active, and Visited Background: Image, color, repeat pattern, and position
Body Settings – Text
Using the Color Picker
The Color Picker lets you select the text color as a hexadecimal value. The value always begins with the # symbol, followed by the hexadecimal value for the color.
To pick a color: 1. Click anywhere on the hue map to select a color. 2. On the right, move the slider to adjust the intensity.
The color picker generates the hexadecimal code for the selected color.
Part III: Themes, Styles & More
77
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Text Properties
CSS Example
body { background:#000; font:12px Arial, Helvetica, sans-serif; color:#999; text-align:left; }
Property Font Values: Size Not assigned Arial, Helvetica, sans-serif Verdana, Geneva, sans-serif Tahoma, Geneva, sans-serif Georgia, serif
Values: 6px 8px 10px 12px 14px 16px
Italic Bold Align Values: Color Line height Values: Not assigned 0.8 0.9 1.0 1.1 1.2 1.3 Not assigned left center right
78
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Link Properties
You can assign different styles to links to indicate the current state. Each tab represents a different state, but the properties are the same. Default Hover, Active, or Visited
Body Settings – Links
CSS Example
a { color:#087698; } a:hover { color:#AB24D4; }
Property Font Values: Size Not assigned Arial, Helvetica, sans-serif Verdana, Geneva, sans-serif Tahoma, Geneva, sans-serif Georgia, serif
Values: 6px 8px 10px 12px 14px 16px
Italic Bold Color
Part III: Themes, Styles & More
79
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Background Properties
The Background section lets you select a background image, and select a background color. You can control whether the image is repeated, and set its starting position.
Body Settings – Background
CSS Example
body { background:#000; font:12px/1.35 Arial, Helvetica, sansserif; color:#999; text-align:center; }
Property Image Color Repeat Values: Position Not assigned no-repeat repeat repeat-x repeat-y inherit
Values: left top left center left bottom right top right center right Bottom center top center center center bottom custom
80
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Headings Settings
In the Headings Settings section, you can modify the heading levels, page title, background, and borders. The tabs represent heading levels <h1> through <h6>, and the page title. The selection of settings is the same on each tab.
CSS Example
h1 { font-size:18px; font-weight:normal; color:#000; }
Headings Settings
Part III: Themes, Styles & More
81
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Text Properties
See the Body Settings section.
Background Properties
See the Body Settings section.
Border Properties
The Borders section of the Heading Settings lets you apply borders to the heading levels and page title, and set the style, color, and width. The borders can be applied to all sides, or to any combination of the top, right, bottom, or left of the associated heading style. All Top, Right, Bottom, or Left Property Style Values: Color Width Values: Not assigned None 1px 2px 3px 4px 5px Not assigned hidden dotted dashed solid double groove ridge inset outset
82
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Header Settings
In the Header Settings section, you can upload a background image, set the background color, and apply borders. Image Header background: Upload a background image Select an image and color, and set the repeat pattern, and position Header borders: Set the, style, color, and width of borders
Header Settings – Background
CSS Example
.header { background:#000; border:1px solid #ccc;}
Background Properties
See Body Settings on page:
Border Properties
See Headings Settings on page:
Part III: Themes, Styles & More
83
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Footer Settings
In the Footer Settings section, you can modify the background image, and borders of the footer. Footer background: Footer borders: Image, color, repeat pattern, and position Position, style, color, and width
CSS Example
footer { background:#fff; border:1px solid #ccc;}
Footer Settings – Border
Background Properties
See Body Settings on page:
Border Properties
See Headings Settings on page:
84
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Preview Your Theme
Before previewing your theme, make sure that your browser is set to allow popups.
To preview your theme: 1. Click the Preview button in the upper-right corner.
You can see how the changes will look in your store, but they have not yet been applied to your store.
2. To preview other themes, select a theme from the Change Theme list, and click
the Change button.
3. When you’re finished, click the Quit Preview button.
Previewing Themes
Part III: Themes, Styles & More
85
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Apply Your Theme
To apply the new theme to your store: 1. From the Theme Editor, under Current Theme, scroll down to the My
Customizations section. Under the thumbnail image of your theme, click Apply. Your new theme appears at the top of the list under Current Theme.
2. To see the new theme in your store, open a new tab or browser window and type
your store URL into the address bar of your browser. If you have a standard domain such as mystore, type this: http://mystore.gostorego.com If you have a custom domain such as mystore.com, type this: http://www.mystore.com If the new theme doesn’t immediately appear, press the Refresh (F5) button.
Applying a Theme
86
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Using the Design Settings Editor
Troubleshooting
If the changes don’t appear when you refresh the page, try this:
1. From the Admin panel, select Design > Themes Editor. 2. In the Current Theme section, click the Customize button below the thumbnail. 3. In the Theme Customization panel on the left, select CSS Editor. 4. Scroll down to the Custom CSS section at the bottom of the page, and make sure
that the Ignore Design Settings Editor checkbox is not selected. If necessary, clear the checkbox.
If selected, any custom CSS settings in your current theme will override the Design Settings Editor.
5. Click the Save button to save the setting. 6. Click the Preview button to verify that your design settings have been applied.
Custom CSS - Clear Ignore Design Settings Editor
Part III: Themes, Styles & More
87
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
Resizing Catalog Images
Magento Go resizes the product images that you upload according to the dimensions specified by the theme. As a best practice, you should standardize the size of your images to ensure that they appear at the highest possible resolution, and maintain the correct proportion. Using images of various sizes and dimensions may impact the quality of the images displayed in your product catalog. One way to ensure that images maintain the correct proportion, or aspect ratio, when scaled is to make each image square. However, you can override the default size by specifying an exact size (in pixels) for any image. This is an easy solution for images that appear blurry or distorted. If you specify a new size for the base image, the associated small image and thumbnail resize automatically.
Design > Themes Editor > Customize (Theme) > Catalog Images
88
Magento Go Design Guide
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
To resize catalog images: 1. From the Admin panel, select Design > Themes Editor. 2. In the Current Theme section on the left, under the thumbnail for your current
theme, click Customize.
3. In the Theme Customization panel on the left, select Catalog Images.
Theme Customization > Catalog Images
4. In the Location column, find the image you want to resize. Then, set Image Type
to one of the following: Thumbnail Small Image Base Image
If you set one of the three image types to a custom size, the other two are resized automatically.
Part III: Themes, Styles & More
89
CHAPTER 7: Customizing Your Theme
Resizing Catalog Images
5. Enter the size, in pixels, for the image:
Width (px): (Required) If only the width is specified, the image is resized proportionally. Height (px): If both width and height are specified, the image is resized exactly.
Resizing an Image
6. To restore the default size of an image, do the following:
Click the Reset button to the right of the image. To restore all catalog images to their default sizes, click the Restore Default button in the upper right of the Catalog Images section.
7. To preview your change, click the Save button. Then, click the Preview button in
the upper-right corner to preview the resized image.
8. When finished, click the Save button.
Note: When you resize a catalog image, the change applies to all themes. After resizing a catalog image, you should also update any custom CSS to ensure that the image renders correctly.
90
Magento Go Design Guide
CHAPTER 8:
Using the CSS Editor
Most websites cascading style sheets to control the look and formatting of the site. If you’re comfortable working with and editing CSS, you can further customize the look and feel of your store. Magento Go allows you to add your own custom CSS file to override any of the default CSS used in the available themes. This gives you complete control of the formatting of all the elements of your store. This chapter does not teach you how to use CSS. If you want to learn more about CSS, try one of the many online tutorials or books. You can also use online plugins to help you work with CSS.
Design > Themes Editor > Customize
Part III: Themes, Styles & More
91
CHAPTER 8: Using the CSS Editor
Resizing Catalog Images
Step 1:
Download the Style Sheet
1. From the Admin panel, select Design > Themes Editor. 2. In the Theme Editor, select the theme you want to use as a template, and click the
Customize button.
3. In the Theme Customization panel on the left, select CSS Editor. Then, do the
following: a. In the Theme CSS section, click to select the styles.css file. b. When prompted, save the file to your computer. You can now open the file with your favorite text editor, to become familiar with the styles. Note: The .css files are saved in an optimized format that removes the whitespace, so when you view a file online, all spaces between the words are removed.
Step 2:
Enter Your Own Custom CSS Code
In the Custom CSS panel, you can override any existing CSS style, or add new ones for your theme. Any custom CSS that you enter overrides the default CSS for the theme.
1. To change CSS styles for your theme, you can enter your new CSS styles directly
in the Edit custom.css field. For example, the following CSS style turns off the “Checkout” link in the header:
.top-link-checkout { display: none; }
Note: The CSS styles entered in the “Edit custom.css” field are processed last. Therefore, they override styles that are uploaded as a custom.css file, as well as those in the default theme CSS files.
2. If you want any settings from the Design Settings Editor to be ignored, check the
Ignore Design Settings Editor checkbox at the bottom of the screen.
3. Click the Save and Continue Edit button to save your changes, but continue
working.
92
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Uploading a Custom CSS File
Uploading a Custom CSS File
You can also create a new CSS file with only the declarations that you want to use as overrides, and then upload it to your store. (Don’t include all of the default CSS declarations for your theme, but only the ones with changes.)
To upload a custom CSS file: 1. From the CSS Editor, in the Custom CSS section, browse to find your own custom
CSS file on your computer.
2. Select the file to copy the path to the Upload custom.css file box.
The allowed file type is .css. The file you upload replaces any existing custom.css file that might be shown in the “Edit custom.css” box.
3. Click the Save button to save your work.
Custom CSS
Part III: Themes, Styles & More
93
CHAPTER 8: Using the CSS Editor
Managing Your Image Assets
Managing Your Image Assets
Magento Go uses a Content Delivery Network (CDN) to manage images that are uploaded to Media Storage. You can keep things organized by creating folders for your images. The following types of images can be uploaded to Media Storage: .jpg .png .gif (.jpeg)
To create an image folder: 1. From the CSS Editor, click the Images Assets Manage button. 2. From Media Storage, click the Create Folder button. 3. If prompted, click to allow scripted windows. 4. In the popup window, enter the New Folder Name, using hyphens or
underscores instead of spaces. Then, click OK. The new folder appears in the Css Editor Images section of the directory tree.
Creating a Folder for Images
94
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Managing Your Image Assets
Uploading Images
If you want to use your own background images or fonts in your theme, you can upload the images or fonts using the CSS Editor. It is important to use relative URLs when referencing your uploaded images from CSS. This will preserve the link to the image, even if the location on the server changes. The following examples show how to format a relative path to an image in Media Storage.
../css_editor_images/imageName ../css_editor_images/subdirName/imageName
The next examples show how to reference relative URLs in CSS styles.
.styleName { background:url(../css_editor_images/imageName.gif) no-repeat } .styleName { background:url(../css_editor_images/subdirName/imageName.gif) no-repeat }
Make sure that all CSS references to your uploaded images follow these conventions.
To upload your images: 1. From the CSS Editor, in the Custom CSS section, click the Image Assets Manage
button.
2. From Media Storage, do the following:
a. In the directory tree on the left, navigate to the folder where you want to place the uploaded image. b. Click the Browse Files button, and select the image file to upload. (Hold the Ctrl key down to select more than one file at a time.) c. Click the Upload Files button to upload the file(s) to the specified folder.
Part III: Themes, Styles & More
95
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Managing Your Font Assets
The @font-face CSS rule makes it possible to use a wide variety of fonts, beyond the few which are traditionally considered to be “web safe.” The @font-face rule is supported by all major browsers. Firefox, Chrome, Safari and Opera support .ttf and .otf font file formats for use with the CSS @font-face rule . At the time of this writing, Internet Explorer does not support True Type and Open Type fonts. It does, however, support Microsoft’s proprietary Embedded OpenType (.eot) file format.
To create a fonts folder: 1. From the CSS Editor, click the Fonts Assets Manage button. 2. From Media Storage, click the Create Folder button. If prompted, click to allow
scripted windows.
3. In the popup window, enter the New Folder Name, using hyphens or
underscores instead of spaces. Then, click OK.
4. The new folder appears in the Css Editor Fonts section of the directory tree.
Creating a Folder for Fonts
96
Magento Go Design Guide
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Uploading Fonts
Both True Type and Open Type fonts can be uploaded to the Css Editor Fonts section of Media Storage. .ttf .otf True Type font Open Type font
If you implement True Type or Open Type fonts in your theme, any browser that does not support the fonts will render the pages using standard “web safe” fonts instead.
To upload your fonts: 1. From the CSS Editor, in the Custom CSS section, click the Fonts Assets Manage
button.
2. From Media Storage, do the following:
a. In the directory tree on the left, navigate to the folder where you want to place the uploaded font. b. Click the Browse Files button, and select the font file to upload. (Hold the Ctrl key down to select more than one file at a time.) c. Click the Upload Files button to upload the file(s) to the specified folder.
CSS Example
@font-face { font-family: "myfontname"; src: url("../css_editor_fonts/MyUploadedFont.ttf"); } .demo-notice { font-family: } "myfontname", Georgia, serif;
Part III: Themes, Styles & More
97
CHAPTER 8: Using the CSS Editor
Managing Your Font Assets
Examples of CSS Code
Here are some examples of CSS customizations that you can use to make common modifications to the Media theme in Magento Go. Each theme is a little different, so these are only examples. The specific values needed may vary by theme. You can experiment by entering CSS code directly into Edit Custom .css box, to see the effect of the style changes in your theme. Tip: Use the Firefox plug-in Firebug to help you determine the specific names and values used in your theme.
/* To remove the white space under the nav bar at the top of the page */ .top-container { margin: 0; padding: 0; }
/* To turn off the checkout link at the top of the page and remove the separator bar after the cart link */ .top-link-checkout { display: none; } .top-cart .block-title strong { background-image: none; }
/* To move the search box down into the nav bar area */ .header .form-search { position: absolute; right: 10px; top: 100px; }
/* To remove the Newsletter signup from the footer */ .footer .form-subscribe { display: none; }
98
Magento Go Design Guide
CHAPTER 9:
Working with JavaScript
Your store layout, design, and functionality can be customized using the design tools which are available from the Admin panel. However, if you have a working knowledge of JavaScript, you can make additional changes to enhance your store. Magento Go allows you to add your own custom JavaScript files to add client-side functionality – which is executed at the individual browser level, rather than on the server. In this chapter, you will learn how to work with JavaScript libraries, hosted scripts, and snippets of code to implement custom features for your Magento Go store. This material was written for frontend developers who have a working knowledge of JavaScript. If you would like to learn more, you can find a wealth of educational material online or at your favorite book store.
Adding Custom Code
There are two primary methods for adding custom JavaScript to your Magento Go store, and one you use depends on what you want to do. Method 1: To implement custom code (.js file), hosted scripts, or JavaScript libraries (such as TypeKit, JQuery, or MooTools), use the Java Script Editor in the Theme Customization section. Method 2: To add hosted scripts or invoke custom snippets of code, add the code to a static block and use a Frontend App to make the code available to the appropriate pages.
Part III: Themes, Styles & More
99
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Method 1: Upload JavaScript Files
1. From the Admin panel, select Design > Theme Editor. 2. In the Theme Editor, below the thumbnail for the theme you are working with,
click Customize.
3. In the Theme Customization panel on the left, select Java Script Editor. 4. In the Theme JavaScript section, do the following:
a. Click the Browse Files button to select the JavaScript file from your computer. Repeat this step to add the path to every JavaScript file that you want to upload. To upload multiple JavaScript files, first add each file, and then upload them all at once—you don’t need to upload each file separately. b. Click the Upload Files button to upload the JavaScript file to your store. After the file is uploaded, the JavaScript will be available to all pages.
5. Click the Save button to save your changes.
Managing Load Order
For many JavaScript libraries, scripts and libraries must load in the correct order to function properly. You can manage the load order of scripts by dragging and dropping the files into position in the list of JavaScript files to upload. Uploading them in sequence ensures that they are in correct order automatically.
100
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Using jQuery
To take advantage of the jQuery library or any of the custom plug-ins that are available, follow the steps below. Note: This method might not always work because different version of JavaScript might conflict with each other. We believe the noConflict() solution is the best alternative currently available. To learn more about noConflict(), visit the jQuery API page.
To add custom code using the Built-In Library (v.1.3.1): 1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New button. Then, do the following:
a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(jQuery); </script>
d. Replace the comments with your custom jQuery code.
Adding jQuery Code to CMS Block
Part III: Themes, Styles & More
101
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
To add custom jQuery code using any version of jQuery:
Note: This example uses the hosted jQuery Library version 1.5.2 from Google APIs.
1. From the Admin panel, select System > Configuration. 2. In the Configuration panel on the left, select Design. Then, do the following:
a. In the HTML Head section, scroll down to the Miscellaneous Scripts box and paste the following code:
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’ type="text/javascript"></script>
b. Click the Save button. c. Paste the following code immediately after the hosted jQuery library that you included:
<script type="text/javascript"> var j152 = jQuery.noConflict(true); </script> d. Click the Save Config button to save the changes.
3. From the Admin panel, select CMS > Static Blocks. 4. Click the Add New button. Then, do the following:
a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
102
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
d. Replace the commented out lines with your custom jQuery code.
Adding jQuery Code to the CMS block
5. Click the Save Block button to save your changes.
To add custom jQuery code using an uploaded version of jQuery: 1. Open the jQuery library file in a text editor, and do the following:
a. Paste the following code at the end of the file. b. Change the name of the variable j152 to match the version of jQuery that you are using.
var j152 = jQuery.noConflict(true);
2. From the Admin panel, select Design > Theme Editor. 3. In the Theme Editor, below the thumbnail for the theme you are working with,
click Customize.
4. In the Theme Customization panel on the left, select Java Script Editor. Then,
do the following: a. In the Theme Java Script section, click the Browse Files button. Select the modified jQuery file that you want to use. b. Click the Upload Files button. c. Click the Save button to save your changes.
Part III: Themes, Styles & More
103
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
5. From the Admin panel, select CMS > Static Blocks. Click the Add New button,
and do the following: a. Enter a Block Title and Identifier for the CMS block. b. Scroll down to the Content text box. Then, click the Show / Hide Editor button to work in plain code mode. c. Paste the following wrapper into the Content box:
<script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
d. Change the variable name (j152) to correspond to the variable you created. e. Replace the comments with your custom jQuery code.
6. Click the Save button to save your changes.
Applying JavaScript Actions
For a JavaScript file to work properly, you must first invoke it within a page by entering a small script.
To invoke JavaScript actions for a page: 1. From the Admin panel, select CMS > Pages > Manage Content. 2. Do one of the following:
Click to open the page where you want to invoke the script. Click the Add New Page button.
3. In the Page Information panel on the left, select Content. Then, do the following:
a. Click the Show / Hide Editor button to work in plain code mode. b. Paste the script code, immediately after the JavaScript plug-in instructions.
4.
Click the Save Page button to save your changes.
5. Preview the page you just created to make sure that the script works correctly.
Tip: If your script is not functioning as intended, double-check your code and follow the developer’s instructions precisely.
104
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Method 2:
Use Hosted Scripts and Code Snippets
To add code snippets or a link to hosted scripts, you need to include the code in a new static block. Then, use a frontend app to add the static block to your store. For more information, see: “Adding Dynamic Content,” on page 35. Step 1: Step 2: Step 3: Step 4: Add a New Static Block Create a New Frontend App Choose Where it Goes Verify that the Code Works
Step 1:
Add a New Static Block
1. From the Admin panel, select CMS > Static Blocks. 2. Click the Add New Block button, and do the following:
a. Complete the required fields. b. Click the Show/Hide Editor button to work in plain code mode. c. In the Content box, paste your code snippet or script link.
CMS Block Content
3. Click the Save button.
Part III: Themes, Styles & More
105
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Step 2:
Create a New Frontend App
1. From the Admin panel, select CMS > Frontend Apps. 2. Click the Add New Frontend App Instance button. 3. In the Settings section, select the Type of app you want to create. Then, click the
Continue button.
Select Type
4. In the Frontend Properties section, do the following:
a. In the Frontend App Instance Title, enter a descriptive title for your app. This title is for internal use only, and won’t be visible to your customers. b. Enter a number in the Sort Order field to determine the order of the block when listed with others in the column. The top position in zero. c. Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down, and select each option.
106
Magento Go Design Guide
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
Step 3:
Choose Where It Goes
1. In the Layout Updates section, click the Add Layout Update button. Then, do
the following: a. Set Display On to “All Pages.” b. Set Block Reference to “Page Footer.”
2. In the panel on the left, select Frontend App Options. Then, do the following:
a. Click the Select Block button. b. In the list, click to select the block where you inserted the code..
3. Click the Save button to save your changes.
After you have completed these steps to create a static block with the JavaScript code (or script source link), and the Frontend app that references the block, your script should be running.
Step 4:
Verify that the Code Works
1. Go to any page in your store. 2. Right-click on the page, and select View Page Source (or a similar variation,
depending on your browser).
View Page Source
3. In the page source view, click Ctrl+F to open the Find tool.
Part III: Themes, Styles & More
107
CHAPTER 9: Working with JavaScript
Managing Your Font Assets
4. Search for the file name of the JavaScript file that you added. If the file name is
included in your page source, the file is running.
View Source - Find
To verify a code snippet or script source: 1. Go to any page in your store, or to the specific type of page where the code is
used.
2. Right-click on the page, and select View Page Source (or similar command,
depending on your browser).
3. In the page source view, click CTRL+F (or similar command) to open the Find
tool.
4. Search for any line of code from the code snippet (preferably a unique line, so you
don’t have to search through other code to find it). If you find the code in the page, then it is running.
108
Magento Go Design Guide
Appendices
Glossary Editor Toolbar Buttons Block References Page References
Appendices
109
Appendix A:
Glossary
above the fold The web page content that is immediately visible in the browser window; section of a page that is displayed without the need to scroll. Administrative panel; back office; private section of store where orders, catalog, content, and configurations are managed. The text that is displayed in place of an image when the user is unable to view the image. The visible text that is anchored to another page or page section; the literal text of a hyperlink. Application Program Interface: A software interface that lets third-party applications read and write to a system using programming language constructs or statements. A characteristic or property of a product; anything that describes a product. Examples of product attributes include color, size, weight, and price. To give a service permission to perform certain actions or to access resources. Product price, less coupons or discounts, plus freight and applicable taxes. The average is determined by adding the beginning cost of inventory each month, plus the ending cost of inventory for the last month of the period. Promotional graphics displayed either horizontally on the top of a web page or vertically on the left or right margins. Website advertisements are often displayed as banners.
Admin panel
alt text
anchor text
API
attribute
authorization
average inventory cost
banner
110
Appendices
Appendix A: Glossary
B2B
Business to Business: A type of business transaction between two business entities that are not the final consumers of the goods or services. Business to Consumer: Business transactions between a business entity and a consumer. To perform a task or make a change to multiple items all at once, without manual repetition. The percentage of visitors to your site that leave without viewing any other pages. A unique identity that defines a particular product or group of products. A navigation aid that helps the user to keep track of their location within your store. A retail business with a permanent physical location, as opposed to being entirely virtual. A hyperlink that fails to send the user to its intended web page. The canonical meta tag redirects search engines to the correct URL, when seemingly duplicate content is encountered on the server. The process of converting the authorized amount into a billable transaction. Transactions cannot be captured until authorized, and authorizations cannot be captured until the goods or services have been shipped. A person who opens a credit card account and is authorized to make purchases. A set of products that share particular characteristics or attributes. A marketing term that indicates a goal has been reached. If the goal is to sell a product, conversion is reached when a visitor to your site becomes a buyer. The percentage of visitors who are converted into buyers.
B2C
batch processing
bounce rate
brand
breadcrumb
brick and mortar
broken link
canonical URL
capture
cardholder
category
conversion
conversion rate
Appendices
111
Appendix A: Glossary
checkout process
The process of gathering the payment and shipping information that is necessary to complete the purchase of items in the shopping cart. In the final step, the customer reviews and places the order. Content Management System: A software system that is used to create, edit, and maintain content on a website. Comma Separated Values: A type of file used to store data values which are separated from each other by commas. Card Verification Method: A way to verify the identity of the customer by confirming a 3-digit or 4-digit credit card security code with the payment processor. A document issued by the merchant to a customer to write off an outstanding balance because of overcharge, rebate, or return of goods. Cascading Style Sheets: A style sheet language that controls the appearance of HTML documents; a way to control the appearance of text, graphics, lists, links, and all other elements on a web page. The address of a website on the web; what the customer types in their browser address bar to access the store. The process for subscribing email recipients by requiring them to take a secondary step to confirm that they want to receive emails. A web page that displays different content depending on the user request. A term or phrase used in a search to filter for content that is of significant importance to that term or phrase. Frequently Asked Questions.
CMS
CSV
CVM
credit memo
CSS
domain
double opt-in
dynamic content
keyword
FAQ
112
Magento Go Design Guide
Appendix A: Glossary
favicon
Short for favorites icon; a 16x16 or 32x32 pixel icon associated with a website; is displayed in the browser address bar and next to the site name in a bookmark list. Freight On Board: A shipping term indicating who is responsible for paying transportation charges. The process of managing customer shipments. A transaction bridge between a customer and a payment processing service that is used to transfer money between the customer and the merchant. The difference between the cost and price of a product. The first home page a visitor sees when they access your website URL. Considered the most important page on your website according to search engine indexers. HyperText Markup Language: A standard for tagging and structuring text, images, videos, and other media on a web page. A document that provides a detailed description of a purchase, including products purchased, quantity, price, shipping cost, sales tax, and total. A scripting language used with HTML to produce dynamic effects and interactions on web pages. A page on your site where a visitor arrives after clicking a link or advertisement. The value and authority transferred from one web page to another via hyperlinks (or links). Link juice affects a website’s page rank, a factor used to rank a search engine results page. A set of configurations that defines the user’s language, country, tax rate, and other settings. The process of signing into an online account.
FOB
fulfillment gateway
gross margin
home page
HTML
invoice
JavaScript
landing page
link juice
locale
login
Appendices
113
Appendix A: Glossary
markdown
The amount subtracted from the original price of a product. A percentage added to the cost of an item to determine the retail price. An account with a bank or financial institution that makes it possible to accept credit card transactions. Information in a web page that is not displayed on the page itself, but is used by search engines to determine the page title, description, and page keywords. The primary group of web page links that a customer uses to navigate around the website; the navigation links to the most important categories or pages on an online store. The process by which a user consents to receiving emails from an online store. A document that is usually included in a shipped package that describes the contents. Packing slips do not include financial or account information. A service that charges your customers’ credit cards and sends the funds to your merchant account, for deposit into your business bank account. Payment Card Industry: Refers to debit and credit cards and their associated businesses. A written sales contract between a buyer and seller that describes the merchandise or service to be purchased from a vendor. A document that explains the merchant’s policies for handling customer information. A method used to alert browsers and search engines that a page has been moved. 301 Redirect: Permanent change 302 Redirect: Temporary change
markup
merchant account
meta tags
navigation
opt-in
packing slip
payment gateway
PCI
purchase order (PO)
privacy policy
redirect
114
Magento Go Design Guide
Appendix A: Glossary
relative link
A hyperlink that includes only the address of the linked page that is relative to the linking page, rather than the full URL. A document that explains the merchant’s rules regarding the return of products by customers. A file placed on a website that tells search engine crawlers which pages not to index. Really Simple Syndication: A technology that creates web content syndication and allows web users to subscribe to product feeds, websites, and blogs. Software as a Service: A software delivery model where the vendor provides the software and hosting environment, and customers pay for the service by subscription or per use. Information that is used by the SSL protocol to establish a secure connection. Search Engine Optimization: The process of improving a website’s search engine rankings in order to increase valued visitors. Settlement occurs when the acquiring bank and the issuer exchange funds and the proceeds are deposited into the merchant account. A company that transports packages. Common carriers include UPS, FedEx, DHL, and USPS. A grouping of products that the customer wishes to purchase at the end of their shopping session. A page that provides search engines with an efficient, alternate route through your site. Stock Keeping Unit: A number or code assigned to a product to identify the product, options, price, and manufacturer. A promotional page with a product or advertisement; normally displayed before the home page.
return policy
robots.txt
RSS feed
SaaS
security certificate
SEO
settlement
shipping carrier
shopping cart
sitemap
SKU
splash page
Appendices
115
Appendix A: Glossary
SSL certificate
A validation and security mechanism that identifies the merchant and encrypts credit card and other sensitive information. Content that does not change frequently. See also dynamic content. A fixed content block that can be displayed on various content pages in a store. A package that contains graphics and appearance information, and customizes the look and feel of the store. A notification email sent to the customer when a transaction is processed. Uniform Resource Locator: The unique address of a page on the internet. Refers to the degree to which a product or service is easy to use by its customers. What You See Is What You Get: An editor that displays formatted text as it will appear in its final published form. Extensible Markup Language: A markup format derived from SGML that it used to format information for publication and distribution.
static content
static block
theme
transactional email
URL
usability
WYSIWYG
XML
116
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Appendix B:
Editor Toolbar Buttons
Styles and Fonts
List Description Styles
Format
Font Family
Font Size
Character Format
Button Description Bold
Italic
Underline
Strikeout
Subscript
Superscript
Appendices
117
Appendix B: Editor Toolbar Buttons
Special Characters
Button Description Insert Symbol
Insert Non-Breaking Space
Color
Button Description Select Text Color
Select Background Color
Paragraph Format
Button Description Left Justify
Center
Right Justify
Full Justify
Outdent
Indent
Blockquote
Insert Page Break
118
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Lists
Button Description Bulleted (Unordered) List
Numbered (Ordered) List
Rules
Button Description Insert Simple Horizontal Rule
Insert Formatted Horizontal Rule
Images and Media
Button Description Insert Media
Insert / Edit Image
Links and Anchors
Button Description Insert / Edit Link
Remove Link
Insert / Edit Anchor
Appendices
119
Appendix B: Editor Toolbar Buttons
Tables
Button Description Insert / Modify Table
Table Row Properties
Table Cell Properties
Insert Row Above
Insert Row Below
Remove Column
Split Merged Table Cells
Merge Table Cells
Layers
Button Description Insert New Layer
Move Layer Forward
Move Layer Backward
Toggle Absolute Positioning
120
Magento Go Design Guide
Appendix B: Editor Toolbar Buttons
Variables and Apps
Button Description Insert Variable
Insert / Edit Attributes
Insert Frontend App
Editing Tools
Button Description Undo
Redo
Cut
Copy
Paste
Paste as Plain Text
Paste from Word
Find
Find and Replace
Spellchecker (not installed)
Appendices
121
Appendix B: Editor Toolbar Buttons
Button
Description Mark as Deletion
Mark as Insertion
Citation
Abbreviation
Acronym
Help
Coding Tools
Button Description Remove Formatting
Cleanup Messy Code
Workspace Preferences
Button Description Toggle Fullscreen Mode
Display Visual Control Characters (On / Off)
Toggle Guidelines / Invisible Elements
Set Typing Direction Left-to-Right
Set Typing Direction Right-to-Left
122
Magento Go Design Guide
Appendix C: Block References
Appendix C:
Block References
Category and CMS Pages
Block Reference Breadcrumbs Position Content is posted to the right of the breadcrumbs—the navigation aid that provides links as a path—that’s showcased below the navigation bar. Content is posted below the left column blocks. Content is posted below the main content area. Content is posted below the Cart Subtotal in the My Cart popup located within the top link. Content is posted below the main navigation bar. Content is posted at the bottom of the page. Content is posted above the footer of the page. Content is posted below the header of the page. Content is posted at the top of the page. Content is posted below the right column blocks. If your plan allows multiple store views and you have created at least two store views, the store language switcher is enabled. It is usually located at the top of the page. Content is posted to the right of the dropdown language switcher.
Left Column
Main Content Area
My Cart Extra Actions
Navigation Bar
Page Bottom
Page Footer
Page Header
Page Top
Right Column
Store Language
Appendices
123
Appendix C: Block References
Product Detail Pages
Block Reference Alert URLs Position Content is placed below the title of the product within the product detail page. If custom variants and options are added, content is placed below the Add to Cart button. Content is placed to the right of breadcrumbs—the navigation aid that provides links as a path—that’s showcased below the navigation bar. If a custom variant and options are added, content is placed next to it. The same location applies to configurable options. Content is placed below the left column blocks. Content is placed below the main content area. Content is placed below the Cart Subtotal in the My Cart popup located within the top link. Content is placed below the main navigation bar. Content is placed at the bottom of the page.
Bottom Block Options Wrapper
Breadcrumbs
Info Column Options Wrapper
Left Column
Main Content Area
My Cart Extra Actions
Navigation Bar
Page Bottom
Page Footer
Content is placed above the footer of the page. Content is placed below the header of the page. Content is placed at the top of the page.
Page Header
Page Top
124
Magento Go Design Guide
Appendix C: Block References
Block Reference PayPal Express Checkout (Payflow Edition) Shortcut Wrapper PayPal Express Checkout Shortcut Wrapper
Position If the PayPal payment method is enabled, content is placed below the PayPal buy button. If the PayPal payment method is enabled, content is placed below the PayPal buy button. Content is placed below the products tag bar.
Product Tags List
Product View Extra Hint
Content is placed below the main top price of the product. Content is placed below the right column blocks. If your plan allows multiple store views and you have created at least two store views, the store language switcher is enabled. It is usually located at the top of the page. Content is posted to the right of the drop-down language switcher. Content is placed above the Add Your Tags field.
Right Column
Store Language
Tags List Before
Appendices
125
Appendix D: Page References
Appendix D:
Page References
To learn more about Page References, see: “Frontend App Types,” on page 40. Page Reference Advanced Search Form Advanced Search Result All Empty Layout Pages All One-Column Layout Pages All Pages (Print Version) All Three-Column Layout Pages All Two-Column Layout Pages (Left Column) All Two-Column Layout Pages (Right Column) CMS Home Page CMS No-Route Page CMS Pages (All) Catalog Product Email to a Friend Catalog Product Review View Catalog Product Reviews List Catalog Seo Popular Search Terms Catalog Seo Sitemap (Category List) Catalog Seo Sitemap (Category Tree) Catalog Sitemap (Common) Catalog Sitemap (Product List) Contact Us Form Customer Account Edit Form Customer Account Login Form Customer Account Logout Success Customer Account Registration Form Customer Forgot Password From Customer My Account (All Pages) Customer My Account Address Customer My Account Address Edit Form Customer My Account Dashboard Customer My Account Gift Card Check Form Customer My Account My Tags List Customer My Account My Wishlist
126
Magento Go Design Guide
Appendix D: Page References
Page Reference Customer My Account Newsletter Subscriptions Customer My Account Order Creditmemo View Customer My Account Order History Customer My Account Order Invoice View Customer My Account Order Shipment View Customer My Account Order View Customer My Account Product Reviews Customer My Account Review Details Customer My Account Store Credit Customer My Account Tag View Customer My Account Wishlist Sharing Form Customer Shared Wishlist View Gift Card Balance Check Form One Page Checkout One Page Checkout Failure One Page Checkout Overview One Page Checkout Success PayPal Express Order Review Form PayPal Express Checkout (Payflow Edition) PayPal Express Checkout Shortcut Popular Search Terms Quick Search Form RSS Feeds List Sales Invoice Print View Sales Order Print View Sales Shipment Print View Shipment Tracking Popup Shopping Cart Tagged Products List Tags List (All Available) Website Maintenance Mode
Appendices
127
128
Appendices
Index
.eot, 96 .gif, 94 .ico, 68 .jpeg, 94 .jpg, 94 .js file, 99 .otf, 97 .phtml template, 31 .png, 94 .ttf, 97 @font-face, 96 Alt text, 66, 110 Anchor Categories, 46 Anchor text, 110 Anchors, 119 API, 110 Apps, 121 aspect ratio, 88 Attribute, 110 Authorization, 110 Average Inventory Cost, 110
B
1 Column, 12 1 Column Layout, 14 2 Columns Left Bar, 15 2 Columns Right Bar, 15 2 Columns with Left Bar, 12 2 Columns with Right Bar, 13 3 Columns, 13, 16 301 Redirect, 114 302 Redirect, 114 4-column, 13 B2B, 111 B2C, 111 Background, 77, 81 color, 80, 83 image, 83 properties, 80 footer, 84 Banner, 31, 110 Block Template, 47 Inline Template, 47 Layout Updates, 46 Rotator, 40, 44 base image, 88 Batch processing, 111 Block, 31 Add, 24 Custom, 27 Delete, 25 Lock, 23 Move, 22 New, 30 Restore Defaults, 25 Static, 27 Block Reference, 33, 47, 123 Category Page, 34 CMS Home Page, 33 Product Detail Page, 124 blocks, 17 Blog, 3
A
Above the fold, 110 accessibility, 66 Active, link, 79 add blocks, 31 address bar, browser, 68 Admin panel, 31, 110 Advanced Search Form, 126 Advanced Search Result, 126 Alert URLs, 124 Align, 78 All Empty Layout Pages, 126 All One-Column Layout Pages, 126 All Pages (Print Version), 126 All Three-Column Layout Pages, 126 All Two-Column Layout Pages (Left Column), 126 All Two-Column Layout Pages (Right Column), 126
Index
129
Index
Body, 74 Settings, 77 Bold, 78, 79 Book icon, 72 Border Properties, 82 borders, 81, 83 footer, 84 Bottom Block Options Wrapper, 124 Bounce rate, 111 Brand, 111 breadcrumb, 47, 111, 123, 124 Brick and mortar, 111 Broken link, 111 browse, 22 browser, 62, 96, 99 Built-In Library, jQuery, 101 CMS Block 32 Hierarchy, 50 Hierarchy Node Link, 40 Home Page, 31, 33, 126 jQuery in, 101 No-Route Page, 126 Page Block References, 123 Page Link, 40, 51 Pages (All), 126 Static Block, 40, 52 code, 31 Coding Tools, 122 Color, 78, 79, 80, 118 background, 80 Picker, 77 border, 82 Column Dimensions, 14 Community Magento, 31 Forum, 2 Compare Products, 18, 21 Contact Us Form, 126 content area, 11, 12 blocks, 17 Delivery Network, 94 node, 50 conversion rate 111 Credit Memo, 112 CSS, 5, 12, 14, 76, 91, 95, 112 Code, 98 Editor, 7, 65, 87, 91 Editor Fonts, 96 CSV, 112 Current Theme, 64 Custom Blocks, 17, 27 code, 31 CSS, 87, 90, 92, 93 domain, 64, 86 plug-ins, 101 Customer Account Edit Form, 126 Account Login Form, 126 Account Logout Success, 126 Account Registration Form, 126 Forgot Password From, 126 My Account (All Pages), 126 Address, 126
C
Canonical URL, 111 Capture, 111 Cardholder, 111 cascading style sheets, 5, 91 Catalog, 54 Category Link, 40, 53 Images, 7, 69, 89 resize, 88 "New Products" List, 40, 54 Product Email to a Friend, 126 Link, 40, 55 Review View, 126 Reviews List, 126 Seo Popular Search Terms, 126 Sitemap (Category List), 126 Sitemap (Category Tree), 126 Sitemap (Common), 126 Sitemap (Product List), 126 Categories, 47, 111 Category, 31 Block References, 123 Link, 53 page, 34, 53 CDN, 94 Change Theme, 85 Character Format, 117 Checkout process, 112 Chrome, 96 client-side, 99 CMS, 112
130
Magento Go Design Guide
Index
Address Edit Form, 126 Dashboard, 126 Gift Card Check Form, 126 My Tags List, 126 My Wishlist, 126 Newsletter Subscriptions, 126 Order Creditmemo View, 126 Order History, 126 Order Invoice View, 126 Order Shipment View, 126 Order View, 126 Product Reviews, 126 Review Details, 126 Store Credit, 126 Tag View, 126 Wishlist Sharing Form, 126 Shared Wishlist View, 126 Customize, 87, 91 CVM, 112 Firefox, 96 Firebug, 98 fixed width, 14 Flash, 35 float, 16, 17 FOB, 113 Font, 78, 79, 95, 96, 117 web safe, 97 footer, 11, 12, 74 background, 84 borders, 84 Settings, 84 Frontend App, 32, 35, 41, 99, 106, 121 Create, 41 developers, 99 Instance, 28, 36, 106 Options, 39, 48, 50, 51, 52 Properties, 37 Types, 28, 40, 126 FTP, 31 Fulfillment, 113
D
Dashboard, 70 Default, 79 Design Settings Editor, 7, 65, 76 Design Tools, 6 directory tree, 95, 96, 97 domain, 64, 86, 112 Double Opt-In, 112 Download style sheet, 92 Dynamic Content, 35, 112
G
Gateway, 113 Gift Card Balance Check Form, 126 grid view, 57 Gross margin, 113 Guides, 3
E
Edit custom.css, 92, 98 Editing Tools, 121 Editor Toolbar, 117 Email Logo, 67 Embedded OpenType, 96 Empty, 13 Enterprise Magento, 31
H
hard-coded, 27 header, 11, 12, 74 logo, 65 Settings, 83 Heading, 74 levels, 81, 82 tags, 82 Headings Settings, 81 Height (px), 90 Help, 2 hexadecimal code, 77 Hierarchy, 50 Home page, 113 hosted scripts, 99, 105 Hover, link, 79 HTML, 1, 12, 17, 31, 113 Head, 68 hue map, 77
F
FAQ, 112 favicon, 68, 113 file conversion, 68 file format, font, 96 file type favicon, 68
Magento Go Design Guide
131
Index
Links, 77, 119 list view, 57 Lists, 119 Load Order, JavaScript, 100 Locale, 113 Log In, 113 login page, 14 logo, 65 email, 67 files, 65 image Image Alt, 66 size, 65 Logos, 61
I
Ignore Design Settings Editor, 87, 92 image, 80 Alt text, 66 Assets, 94 background, 80 folder, 94 Resize, 69 sliders, 35 images, 119 uploading, 95 resize, 88 Info Column Options Wrapper, 124 Inline Template, 43 intensity, 77 Interface Text, 69, 70 Internet Explorer, 96 invoice, 113 invoke JavaScript, 104 Italic, 78, 79
M
Magento, 31 Main Content Area, 47, 123, 124 Maintenance Mode, 69, 71, 73 markdown, 114 marketing campaign, 35 markup, 114 Media, 119 Media Storage, 94 Merchant Account, 114 meta tags, 114 title, 72 Miscellaneous Scripts, 102 MooTools, 7, 99 My Cart Extra Actions, 47, 123, 124 My Customizations, 63, 76
J
Java Script Editor, 7, 99, 100 JavaScript, 5, 99, 113 Actions, 104 Libraries, 99 jQuery, 7, 99, 101 API, 101 Library, 101, 102
K
Keyword, 112 Knowledge Base, 2
N
navigation, 35, 114 bar, 47, 123, 124 New Products List, 36, 54 noConflict(), 101 Node, 50 Non-Anchor Categories, 46
L
landing page, 35, 113 languages, multiple, 70 layered navigation, 12, 21 Layers, 120 Layout Editor, 6, 21 Layout Update, 29, 31, 32, 38 Category, 32 Left Column, 47, 123, 124 libraries, JavaScript, 100 Line height, 78 link juice, 113 Link Properties, 79
O
One Page Checkout, 126 Failure, 126 Overview, 126 Success, 126 Open Type font, 96, 97 Opera, 96
132
Magento Go Design Guide
Index
optimized format, 92 opt-in, 114 Orders, 19, 21 overrides, 93
Q
Quick Search Form, 126
R P
packing slip, 114 page, 31 Bottom, 47, 123, 124 Footer, 123, 124 Footer Before, 47 Footer Bottom, 47 Header, 47, 123, 124 Layout, 12, 61 Layout Updates, 31 Link, 51 title, 81, 82 Top, 47, 123, 124 Paragraph Format, 118 payment gateway, 114 PayPal, 19, 21 Express Checkout (Payflow Edition), 126 Express Checkout (Payflow Edition) Shortcut Wrapper, 125 Express Checkout Shortcut, 126 Express Checkout Shortcut Wrapper, 125 Express Order Review Form, 126 PCI, 114 PHP, 31 pixels, 14, 88 Poll, 18, 21 Popular Search Terms, 126 Popular Tags, 21 popups, 22, 62 Position, 80 Preconfigured Blocks, 17 pre-defined text, 70 Preview, 26, 30, 62, 85 Privacy Policy, 114 product, 31 catalog, 88 Detail Page, block references, 124 Link, 55 Tags List, 125 Types, 46 View Extra Hint, 125 proportion, 88 purchase order, 114 Recently Compared Products, 21, 40, 56 Recently Viewed Products, 18, 21, 40, 57 Redirect, 114 Relative Link, 115 URLs, 95 remove blocks, 31 Repeat, 80 resize images, 69, 88 resolution, logo, 65 Return Policy, 115 Right Column, 47, 123, 125 Robots.txt, 115 Rotation Mode, 49 RSS Feed, 115 Feeds List, 126 Rules, 119
S
SaaS, 115 Safari, 96 Sales Invoice Print View, 126 Order Print View, 126 Shipment Print View, 126 screen resolution, 14 SCRIPT box, 72 search engines, 66 Security Certificate, 115 SEO, 115 server, 99 Settlement, 115 Shipment Tracking Popup, 126 Shipping Carrier, 115 Shopping Cart, 115, 126 Sitemap, 115 Size, 78, 79 SKU, 115 sliders, 35 small image, 88 Snippets, 105 Special Characters, 118 Specified Banners, 48
Magento Go Design Guide
133
Index
splash page, 14, 115 SSL Certificate, 116 Static Block, 27, 30, 52, 99, 116 Static Content, 116 Store Language, 47, 123, 125 structural blocks, 11 Style Sheet, download, 92 Style, border, 82 styles, 76, 117 subscription forms, 35 Support Site, 3
U
UI Text, 69 unset blocks, 31 upload, 93 custom.css file, 93 JavaScript files, 100 Uploading Fonts, 97 Images, 95 URL, 116 Usability, 116
T
Tables, 120 tag clouds, 35 Tagged Products List, 126 Tags List (All Available), 126 Before, 125 Text, 77 Properties, 78 theme, 12, 61, 116 apply, 86 Customization, 65, 75, 99 Editor, 6, 64, 65, 74 Styles, 69, 74 Text Editor, 6, 70 themes, 61 Editor, 61, 87, 92 thumbnail image, 88 Transactional Email, 67, 116 logo, 67 Troubleshooting, 30, 87 True Type font, 96, 97 TypeKit, 7, 99
V
Variables, 121 video chats, 35 tutorials, 2 View Page Source, 107, 108 Visited, link, 79 voting, 35
W
web safe fonts, 97 Webinars, 3 Website Maintenance Mode, 126 Width (px), 90 Width, border, 82 Wishlist, 19, 21 Working Copy, 36 Workspace Preferences, 122 WYSIWYG, 116
X
XML, 31, 116 XML Page Layout Updates, 31
134
Magento Go Design Guide
Sponsor Documents
Recommended
No recommend documents