Crisp and Clean for Magento

Crisp and CleanMagento Theme Instructions

Version 1.4Last Updated:May 7, 2011

gothemeteam.com

gothemeteam.com Crisp and Clean Magento Theme Instructions

Table of Contents

2

Installation & Configuration.......................3 System Requirements ................................3 Uploading Crisp and Clean.........................4

Homepage...................................................6 Setting the Page Layout.............................7 Adding Content..........................................9 Main Slideshow........................................12 Main Slideshow Controls..........................15 Featured Products....................................16 Featured Products Controls......................19

Footer Promotion .....................................20

Footer Links..............................................23

Social Links...............................................27

Checkout Progress Security ................... 29

iPad Version..............................................31 iPad Version Features...............................31

Activating the iPad Version .......................35 Setting Up the Homepage........................36

Upgrades & CSS Customization .............38 Using Magento ......................................... 39 FAQs ..........................................................42

Additional Help .........................................47

gothemeteam.com Crisp and Clean Magento Theme Instructions

Installation & Configuration

Thank you for purchasing the Crisp and Clean Magento theme!

In this document, you will find step-by-step instructions for installing and using Crisp and Clean and its optional

iPad version.

System Requirements

Crisp and Clean requires Magento Community Edition 1.5.1.0 and PHP 5.2.13 or newer. The theme does not support any other versions of the Community Edition and does not support Magento Enterprise Edition. Please visit www.magentocommerce.com/download to download the correct version of Magento.

For help with installing Magento, please refer to the following links:

• Magento System Requirements

• Server Compatibility Check

• Magento Installation Guide

3

gothemeteam.com Crisp and Clean Magento Theme Instructions

Installation & Configuration

Uploading Crisp and Clean

Before you begin the Crisp and Clean installation process, we recommend backing up your Magento installation

and database.

To upload Crisp and Clean to Magento:

1. Unzip the downloaded crispandclean folder.

2. Using an FTP client, copy the app and skin folders to the Magento software’s root directory. If you are working

with a Mac, please make sure you are merging the new folders with Magento and not replacing the Magento directory.

3. Log in to the Magento admin panel.

4. Go to System > Configuration. Click Design on the left-hand menu.

5. Under Themes, find the Default field and type crispandclean.

4

gothemeteam.com Crisp and Clean Magento Theme Instructions

Installation & Configuration

6. Scroll down to the Header section. In the Logo Image Scr field, type images/logo.gif.

7. Scroll back to the top of the page and click the Save Config button.

8. Next, go to System > Cache Management from the top navigation menu. You will need to clear the store cache and all cookies.

9. Click Select All on the left side of the page. On the right side, select Refresh in the Actions drop-down menu

and click the Submit button.

10. Finally, click the following buttons (in orange): Flush Magento Cache, Flush Cache Storage, Flush

JavaScript/CSS Cache, and Flush Catalog Images Cache (optional).

Now you are ready to add content to your website.

5

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

This section will help you create a Crisp and Clean homepage:

6Figure 1

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Setting the Page Layout

1. Select the homepage from CMS > Pages.

2. If you haven’t already, enter a name for the page in Page Title and a slug in the URL Key field.

3. Select Enabled in the Status drop-down menu.

4. Click the Save Page button.

7

Figure 2a

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

5. Select Design from the left-hand menu. The following page will appear:

6. Select 1 column from the Layout drop-down menu.

7. In the Layout Update XML box, either remove the existing content or add the following comment tag around the existing content:

<!--<reference name="content"> <block type="catalog/product_new" (existing HTML code is here) -->

8. Click the Save Page button.

8

Figure 2b

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Adding Content

To add content to your homepage:

1. Under CMS > Pages, click on the homepage.

2. In the left-hand menu, click Content.

3. Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor (see Figure 3).

4. In the content box, copy and paste the HTML code found on the following pages.

5. Click the Save Page button.

9Figure 3

Enter HTML code here.

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage HTML code:

