Crisp and Clean

Magento Theme Instructions

Version 1.4
Last Updated: May 7, 2011

gothemeteam.com

Table of Contents
Installation & Conguration.......................3 System Requirements ................................3 Uploading Crisp and Clean.........................4 Activating the iPad Version ....................... 35 Setting Up the Homepage........................36 Upgrades & CSS Customization .............38

Homepage...................................................6 Setting the Page Layout ............................. 7 Using Magento ......................................... 39 Adding Content..........................................9 Main Slideshow........................................ 12 FAQs ..........................................................42 Main Slideshow Controls.......................... 15 Featured Products....................................16 Featured Products Controls......................19 Additional Help......................................... 47 Footer Promotion .....................................20 Footer Links..............................................23 Social Links...............................................27 Checkout Progress Security ................... 29 iPad Version.............................................. 31 iPad Version Features...............................31
gothemeteam.com

Crisp and Clean Magento Theme Instructions

Installation & Conguration

Thank you for purchasing the Crisp and Clean Magento theme! In this document, you will nd 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

gothemeteam.com

Crisp and Clean Magento Theme Instructions

Installation & Conguration

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 softwares 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 > Conguration. Click Design on the left-hand menu. 5. Under Themes, nd the Default eld and type crispandclean.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

Installation & Conguration

6. Scroll down to the Header section. In the Logo Image Scr eld, type images/logo.gif. 7. Scroll back to the top of the page and click the Save Cong 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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

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

gothemeteam.com

Figure 1

Crisp and Clean Magento Theme Instructions

Homepage
Setting the Page Layout 1. Select the homepage from CMS > Pages. 2. If you havent already, enter a name for the page in Page Title and a slug in the URL Key eld. 3. Select Enabled in the Status drop-down menu. 4. Click the Save Page button.

Figure 2a

gothemeteam.com

Crisp and Clean Magento Theme Instructions

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

Figure 2b

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.

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.

Enter HTML code here.

Figure 3

gothemeteam.com

Crisp and Clean Magento Theme Instructions

Homepage
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="{{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="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="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>

gothemeteam.com

Crisp and Clean Magento Theme Instructions

10

Homepage
<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>

gothemeteam.com

Crisp and Clean Magento Theme Instructions

11

Homepage
Now lets 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 ve groups of images, but you may have as many groups as you want.
1 2 3 4 5 6 7 <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>

gothemeteam.com

Crisp and Clean Magento Theme Instructions

12

Homepage
Line 5 Line 4

Line 6

Figure 4

Each photo can be linked to a page with the items details. To link the photo to another page, enter the pages URL on line 4 in store direct_url="". Type the URL for each image in skin url="". You can add the images 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.

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

13

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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

14

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>

Figure 5

gothemeteam.com

Crisp and Clean Magento Theme Instructions

15

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 2 3 4 5 6 7 8 <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>

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 pages URL in store direct_url="" and the images URL in skin url="". You can add the images alt attribute in alt="".

gothemeteam.com

Crisp and Clean Magento Theme Instructions

16

Homepage
Line 7 controls the product name below the image, which can also be a hyperlink to the products details. Enter the linking pages 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.

Line 6

Line 7
Figure 6

gothemeteam.com

Crisp and Clean Magento Theme Instructions

17

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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

18

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 2 3 4 <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>

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

Line 2

Line 3

Figure 7

gothemeteam.com

Crisp and Clean Magento Theme Instructions

19

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 promotions details. This area is a static block.

Figure 8a

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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

20

Footer Promotion
You will come to the following page:

Figure 8b

3. In the Block Title eld, type text describing your special offer. 4. In the Identier eld, type footer_prom. This is how it will be listed on the Static Blocks page. 5. Select Enabled from the Status drop-down menu.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

21

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

gothemeteam.com

Crisp and Clean Magento Theme Instructions

22

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.

Figure 9a

To add content to the footer: 1. Go to CMS > Static Block. Select Footer Links from the list.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

23

Footer Links
You will come the following screen:

Figure 9b

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 Identier eld, type footer_links. 4. Select Enabled in the Status drop-down menu.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

24

