MagentoGo-DesignGuide

NOTE

This document is subject to change without notice. Magento recommends that you check the Magento Go website to access the latest version, rather than printing this document.

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, Inc. Copyright © 2011 Magento, Inc.

Magento Go Design Guide iii

Table of Contents

Getting Started Designing Your Store............................................................... 1

Picking a Theme ......................................................................................................................................................................... 1

Adding Your Logo to Your Web Store................................................................................................................................. 4

Adding Your “Favicon” for Your Web Store ..................................................................................................................... 5

Turning Off the Free Shipping Message in the Header ................................................................................................ 7

Creating Your Own Home Page ............................................................................................................................................ 9

Adding a New Products List to Your Home Page ......................................................................................................... 11

Customizing Your Theme ................................................................................. 14

Customizing the Look and Feel of Your Theme from the Admin Panel .............................................................. 14

Customizing the Look and Feel of Your Theme Using the CSS Editor .................................................................. 15 Common CSS You Can Use in Your Theme ................................................................................................................................... 16

Customizing the Built-In Functionality/Blocks in Your Theme ............................................................................ 17

Adding Your Own Custom Content Blocks to Your Theme ...................................................................................... 19

Customizing the Text in Your Theme’s Interface ....................................................................................................... 22

Getting Started Designing Your Store

Magento Go Design Guide 1

Magento Go Design Guide

Your Magento Go store is driven by a powerful templating system that allows you to fully control the look and feel of your web store. To make it easy for you to make the changes you want, Magento Go provides a set of easy-to-use design editors that allow you to set up and customize much of your store right from the Admin Panel, without editing any code. But for more advanced web designers, you can also create custom CSS files to control your store’s formatting directly to achieve exactly the look you want. This Design Guide describes some of the basic “theming” tasks that everyone needs to do in the “Getting Started Designing Your Store” section and then moves on to some of the more advanced theming tasks you might want to take on in the “Customizing Your Theme” section.


One of the first things you’ll want to do when designing your Magento Go store is to pick a theme and to start customizing it to suit your brand and your business. You’ll also want to customize the home page and begin exploring some of what you can do there. You can also use the “Start My Store” setup wizard to help you with these tasks. This section walks you through the following common tasks to help you get started designing your store:

Picking a theme

Adding your logo to your theme

Adding your favicon to your store

Turning off the free shipping message in the theme header

Creating your own home page

Adding a new products list to your home page This section doesn’t go into deep detail about each of these tasks, just enough to point you in the right direction. As you work with the Magento Go design editors, CMS pages, static blocks, banners and frontend App feel free to explore more of the options available in each and refer to other sections of this guide for more details.

Picking a Theme

To get started making your Magento Go web store your own, start by picking a theme from our Theme library in the Theme Editor. Remember you can customize the look and feel, colors, fonts, etc. later, but by starting with one of the built-in themes you’ll be starting with a design that’s already been optimized to help you sell and work well on the Magento Go platform.


2 Magento Go Design Guide

1. Look at all of the available themes.

In the Admin Panel, go to the Design menu and select the Theme Editor option.

You’ll see all of the available themes listed there as thumbnail images Page through and find the ones that are most appealing to you.

2. Preview the one(s) you like.

Under any theme’s thumbnail image, click the Preview button to see a demo version of that theme.

Previewing a theme opens a new Preview window with the contents of your store shown in that theme. The theme you’re previewing isn’t actually applied to your website yet.

From the Preview window, you can preview other themes by selecting them by name from the drop-down list in the upper left of the preview toolbar at the top of the window. Or you can go back to the Theme Editor and Library and click the

Preview button under the thumbnail of the next theme you’d like to see.

3. Duplicate your selected theme.



Once you find a theme you like as a starting point, in the Theme Editor, under your selected theme’s thumbnail image, click the Duplicate button to create a copy of this theme that you can customize for your store.

Duplicating a theme puts you into the Theme Customization Editor and prompts you for some basic information.