<div id="slideshow"><ul><li><div class="main"><a href="{{store direct_url="chairs/montauk-a.html"}}"><img src="{{skin url="images/sample/name1-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name1-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name1-3.jpg"}}" alt="" width="310" height="190" /></div></li><li><div class="main"><a href="{{store direct_url="chairs/adirondack-c.html"}}"><img src="{{skinurl="images/sample/name2-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name2-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name2-3.jpg"}}" alt="" width="310" height="190" /></div></li><li><div class="main"><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}"><img src="{{skinurl="images/sample/name3-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name3-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name3-3.jpg"}}" alt="" width="310" height="190" /></div></li><li><div class="main"><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}"><img src="{{skin url="images/sample/name3-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name3-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name3-3.jpg"}}" alt="" width="310" height="190" /></div></li><li><div class="main"><a href="{{store direct_url="tables-1/table-c.html"}}"><img src="{{skin url="images/sample/name2-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name2-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name2-3.jpg"}}" alt="" width="310" height="190" /></div></li><li><div class="main"><a href="{{store direct_url="chairs/montauk-b.html"}}"><img src="{{skin url="images/sample/name3-1.jpg"}}" alt="" width="630" height="400" /></a></div><div class="second"><img src="{{skin url="images/sample/name3-2.jpg"}}" alt="" width="310" height="190" /></div><div class="third"><img src="{{skin url="images/sample/name3-3.jpg"}}" alt="" width="310" height="190" /></div></li></ul><div class="overlay"><a href="#"><span><!--Next--></span></a></div></div><div id="slideshow-controls"><!--&nbsp--></div><div id="featured"><div class="half left"><h3>Featured Products</h3><ul><li><p><a href="{{store direct_url="chairs/montauk-a.html"}}"><img src="{{skin url="images/sample/photo1.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="chairs/montauk-a.html"}}">MONTAUK A</a></p></li><li><p><a href="{{store direct_url="chairs/adirondack-c.html"}}"><img src="{{skin url="images/sample/photo2.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="chairs/adirondack-c.html"}}">ADIRONDACK C</a></p></li>

10

Homepage

gothemeteam.com Crisp and Clean Magento Theme Instructions

<li><p><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}"><img src="{{skin url="images/sample/photo5.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}">PATIO SET BANANA</a></p></li><li><p><a href="{{store direct_url="tables-1/table-c.html"}}"><img src="{{skin url="images/sample/photo6.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="tables-1/table-c.html"}}">TABLE C</a></p></li><li><p><a href="{{store direct_url="chairs/montauk-b.html"}}"><img src="{{skin url="images/sample/photo9.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="chairs/montauk-b.html"}}">MONTAUK B</a></p></li><li><p><a href="{{store direct_url="patio-sets/patio-set-carrot.html"}}"><img src="{{skin url="images/sample/photo10.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="patio-sets/patio-set-carrot.html"}}">PATIO SET CARROT</a></p></li></ul></div><div class="half right"><h3>Summer Sale Items</h3><ul><li><p><a href="{{store direct_url="chairs/montauk-c.html"}}"><img src="{{skin url="images/sample/photo3.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="chairs/montauk-c.html"}}">MONTAUK C</a></p></li><li><p><a href="{{store direct_url="tables-1/table-a.html"}}"><img src="{{skin url="images/sample/photo4.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="tables-1/table-a.html"}}">TABLE A</a></p></li><li><p><a href="{{store direct_url="patio-sets/patio-set-a-41.html"}}"><img src="{{skin url="images/sample/photo7.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="patio-sets/patio-set-a-41.html"}}">PATIO SET APPLE</a></p></li><li><p><a href="{{store direct_url="styles/zappy.html"}}"><img src="{{skin url="images/sample/photo8.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="styles/zappy.html"}}">ZAPPY</a></p></li><li><p><a href="{{store direct_url="chairs/adirondack-a.html"}}"><img src="{{skin url="images/sample/photo11.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="chairs/adirondack-a.html"}}">ADIRONDACK A</a></p></li><li><p><a href="{{store direct_url="accessories/lighting-b.html"}}"><img src="{{skin url="images/sample/photo12.jpg"}}" alt="" /></a></p><p><a href="{{store direct_url="accessories/lighting-b.html"}}">LIGHTING B</a></p></li></ul></div></div><div id="controls"><div class="btn left"><a class="prev" href="#">Prev</a></div><div class="btn right"><a class="next" href="#">Next</a></div></div>

11

Homepage

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Now let’s examine the code by breaking it down into the four different sections of the page: Main Slideshow, Main Slideshow Controls, Featured Products, and Featured Products Controls.

Main Slideshow: <div id="slideshow">

The main slideshow rotates groups of three images at a time. Lines 3-7 in the sample code below control one group of images (also see Figure 4 on the next page). This code will display five groups of images, but you may have as many groups as you want.

1 <div id="slideshow">

2 <ul>

3 <li>

4 <div class="main"><a href="{{store direct_url="chairs/montauk-a.html"}}"><img src="{{skin url="images/ sample/name1-1.jpg"}}" alt="" width="630" height="400" /></a></div>

5 <div class="second"><img src="{{skin url="images/sample/name1-2.jpg"}}" alt="" width="310" height="190" /></div>

6 <div class="third"><img src="{{skin url="images/sample/name1-3.jpg"}}" alt="" width="310" height="190" / ></div>

7 </li>

12

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Each photo can be linked to a page with the item’s details. To link the photo to another page, enter the page’s URL

on line 4 in store direct_url="". Type the URL for each image in skin url="". You can add the image’s alt

attribute in alt="".

The dimensions for each image are set in width="" height="". The larger image on the left is 630 x 400 and the smaller images on the right are 310 x 190.

13

Figure 4

Line 4

Line 5

Line 6

Please Note: The slideshow images’ dimensions can be changed, but CSS and JavaScript must be changed accordingly.

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

The code in lines 3-7 is used for each group of images. After you have entered the code for each group, end the slideshow code with the following:

</ul> <div class="overlay"><a href="#"><span><!--Next--></span></a></div> </div>

This code provides the framework for the slideshow images.

14

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Main Slideshow Controls: <div id="slideshow-controls">

Below the slideshow is a series of buttons that control which set of images appear (Figure 5). The slideshow is set to run automatically by default, but you can click the buttons to skip to a set of images.

The code for this controller should be entered after the slideshow code as follows:

<div id="slideshow-controls"><!--&nbsp--></div>

15

Figure 5

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Featured Products: <div id="featured">

Below the slideshow are two sliding image galleries that can be used to display featured products, sale items, a new collection, etc. Images are viewed by clicking the arrows on either side of the images.

1 <div id="featured">

2 <div class="half left">

3 <h3>Featured Products</h3>

4 <ul>

5 <li>

6 <p><a href="{{store direct_url="chairs/montauk-a.html"}}"><img src="{{skin url="images/sample/ photo1.jpg"}}" alt="" /></a></p>

7 <p><a href="{{store direct_url="chairs/montauk-a.html"}}">MONTAUK A</a></p>

8 </li>

Line 2 indicates that the code is for the image gallery on the left side. The header for the section is entered on line 3.

Line 6 controls the image, which is also a hyperlink. Enter the linking page’s URL in store direct_url="" and

the image’s URL in skin url="". You can add the image’s alt attribute in alt="".

16

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Line 7 controls the product name below the image, which can also be a hyperlink to the product’s details. Enter the

linking page’s URL in store direct_url="" and the text where MONTAUK A is located in the sample code.

Use the code in lines 5-8 for each image.

17

Figure 6

Line 6

Line 7

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

After you enter the code for all the images and descriptions in the left-hand gallery, end the code with:

</ul> </div>

The right-hand gallery uses the exact same code, but begins with the following line:

<div class="half right">

There is no limit on how many images you display in each gallery.

18

gothemeteam.com Crisp and Clean Magento Theme Instructions

Homepage

Featured Products Controls: <div id="controls">

Finally, the last bit of code controls the reversing arrows on either side of the featured products gallery (see Figure 7). When the end of a gallery is reached, the arrow points in the opposite direction and the images are viewed in reverse order.

1 <div id="controls">

2 <div class="btn left"><a class="prev" href="#">Prev</a></div>

3 <div class="btn right"><a class="next" href="#">Next</a></div>

4 </div>

Line 2 controls the arrow on the left and line 3 controls the arrow on the right.

19

Figure 7

Line 2 Line 3

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Promotion

At the bottom of every page, just above the footer, is an area where you can advertise a special promotion and a link to the promotion’s details. This area is a static block.

To add content to this area:

1. Go to CMS > Static Blocks from the top navigation menu.

2. On the right side of the page, click the Add New Block button.

20

Figure 8a

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Promotion

You will come to the following page:

3. In the Block Title field, type text describing your special offer.

4. In the Identifier field, type footer_prom. This is how it will be listed on the Static Blocks page.

5. Select Enabled from the Status drop-down menu.

21

Figure 8b

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Promotion

6. Click the Show / Hide Editor button to leave WYSIWYG mode.

7. In the Content box, enter the following code:

<div class="prom">50% Off Select Items Until Tomorrow <a href="#">Learn More &raquo;</a></div>

The text after <div class="prom"> will appear as the main promotion text and the text after <a href="#">

will appear as the smaller hyperlink text (see page 20, Figure 8a).

22

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Links

The footer is located at the very bottom of the webpage and is made up of four columns. This area is also a static block.

To add content to the footer:

1. Go to CMS > Static Block. Select Footer Links from the list.

23

Figure 9a

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Links

You will come the following screen:

2. Enter a title in Block Title. The title is only used in the admin panel and will not appear on the website.

3. In the Identifier field, type footer_links.

4. Select Enabled in the Status drop-down menu.

24

Figure 9b

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Links

5. In the Content box, enter the following code:

1 <ul>2 <li class="first">INFORMATION</li>3 <li><a href="{{store direct_url="about-us"}}">About Crisp and Clean Co.</a></li>4 <li><a href="{{store direct_url="contacts"}}">Contact Us</a></li>

5 <li><a href="#">Terms &amp; Conditions</a></li>6 <li><a href="#">Shipping &amp; Returns</a></li>7 <li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>8 <li><a href="#">Stores and Locations</a></li>9 </ul>10 <ul>

11 <li class="first">CATEGORIES</li>12 {{block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"}} 13 </ul>14 <ul>15 <li class="first">LEARN</li>

16 <li><a href="#">In the News</a></li>17 <li><a href="#">Crisp and Clean Co. Blog</a></li>18 </ul>

6. Click the Save Block button.

25

gothemeteam.com Crisp and Clean Magento Theme Instructions

Footer Links

Lines 2, 11 and 15 contain code for each column’s header.

Lines 3 and 4 are examples of code for hyperlink text. Enter the linking page’s slug in store direct_url="" and

the hyperlink’s text before </a></li>. Not all the text in this sample code is linked to other pages. Please modify

the code to fit your needs.

The code on line 12 pulls the links for the Categories section from the top navigation menu.

To change the contact information in the footer below the social links:

1. In the top navigation menu, go to System > Configuration. Under General on the left-hand menu, select Design.

2. Scroll down to the Footer section in the main work area. In the Copyright field, enter the following code, replacing the sample information with your company’s information:

<p><strong>Crisp and Clean Corporation, Inc.</strong></p> <p>544 Oenoke Ridge<br /> New Canaan, CT 06480</p>

<p><a href="http://www.worryfreelabs.com">http://www.worryfreelabs.com</a><br /> Toll Free: (800) 555-1212</p>

26

gothemeteam.com Crisp and Clean Magento Theme Instructions

Social Links

Social Links consist of a series of icons linking to your different social networking accounts (e.g. Facebook, Twitter, YouTube and your RSS feed).

To add social links to your website:

1. Go to CMS > Static Blocks. Select Social Links. You will come to the following screen:

27

Figure 10a

Figure 10b

gothemeteam.com Crisp and Clean Magento Theme Instructions

Social Links

2. In the Content box, enter the following code:

1 <h3>FOLLOW US</h3>2 <ul>3 <li><a href="#"><img src="{{skin url="images/logo-facebook.gif"}}" alt="Follow us on Facebook" /></a> 4 </li>5 <li><a href="#"><img src="{{skin url="images/logo-twitter.gif"}}" alt="Follow us on Twitter" /></a></li>6 <li><a href="#"><img src="{{skin url="images/logo-youtube.gif"}}" alt="Follow us on Youtube" /></a></li>

7 <li><a href="#"><img src="{{skin url="images/logo-rss.gif"}}" alt="rss" /></a></li>8 </ul>

Enter a header that will appear above the social links in line 1.

Lines 3-7 control each icon and their link. You can add or remove as many as you need.

28

gothemeteam.com Crisp and Clean Magento Theme Instructions

Checkout Progress Security

Adding an SSL seal to your checkout pages assures the customer your website is secure. This area is a static block.

To add an SSL seal:

1. Go to CMS > Static Blocks. Click the Add New Block button. You will come to the following screen:

29

Figure 11

gothemeteam.com Crisp and Clean Magento Theme Instructions

Checkout Progress Security

2. In the Block Title field, type Checkout Progress Security.

3. In the Identifier field, type checkout_progress_security.

4. Select Enabled in the Status drop-down menu.

5. Click the Show / Hide Editor button to leave WYSIWYG mode. Enter the following code in the Content box:

<div class="block secure-by"> <div class="block-content"><img src="{{skin url="images/geotrust.gif"}}" alt="GeoTrust" width="115" height="55" />

<img src="{{skin url="images/authorize.gif"}}" alt="Authorize.net" width="88" height="70" /> </div> </div>

6. Click the Save Block button.

30

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

iPad Version Features

There is an optional iPad version of Crisp and Clean that can be activated by performing a few simple steps. The iPad version has a completely different homepage, uses a different type of navigation in the header and footer and does not provide layered navigation, and category listings are viewed by finger sliding. The iPad version offers the following features:

• Switches from Portrait to Landscape mode upon rotation

• Allows finger surfing and sliding through product content

• Expanded product descriptions in Category view

• Custom navigation menu

• Hi-resolution background

• Use of hi-resolution images in the homepage slider

If the iPad version is not activated, the standard version will be displayed instead.

The following pages have screenshots of how the Crisp and Clean homepage, menus and categories will appear on the iPad.

31

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

Figure 12a is an example of the iPad version’s homepage:

32

Figure 12a

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

Figure 12b demonstrates the use of menus in the iPad version. When you click on a top-level menu item, a separate box appears with submenus:

33

Figure 12b

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

Figure 12c shows how listings within a category are displayed. Use finger sliding to browse through the listings.

34

Figure 12c

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

Activating the iPad Version

To activate the iPad version of Crisp and Clean:

1. In the top navigation menu, go to System > Configuration. Under General in the left-hand menu, select Design.

2. In the Theme section, find the Default fields. Enter iPad under Matched Expression and crispandclean-ipad under Value.

3. Click the Save Config button.

35

Figure 13

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

Setting Up the Homepage

The homepage of Crisp and Clean’s iPad version is different from the standard version, as it adapts to the iPad’s fixed size and use of finger surfing.

To add the iPad version of the homepage:

1. In the top navigation menu, go to CMS > Static Blocks.

2. Click the Add New Block button. The following page will appear:

36

Figure 14

gothemeteam.com Crisp and Clean Magento Theme Instructions

iPad Version

3. In the Block Title field, enter Homepage iPad.

4. In the Identifier field, enter homepage_ipad.

5. Select Enabled under the Status drop-down menu.

6. Click the Show / Hide Editor button. Enter the following code into the Content box:

<div id="homepage-ipad"> <ul> <li class="active"><img src="{{skin url="images/sample/homepage-gallery-01.jpg"}}" alt="" /></li> <li><img src="{{skin url="images/sample/homepage-gallery-02.jpg"}}" alt="" /></li> <li><img src="{{skin url="images/sample/homepage-gallery-03.jpg"}}" alt="" /></li> <li><img src="{{skin url="images/sample/homepage-gallery-04.jpg"}}" alt="" /></li>

<li><img src="{{skin url="images/sample/homepage-gallery-05.jpg"}}" alt="" /></li> </ul> </div>

7. Click the Save Block button.

37

gothemeteam.com Crisp and Clean Magento Theme Instructions

Upgrades & CSS Customization

We recommend creating a separate file for any CSS modifications (e.g. custom.css) to avoid having to redo any changes when you upgrade the theme. Then, if you download a Crisp and Clean upgrade, make sure the file is loaded after Crisp and Clean CSS files.

Here are a few resources to help you with CSS customization:

• Understanding Magento CSS

• CSS Resources

• Designing for Magento

38

gothemeteam.com Crisp and Clean Magento Theme Instructions

Using Magento

To make the most out of the Crisp and Clean theme, you will need to familiarize yourself with Magento. There are tutorials, articles, forums and screencasts to help you learn how to use Magento and its features. This section

provides helpful links to instructions on commonly used Magento features, but you can learn more by exploring these resources:

• Knowledge Base

• Screencasts

• Magento Wiki

• Magento Forum

39

gothemeteam.com Crisp and Clean Magento Theme Instructions

Using Magento

Categories

To help customers browse your online store efficiently, you will most likely need to organize your products into categories and sub-categories. Please read the following documentation to learn how to create and manage categories.

• Tutorial: Creating and Managing Categories

• Admin Panel > Categories > Manage Categories

Layered Navigation

Layered navigation allows users to filter through products under a particular category. Examples of filterable attributes include price, size and color.

• How Does Layered Navigation Work?

• Magento Screencast: Layered Navigation

40

gothemeteam.com Crisp and Clean Magento Theme Instructions

Using Magento

Adding Products to Your Online Store

You will, of course, need to know how to add products to your online store. The following links will help you set up, organize and manage your products, and add images and product descriptions.

• Tutorial: Creating Products

• Magento Screencast: Creating a Simple Product

• Adding a New Product

Setting Up the Ratings & Review Module

Magento gives you the option of allowing customers to rate and/or review your products. To use this feature, you will need to learn how to set up the module and manage incoming reviews and ratings.

• How do I configure and use the Reviews & Ratings module?

• Magento Screencast: Managing Ratings and Reviews

41

gothemeteam.com Crisp and Clean Magento Theme Instructions

FAQs

Frequently Asked Questions

Q. Can I use Crisp and Clean with the free version of Magento?A. Yes, it is designed for Magento Community Edition, which is the free version.

Q. Does the theme work with PayPal?A. Yes, it works with PayPal and all other payment gateways supported by Magento.

Q. Are Magento and Crisp and Clean difficult to install? Is it difficult to add and manage products?A. Magento themes take longer to set up than WordPress themes, but the process is simple if you follow our instructions carefully. If you still need help, we are also here to help you. Adding categories, attribute sets and products are easy in Magento. Setting up credit card payment options only requires entering your payment gateway credentials.

Q. I don’t see the navigation bar. How do I get it to show up?A. Make sure your categories are listed under the default/root category of the correct store. You can also try clearing the Magento cache.

Q. My products aren’t showing up.A. Check that your products are listed under Catalog > Manage Products and their status is Enabled. The product should also be in stock and have a stock quantity. Also check that the product is assigned to a category.

42

gothemeteam.com Crisp and Clean Magento Theme Instructions

FAQs

Q. I’m under a category, but the sidebar is missing.A. Anchor your category by going to Catalog > Manage Categories in the Magento admin panel. Select the category, then click on the Display Settings tab in the work area. Select Yes in the Is Anchor drop-down menu.

Q. Is there a limit on the number of thumbnail images that can be displayed under the main image of the product pages?A. There is no limit on the number of thumbnail images you can add. The theme will automatically create new rows when necessary.

Q. I entered content to be displayed on a webpage, but all I see is HTML code.A. When entering code, press the Show / Hide Editor button above the Content box to leave WYSIWYG mode.

Q. I can’t find the About Us, Customer Service and Contact pages. Where are they or how do I activatethem?A. The About Us, Customer Service and Contact pages are in Magento by default. The About Us and Customer Service pages can be modified under CMS > Pages in the navigation menu.

Q. How do I change the color of the menu bar and the footer promotion bar?A. Both can be easily customized by changing CSS rules. Open /skin/frontend/default/crispandclean/css/color.css and change the following rules:

• .theme• #nav > ul> li > a• #nav > ul > li Find #00597D and set any color you like.

43

gothemeteam.com Crisp and Clean Magento Theme Instructions

FAQs

Q. Does this theme support “Email to a Friend” and “We Also Recommend” static blocks?A. Yes, Crisp and Clean supports both types of “up-sell” static blocks. To enable the “Email to a Friend” feature, go to the Magento admin panel and select System > Configuration from the top navigation menu. In the left-hand menu, find the Catalog section and select Email to a Friend to reach the feature’s settings. Click here for more information on Email to a Friend settings. To add products to the “We Also Recommend” feature, go to Catalog > Manage Products from the top menu and select a product to which you would like to add up-sells or recommended products. Under Product Information on the left-hand side, select Up-sells. Watch this screencast to learn how to set up up-sells: Magento Screencast: Upsells.

Q. Do the homepage slider images hyperlink? Is the JavaScript slider controlled by XML? If so, is it set up inthe admin panel?A. Yes, the homepage slider images hyperlink. The homepage content is controlled by Magento CMS, but you can use XML and/or Magento widgets if you want.

Q. Does the theme have good browser compatibility with Internet Explorer 6.0 or later?A. Crisp and Clean does have good browser support with all the modern browser versions, including Internet Explorer 7.0 and later.

Q. Is the homepage interactivity/JavaScript sliders controlled on the admin panel under static blocks?A. The homepage interactivity can be edited in the Magento CMS Editor by going to CMS > Pages on the admin panel and opening the homepage.

44

gothemeteam.com Crisp and Clean Magento Theme Instructions

FAQs

Q. Does the big homepage slider hyperlink to a landing page?A. Yes. Please see the demo site: http://crispandclean.worryfreelabs.com/.

Q. How do you add the menus and Amazon-style submenus?A. Adding menus is one of Magento’s basic features; Crisp and Clean simply provides better formatting and presentation. Please read the following tutorial to learn how to create menus: Creating and Managing Categories.

Q. Can you provide a link showing how related, cross-sell and up-sell items appear in the cart by default?A. Please following this link to see an example of all three types of blocks on one page: http://crispandclean.worryfreelabs.com/styles/classic/chippendale/style-a.html.

Q. Does this theme work with the AheadWorks blog extension?A. Yes, Crisp and Clean is compatible with the AheadWorks blog extension.

Q. What do you recommend when making CSS modification? I am concerned with having to redo my CSS styles every time you upgrade or update your theme.A. We recommend preserving your files by creating a separate file for your modifications (e.g. custom.css) and making sure it’s loaded after Crisp and Clean CSS files.

Q. Where is the favicon located?A. It is located in skin/frontend/default/crispandclean/favicon.ico.

45

gothemeteam.com Crisp and Clean Magento Theme Instructions

FAQs

Q. How can I get the “Outdoor Furniture” banner to appear on the catalog pages?A. On the Magento admin panel, go to Catalog > Manage Categories and select the category page on which you would like it to appear. In the General Information box in the work area, scroll down to Images. Click the Browse button and upload an image.

Q. Can the user sort by the Grid/List or List/Grid view option in the catalog pages?A. This theme supports both Grid and List modes, but it’s optimized for Grid mode. To set it to List mode, go to System > Configuration. On the left-hand menu under Catalog, select Catalog and click on the Frontend bar. Make a selection in the List Mode drop-down menu.

Q. How can I use an image as a background instead of the default white color? Ideally, I’d like to use two different images: one for the header and body and another for the footer area.A. You can change the background color or image by modifying this stylesheet: /skin/frontend/default/crispandclean/css/styles.css. In the header/body code, enter the image’s URL in line 29: body { background-image: url(your header and body image); }. In the footer code, enter the image’s URL in line 1256: #footer { background-image: url(your footer image); }.

46

gothemeteam.com Crisp and Clean Magento Theme Instructions

Additional Help

If you need further assistance, please contact the Theme Team by filling out a contact form at http://themeforest.net/user/goThemeTeam.

For more information on using Magento, please visit the resources listed on page 39.

Thank you for purchasing the Crisp and Clean Magento theme!

47