Footer Links
5. In the Content box, enter the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <ul> <li class="first">INFORMATION</li> <li><a href="{{store direct_url="about-us"}}">About Crisp and Clean Co.</a></li> <li><a href="{{store direct_url="contacts"}}">Contact Us</a></li> <li><a href="#">Terms &amp; Conditions</a></li> <li><a href="#">Shipping &amp; Returns</a></li> <li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li> <li><a href="#">Stores and Locations</a></li> </ul> <ul> <li class="first">CATEGORIES</li> {{block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"}} </ul> <ul> <li class="first">LEARN</li> <li><a href="#">In the News</a></li> <li><a href="#">Crisp and Clean Co. Blog</a></li> </ul>

6. Click the Save Block button.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

25

Footer Links
Lines 2, 11 and 15 contain code for each columns header. Lines 3 and 4 are examples of code for hyperlink text. Enter the linking pages slug in store direct_url="" and the hyperlinks text before </a></li>. Not all the text in this sample code is linked to other pages. Please modify the code to t 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 > Conguration. Under General on the left-hand menu, select Design. 2. Scroll down to the Footer section in the main work area. In the Copyright eld, enter the following code, replacing the sample information with your companys 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>

gothemeteam.com

Crisp and Clean Magento Theme Instructions

26

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

Figure 10a

To add social links to your website: 1. Go to CMS > Static Blocks. Select Social Links. You will come to the following screen:

gothemeteam.com

Figure 10b

Crisp and Clean Magento Theme Instructions

27

Social Links
2. In the Content box, enter the following code:
1 2 3 4 5 6 7 8 <h3>FOLLOW US</h3> <ul> <li><a href="#"><img </li> <li><a href="#"><img <li><a href="#"><img <li><a href="#"><img </ul>

src="{{skin url="images/logo-facebook.gif"}}" alt="Follow us on Facebook" /></a> src="{{skin url="images/logo-twitter.gif"}}" alt="Follow us on Twitter" /></a></li> src="{{skin url="images/logo-youtube.gif"}}" alt="Follow us on Youtube" /></a></li> src="{{skin url="images/logo-rss.gif"}}" alt="rss" /></a></li>

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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

28

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:

Figure 11

gothemeteam.com

Crisp and Clean Magento Theme Instructions

29

Checkout Progress Security

2. In the Block Title eld, type Checkout Progress Security. 3. In the Identier eld, 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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

30

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 nger sliding. The iPad version offers the following features:

Switches from Portrait to Landscape mode upon rotation Allows nger surng 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.
gothemeteam.com

Crisp and Clean Magento Theme Instructions

31

iPad Version
Figure 12a is an example of the iPad versions homepage:

Figure 12a

gothemeteam.com

Crisp and Clean Magento Theme Instructions

32

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:

Figure 12b

gothemeteam.com

Crisp and Clean Magento Theme Instructions

33

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

Figure 12c

gothemeteam.com

Crisp and Clean Magento Theme Instructions

34

iPad Version
Activating the iPad Version To activate the iPad version of Crisp and Clean: 1. In the top navigation menu, go to System > Conguration. Under General in the left-hand menu, select Design. 2. In the Theme section, nd the Default elds. Enter iPad under Matched Expression and crispandclean-ipad under Value. 3. Click the Save Cong button.

Figure 13

gothemeteam.com

Crisp and Clean Magento Theme Instructions

35

iPad Version
Setting Up the Homepage The homepage of Crisp and Cleans iPad version is different from the standard version, as it adapts to the iPads xed size and use of nger surng. 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:

Figure 14

gothemeteam.com

Crisp and Clean Magento Theme Instructions

36

iPad Version
3. In the Block Title eld, enter Homepage iPad. 4. In the Identier eld, 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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

37

Upgrades & CSS Customization

We recommend creating a separate le for any CSS modications (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 le is loaded after Crisp and Clean CSS les. Here are a few resources to help you with CSS customization:

Understanding Magento CSS CSS Resources Designing for Magento

gothemeteam.com

Crisp and Clean Magento Theme Instructions

38

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

gothemeteam.com

Crisp and Clean Magento Theme Instructions

39

Using Magento
Categories To help customers browse your online store efciently, 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 lter through products under a particular category. Examples of lterable attributes include price, size and color.

How Does Layered Navigation Work? Magento Screencast: Layered Navigation

gothemeteam.com

Crisp and Clean Magento Theme Instructions

40

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 congure and use the Reviews & Ratings module? Magento Screencast: Managing Ratings and Reviews

gothemeteam.com

Crisp and Clean Magento Theme Instructions

41

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 difcult to install? Is it difcult 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 dont 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 arent 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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

42

FAQs
Q. Im 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 cant nd the About Us, Customer Service and Contact pages. Where are they or how do I activate them? A. The About Us, Customer Service and Contact pages are in Magento by default. The About Us and Customer Service pages can be modied 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.
gothemeteam.com

Crisp and Clean Magento Theme Instructions

43

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 > Conguration from the top navigation menu. In the left-hand menu, nd the Catalog section and select Email to a Friend to reach the features 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 in the 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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

44

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 Magentos 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 modication? I am concerned with having to redo my CSS styles every time you upgrade or update your theme. A. We recommend preserving your les by creating a separate le for your modications (e.g. custom.css) and making sure its loaded after Crisp and Clean CSS les. Q. Where is the favicon located? A. It is located in skin/frontend/default/crispandclean/favicon.ico.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

45

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 its optimized for Grid mode. To set it to List mode, go to System > Conguration. 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, Id 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 images URL in line 29: body { backgroundimage: url(your header and body image); }. In the footer code, enter the images URL in line 1256: #footer { background-image: url(your footer image); }.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

46

Additional Help
If you need further assistance, please contact the Theme Team by lling 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!

gothemeteam.com

Crisp and Clean Magento Theme Instructions

47