Provide a new name and description that will be meaningful to you later if you have more than one theme.

Select the store(s) to which this theme will be applied if you have more than one store. You can add a theme thumbnail later, once it’s more customized.

Click the Save button in the upper-right of the editor to save your theme copy.

4. Apply your new theme to your web store.

In the Theme Editor your duplicated theme will show up as a new theme in the left column under the heading “My Customization.” Under your duplicated theme’s

thumbnail image, click the Apply button to apply that theme to your web store.

Applying a theme changes the frontend website instantly to use that theme. The currently applied theme

is shown in the upper left spot in the Theme Editor.

TIP: You don’t have to “Apply” your new theme

right away. While you’re working on your web store design you can just use the



“Preview” button to see what your changes look like without changing the design of your live website. This is especially helpful if your web store is already live and open for business.

Adding Your Logo to Your Web Store

Your store logo is displayed in the upper-left of the header area of your Magento Go website. It serves as branding for your store as well as a clickable link back to the home page.

1. Open the Theme Editor and select your theme.

In the Admin Panel, go to the Design menu and select the Theme Editor option.

Your store’s custom theme should be shown in the position in the upper left of the list. If it’s not, follow the directions in “Picking a Theme” to create a starting theme that you can begin to modify to match your brand and needs.

2. Use the Theme Customization Editor to add your logo.

Under your theme’s thumbnail image, click the Customize button to go to the Theme Customization Editor.

Once in the Theme Customization Editor, select the Design Settings Editor tab on the left.

Click on the Header Settings bar to expand that panel.

In the Logo pane, click the Browse… button to locate your logo on your computer and upload it to Magento Go for this theme.

Click on the Save or Save and Continue Edit button in the upper right to upload your logo and save your changes.



3. Preview your changes.

Click the Preview button in the upper right to see what your logo looks like in this theme.

Your logo now appears in the upper left corner of your website in Preview mode.

TROUBLESHOOTING TIPS: If your logo is pushing the rest of the design and header around, it may be too large. You can right-click on the original logo image in your browser and select the “Image properties” option to see what the pixel dimensions of that image are and resize your logo accordingly and re-upload it. If you don’t want to change the size of your logo and like it large, skip to the section on “Modifying your CSS” for tips on how to change the CSS styles in the header to accommodate your logo.

Adding Your “Favicon” for Your Web Store

The favicon (or favorite icon) is the little icon/image that appears in your customers browsers next to the URL for your website and in the tab at the top of the window when they visit.

By default, it’s the Magento icon for Magento Go stores, but like everything else, you can change that.



1. Create your favicon.

Favicons are very small images that are generally 16x16 pixels or 32x32 pixels in size. While some browsers support additional file types as favicons, the safest format is a .ico file. Many free favicon converter tools are available online to convert other, more common image types, like .pngs, .gifs, and .jpegs to the .ico format. Magento does not convert an image from other file formats to an appropriate one; therefore, the store administration needs to perform the file conversion prior to uploading an image file.

Create your 16x16 or 32x32 pixel image in the image editor of your choice.

Use one of the available online tools to convert that to the .ico format that browsers require. (Google search for “favicon converter” to find one you like.) Move the resulting .ico file to your computer so you can upload it to the Magento Go servers. Your file must be named favicon.ico.

2. Edit the configuration for your web store.

In the Admin Panel, go to the System menu and select the Configuration option.

Select the Design tab in the left column.

Click on the HTML Head bar to expand that panel.

In the Favicon Icon field, click the Browse… button to locate your favicon on your computer and upload it to Magento Go for this theme.

Click on the Save Config button in the upper right to upload your favicon and save your changes.

3. Review your changes.

Your new favicon should be immediately visible when you click the Refresh button on your frontend web store.



Turning Off the Free Shipping Message in the Header

