Magento Design Guide by Piyush Aiya

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â&#x201E;˘ is a trademark of Magento, Inc. Copyright ÂŠ 2012 Magento, Inc. An eBay Company (X.commerce)

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

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

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:

Glossary ............................................................................................................. 110

Appendix B:

Editor Toolbar Buttons ....................................................................................... 117

Appendix C:

Block References ............................................................................................... 123

Appendix D:

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 for as 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

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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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!

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

CHAPTER 1: Designing Your Store

Where to Find Help

Notes: _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________ _______________________________________________________

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 some of the 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

CHAPTER 2: A Quick Tour

Design Tools

Design Tools Your Magento Go store includes a suite of tools for designersâ&#x20AC;&#x201D;with or without programming experienceâ&#x20AC;&#x201D;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.

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

CHAPTER 2: A Quick Tour

Design Tools

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 â&#x20AC;&#x153;floor planâ&#x20AC;? of each page.

Structural Blocks

Part II: Layout & Content Blocks

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.

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

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 â&#x20AC;&#x153;1 Columnâ&#x20AC;? 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

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

Width

Main Content Column

740px

Right Side Bar

230px

Unused Space

20px Total

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

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

Width

Left Side Bar

230px

Main Content Column

490px

Right Side Bar

230px

Unused Space

40px Total

990px

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

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.

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

CHAPTER 3: Page Structure and Layout

A Few Examples

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



Categories

To limit the banner to certain categories, select each category where the banner will be available.

Block Reference

Options include:

Template

Part II: Layout & Content Blocks



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

Options include: 

Banner Block Template



Banner Inline Template

CHAPTER 5: Adding Dynamic Content

Creating a Frontend App

Banner Frontend App Options

Frontend App Options

Option

Description

Banners to Display

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

Magento Go Design Guide

CHAPTER 5: Adding Dynamic Content

Creating a Frontend App

Option

Description

Rotation Mode

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

Part II: Layout & Content Blocks

Select the banners to include from the list of available banners.

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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.

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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.

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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.

Anchor Custom Title:

Enter a title. This title, or caption, is displayed when the user hovers over the link.

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

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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:

The most recently added products

New 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.

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

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.

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:

Step 2:

Complete Steps 1 – 3 

Choose the type of app.



Specify the page and location on the page, where it belongs.



Choose the template.

3. Click the Save button to save your settings.

Part II: Layout & Content Blocks

CHAPTER 5: Adding Dynamic Content

Creating a Frontend App

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

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 â&#x20AC;&#x153;Textureâ&#x20AC;? Theme

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

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

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â&#x20AC;&#x2122;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

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â&#x20AC;&#x2122;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.

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 â&#x20AC;&#x153;transactional emailsâ&#x20AC;? 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

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 â&#x20AC;&#x153;favicon.icoâ&#x20AC;? 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.

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

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

Magento Go Design Guide

CHAPTER 7: Customizing Your Theme

Step 1:

Changing Interface Text

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

CHAPTER 7: Customizing Your Theme

Step 2:

Changing Interface Text

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.

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!

4. Click the Save Config button to save your changes, and bring your store online.

Part III: Themes, Styles & More

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:

Text, links, and background

Heading:

Heading levels and page title

Header:

Logo image, and header border and background

Footer:

Footer border and background

Experiment with each of them to see the effects in your theme.

Theme Editor

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: ď&#x201A;§

Theme Name

ď&#x201A;§

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

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.

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â&#x20AC;&#x2122;s global settings for the following: Text:

Font, size, alignment, color, and line spacing

Links:

Font, size, and color for all link states: Default, Hover, Active, and Visited

Background:

Image, color, repeat pattern, and position

Body Settings â&#x20AC;&#x201C; 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

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

Size

Values: 

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: 

Not assigned



left



center



right

Color Line height

Values: 

Not assigned



0.8



0.9



1.0



1.1



1.2



1.3

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

Size

Values: 

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

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

Position

Values: 

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

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

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: 

Not assigned



hidden



dotted



dashed



solid



double



groove



ridge



inset



outset

Color Width

Values: 

Not assigned



None



1px



2px



3px



4px



5px

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

Upload a background image

Header background:

Select an image and color, and set the repeat pattern, and position

Header borders:

Set the, style, color, and width of borders

Header Settings â&#x20AC;&#x201C; 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

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:

Image, color, repeat pattern, and position

Footer borders:

Position, style, color, and width

CSS Example footer { background:#fff; border:1px solid #ccc;}

Footer Settings â&#x20AC;&#x201C; Border

Background Properties See Body Settings on page:

Border Properties See Headings Settings on page:

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â&#x20AC;&#x2122;re finished, click the Quit Preview button.

Previewing Themes

Part III: Themes, Styles & More

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

Magento Go Design Guide

CHAPTER 7: Customizing Your Theme

Using the Design Settings Editor

Troubleshooting If the changes donâ&#x20AC;&#x2122;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. ď&#x201A;§

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

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

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

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: ď&#x201A;§

Click the Reset button to the right of the image.

ď&#x201A;§

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.

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â&#x20AC;&#x2122;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

CHAPTER 8: Using the CSS Editor

Step 1:

Resizing Catalog Images

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.

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

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

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

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

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

True Type font



.otf

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.

Part III: Themes, Styles & More

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.

/* 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; }

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 â&#x20AC;&#x201C; 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

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â&#x20AC;&#x201D;you donâ&#x20AC;&#x2122;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:

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:

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.

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

Method 2:

Managing Your Font Assets

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: â&#x20AC;&#x153;Adding Dynamic Content,â&#x20AC;? on page 35.

Step 1:

Add a New Static Block

Step 2:

Create a New Frontend App

Step 3:

Choose Where it Goes

Step 4:

Verify that the Code Works

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

Step 2:

Managing Your Font Assets

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

Step 3:

Managing Your Font Assets

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â&#x20AC;&#x2122;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

109

Appendix A:

110

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.

Admin panel

Administrative panel; back office; private section of store where orders, catalog, content, and configurations are managed.

alt text

The text that is displayed in place of an image when the user is unable to view the image.

anchor text

The visible text that is anchored to another page or page section; the literal text of a hyperlink.

API

Application Program Interface: A software interface that lets third-party applications read and write to a system using programming language constructs or statements.

attribute

A characteristic or property of a product; anything that describes a product. Examples of product attributes include color, size, weight, and price.

authorization

To give a service permission to perform certain actions or to access resources.

average inventory cost

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.

banner

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.

Appendices

Appendix A: Glossary

Appendices

B2B

Business to Business: A type of business transaction between two business entities that are not the final consumers of the goods or services.

B2C

Business to Consumer: Business transactions between a business entity and a consumer.

batch processing

To perform a task or make a change to multiple items all at once, without manual repetition.

bounce rate

The percentage of visitors to your site that leave without viewing any other pages.

brand

A unique identity that defines a particular product or group of products.

breadcrumb

A navigation aid that helps the user to keep track of their location within your store.

brick and mortar

A retail business with a permanent physical location, as opposed to being entirely virtual.

broken link

A hyperlink that fails to send the user to its intended web page.

canonical URL

The canonical meta tag redirects search engines to the correct URL, when seemingly duplicate content is encountered on the server.

capture

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.

cardholder

A person who opens a credit card account and is authorized to make purchases.