Many of the starting themes include a FREE SHIPPING banner in the header area. If your starting theme does not include this banner, you can skip this section. Where it’s included, the FREE SHIPPING banner is included as a placeholder and as an example of how you can use that header space to display messages to your customers. For most stores, though, you’ll want to turn that off and then later fill it with a message appropriate to your customers and the promotions you’re running. That FREE SHIPPING message isn’t really part of the theme, it’s actually part of the content management system for your Magento Go web store. So, let’s turn it off without removing it, so that you can fill it with something else later if you ever want.

1. Edit the “Static Blocks” for your web store.

In the Admin Panel, go to the CMS menu and select the Static Blocks option.

You’ll see a list of all of the “static blocks” that are currently defined for your webstore.

In Magento, static blocks are just a way to allow you to create pieces of content (text, html, images, or any combination) that can be placed throughout your website. Because the contents of these static blocks is defined in the CMS and not hard-coded into the theme, it means you can easily change this any time once the web store is live.

The static block that contains the FREE SHIPPING message is called “Top Callout.” Select it from the list.



You’ll see the Static Block Editor that contains basic information about the static block as well as the actual contents of the block

in the “Content” field.

To turn off this block without deleting it, set the “Status” field to “Disabled.”

Click on the Save Block or Save and Continue Edit button in the upper right to save your changes.


Go back to the Theme Editor (ADMIN: Design> Theme Editor) and click the Preview button for your theme or go back to the Preview window and refresh your browser window to see your change.

The FREE SHIPPING message in the header area is now turned off.

TIP: Once your store is live and you are running promotions or have other news you want to share with all of your site visitors, you can use the same static block and enter your content in the “Content” field. When you “Enable” the static block, your new content will show up again here in the header space.



Creating Your Own Home Page

Your home page is really your shop window. It’s the first thing most visitors to your web store will see and should showcase both your brand and your merchandise. In Magento Go, you have full control of your home page content and can lay it out any way you want.

1. Create a new CMS page that will be your home page.

In the Admin Panel, go to the CMS menu and select the Pages submenu and the Manage Content option.

You’ll see a list of all of the “pages” that are currently defined for your web store.

Most of these are here initially just to provide you with examples of different page types you might want in your web store.

The home page in the default store when you

first start is called “Home page” with a URL key of “home.” It doesn’t need to be called this, but this makes it easy to find in the list. You can simply edit this page or create a new page that will become your home page. (In this example, we’ll create a new page.)

Click the Add New Page button to create a new CMS page.

You’ll see the Page Editor.

2. Edit your a new CMS page to reflect your desired home page design.

Please see the section “Working with Content Pages” for fuller information on creating and editing CMS pages in Magento Go. This is just a very simple and brief example.



In the Page Information tab, give your new home page a good Title and URL key

(these are important for SEO purposes). Fill in all other required information.

In the Content tab, use the editing window there to insert your home page content. Text, images, HTML and CSS are all allowed. You can also insert Magento frontend Apps into the content area.

In the Design tab, select the page template to be used for this page.

In the Meta Data tab, provide a good description for this page that can be used by search engines.

Click on the Save Page or Save and Continue Edit button in the upper right to save your changes.


To preview the content page you’re working on, go to the Preview window and modify the URL to have the URL key for this page at the end of it. So if your URL is mystore.com and the URL key you created for this page is us-home, then URL for the content page you’re creating will be mystore.com/us-home.

Continue to edit your page and check your work using the preview window and the direct URL you identified above.

4. Tell Magento to use your new page your store’s home page.

Magento can use any page as a home page, you can tell Magento Go which page to use as its home page in the System> Configuration area.

Go to the System menu and select the Configuration submenu.

Once in the Configuration area, select the Web tab on the left.



Click on the Default Pages bar to expand that panel.

In the CMS Home Page field, select your new CMS page from the drop-down list (the Title of each page in the CMS is shown in this list).

Click on the Save Config button in the upper right to save your changes.

TIP: If you have more than one store, remember to select the store to which you want to assign your page as the home page from the Current Configuration Scope selector in the upper left before you select a page in the CMS Home Page field. If you have only one store or if you want to apply this change to all your stores, you can leave the selector on its default value of Default Config.

Adding a New Products List to Your Home Page

You can use Magento frontend Apps to place a wide variety of content on your CMS pages. One of the most popular frontend Apps for eCommerce store is a list of new products. (This frontend App may be turned on in your store by default, if so, you can skip to the next section.)

1. Create a frontend App instance of the new products frontend App.

In the Admin Panel, go to the CMS menu and select the Frontend Apps option.

You’ll see a list of all of the frontend Apps that are currently defined for your web store.



Click the Add New Frontend App Instance button to create a new frontend App.

You’ll see the Frontend App Instance Editor.

Select Catalog New Products List as the frontend App Type.

Click on the Continue button to continue.

Give your new frontend App instance a name/title and indicate on which of your store(s) it should appear.

2. Add a new products frontend App to the content area of the home page.

Click the Add Layout Update button to assign your frontend App to the page(s) on which you want it to appear.

To make it appear on the home page, set the Display On field to Specified Page. Then, select CMS Home Page as the Page and Main Content Area as the Block Reference.

Click on the Save or Save and Continue Edit button in the upper right to save your frontend App.

If desired, click on the Frontend App Options tab on the left to set additional display options for this frontend App.




Go back to the Theme Editor (ADMIN: Design> Theme Editor) and click the Preview button for your theme or go back to the Preview window and refresh your browser window to see your change.

Customizing Your Theme



Once you’ve selected a starting theme, you can begin to really customize that theme to match your brand and business needs. In the previous section, we added your logo and home page. In this section, you’ll learn how to take advantage of Magento Go’s design editors to completely change the look and feel of your store and truly make it your own. This section walks you through the following common theme customization tasks:

Using the Design Editor to customize your store’s page default formatting

Using the CSS Editor to customize your store’s CSS styling

Using the Layout Editor to customize your store’s blocks and functionality

Using Static Blocks and Frontend Apps to create your own blocks

Using the Theme Text Editor to change the text and heading in your store’s theme TIP: As you work on further customizing your theme, be sure to save your work periodically. When you get your theme to a good point, if you duplicate it at that point, you will essentially be making a back up copy that you can revert back to in case something goes wrong.

Customizing the Look and Feel of Your Theme from the Admin Panel

The Theme Editor allows you to dramatically customize the look and feel of your theme. Below is a list of the aspects of your theme design you can customize without editing any code. Experiment with each of them to see the effect in your design.

In the Admin Panel, go to the Design menu and select the Theme Editor.

Select the theme you want to customize for the list of Available Themes by clicking the Customize button.

Select the Design Setting Editor tab from the tabs at the left.

In the Body Settings panel, you can modify your web store’s global settings for:

Font (font face, size, color, alignment and line spacing)

Links (font face, size, color for all link states—default, hover, active and visited)

Page background image and/or color In the Heading Settings panel, you can modify your web store’s treatment of text headings:

H1-H6 headings (font face, size, color, background and borders)

Page title divs (font face, size, color, background and borders) In the Header Settings panel, you can modify your web store’s treatment of the header section of each page:

Logo image Header background image and/or color Header borders



In the Footer Settings panel, you can modify your web store’s treatment of the footer section of each page:

Footer background image and/or color Footer borders

Customizing the Look and Feel of Your Theme Using the CSS Editor

If you’re comfortable working with and editing CSS (cascading style sheets—which control the formatting on most modern websites), you can further customize the look and feel of your web 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 the ultimate control on all the styling of all of the elements on your web store. This section will not teach you how to use CSS, please see one of the many excellent online tutorials or books on learning and using CSS if you are not familiar with it. In addition, the Firebug plug-in for the Firefox browser is an invaluable tool for working with existing CSS files and determining what to change in them. It can be downloaded directly from the Firefox website.

In the Admin Panel, go to the Design menu and select the Theme Editor.

Select the theme you want to customize for the list of Available Themes by clicking the Customize button.

Select the CSS Editor tab from the tabs at the left.

In the View Theme CSS panel, you can click into any of the CSS files used in your theme to see all the styles set up there. You can’t edit these theme files directly. In the Custom CSS panel, you can override existing CSS styles or provide new ones for your theme. Any custom CSS you provide overrides the default CSS for a theme. 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 will turn off the “Checkout” link in the header:

.top-link-checkout { display: none; }

The CSS styles entered in the Edit custom.css field are processed last and will override styles uploaded as a custom.css file and in the default theme css files.



You can also create a new CSS file with just the CSS definitions you want to override in it and upload it using the Upload custom.css file field. (You don’t have to include all of the default theme CSS definitions for your theme, just the ones you want to change.) Click the Browse… button to find your CSS file on your machine and upload it to the Magento Go server. If you want to have background images or other assets added to your theme using your custom CSS, you can upload those images using the Images Assets area. Click the Manage button to use Magento Go’s standard image uploader to upload your images to the Magento Go server. When you upload images to use in your CSS styles, it’s important to note that their specific location on the CDN (content delivery network) server could change, so always use relative paths in your CSS when referencing them. The default relative path is:

../css_editor_images/imageName In your CSS, this would look like:

.styleName { background:url(../css_editor_images/imageName.gif) no-repeat }

If you’ve created a subdirectory for your images the correct relative path will be of the following form and you should adjust your CSS references to match:

../css_editor_images/subdirName/imageName

Common CSS You Can Use in Your Theme

Below are some examples of CSS customizations you can use to make common modifications to the Media theme, which has been used throughout this chapter. Enter styles like the following into your Edit custom.css field to see what they do:

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

Each theme is a little different, so these are only examples. Your specific style values will depend on your theme. Use the Firefox plug-in Firebug to help you determine the specific div names and style values to provide for your theme.



Customizing the Built-In Functionality/Blocks in Your Theme

In Magento Go, each of the main pieces of functionality in your store are displayed on your website in “blocks.” Some of the blocks are standard and cannot be removed, but many of the blocks are optional and you can choose to include them in your web store or not. Some common Magneto go functional blocks include:

Poll

Popular tags

Product comparison list

Recently viewed products

Wishlist summary

Order summary

Paypal logo This section describes how to move or remove blocks in your web store’s theme.

1. Use the Layout Editor to remove, move and add Magento blocks.

In the Admin Panel, go to the Design menu and select the Layout Editor.

The Layout Editor pops up a new Preview window with a Layout toolbar at the top.

In the Preview window, “blocks” of content that you can move or remove are outlined in dotted red.

To move a block to place on the page, just drag and drop that

block to its new location.

To remove a block from your theme, click on the X in the upper right of any block.

To add a block, in the Layout toolbar at the top of the Preview window, click the [Add Block] button to see a list of other “blocks” of content that you can add to your store. Click on the [Add] button next to any that you want to add. The block will be placed in the Preview window and you can drag and drop it where you want it to be.



Only certain blocks are available on various page types, so visit each of your major pages and add the blocks you want.

When you are finished adding, moving and removing blocks, click on the

[ Apply Changes] button in the Layout toolbar at the top of the Preview window to save your changes.


Go back to the Theme Editor (ADMIN: Design> Theme Editor) and click the Preview button for your theme or go back to the Preview window and refresh

your browser window to see your change.

The blocks you’ve moved now show up in their new locations.

TROUBLESHOOTING TIP: After you make and apply several layout changes, if you don’t see your changes right away when you refresh the frontend of your web store, close all of the preview windows and then in ADMIN: Design> Theme Editor open a fresh Preview window by clicking the Preview button for your theme.



Adding Your Own Custom Content Blocks to Your Theme

The Layout Editor allows you to turn on and off and move around some of Magento Go’s blocks of built-in functionality. You can also add your own custom content blocks to your web store using Magneto frontend Apps. Frontend Apps aren’t really part of the theme, because a single frontend App could be used in multiple stores and themes if you want. But since we’re working with blocks here, this is a good place to remind you of them. Please see the section on “Working with Frontend Apps” for fuller information about Magento Go’s frontend Apps.

1. Create your content block(s).

In the Admin Panel, go to the CMS menu and select the Static Blocks option.

You’ll see a list of all of the static blocks that are currently defined for your web store.

In Magento, static blocks are just another way to allow you to create pieces of content (text, html, images, or any combination) that can be placed throughout your website. They are then placed on the pages on which you want them to appear using “frontend Apps.” Because the contents of these static blocks is defined in the CMS and not hard-coded into the theme, it means you can easily change them once the web store is live without having to edit your theme.



Click the Add New Block button to create a new Static Block.

You’ll see the Block Editor.

Enter the desired content for this block. Static blocks can contain text, graphics,

HTML and/or CSS.

Click on the Save Block or Save and Continue Edit button in the upper right to save your changes.

2. Create frontend App(s) to place your static block(s) on your pages.

Please see the section “Working with Content Pages” for fuller information on creating and editing CMS pages in Magento Go. This is just a very simple and brief example.

In the Admin Panel, go to the CMS menu and select the Frontend Apps option.

You’ll see a list of all of the frontend Apps that are currently defined for your web store.



Click the Add New Frontend App Instance button to create a new frontend App.

You’ll see the Frontend App Instance Editor.

Select CMS Static Block as the Frontend App Type.

Click on the Continue button to continue.

Give your new frontend App instance a name/title and indicate on which of your store(s) it should appear.

Click the Add Layout Update button to assign your frontend App to the page(s) on which you want it to appear.

To make it appear on all of your pages in the left column, set the Display On field to All Pages. Then, select Left Column as the Block Reference.

Click on the Frontend App Options tab on the left to assign the correct static block to this frontend App.

Click on the Save or Save and Continue Edit button in the upper right to save your frontend App.




Go back to the Theme Editor (ADMIN: Design> Theme Editor) and click the Preview button for your theme or go back to the Preview window and refresh

your browser window to see your change.

The new static block is now visible at the bottom of the left column.

4. Move your static block/frontend App if you want to.

In the Admin Panel, go to the Design menu and select the Layout Editor.

Drag and drop it to whatever position you want it to be in in that column.

TROUBLESHOOTING TIP: After you make and apply several layout changes, if you don’t see your changes right away when you refresh the frontend of your web store, close all of the preview windows and then in ADMIN: Design> Theme Editor open a fresh Preview window by clicking the Preview button for your theme.

Customizing the Text in Your Theme’s Interface

In Magento Go, you can easily change the text of any of the headers or other interface elements without having to edit the theme files directly. The Theme Text Editor can be used to find all of the pre-defined text in a theme and then allows you to change whatever you want.

1. Use the Theme Text Editor to edit or translate text in your theme’s interface.



In the Admin Panel, go to the Design menu and select the Theme Text Editor.

The Theme Text Editor pops up a new Preview window with a Text Edit toolbar at the top.

In the Preview window, the chunks of text that are part of the theme and you can be changed are outlined in dotted red.

To change a “chunk” of text in your theme, put your cursor over any of the areas outlined in red.

A book icon appears on the left side of the dotted red outline.

Click on the icon to open the text window for

the chunk of text. Enter your modified text here and click the checkmark.

Your changed text appears immediately.

TIP: When translating a website into a different language, you can use the Theme Text Editor to translate all of the text in the theme for that website, even if the theme wasn’t originally designed in that language.

Date post:	04-Sep-2014
Category:	Documents
Upload:	pferrei
View:	29 times
Download:	0 times

MagentoGo-DesignGuide

Documents