Crisp and Clean

Magento Theme Instructions

Version 1.4
Last Updated: May 7, 2011

gothemeteam.com

Table of Contents
Installation & Configuration.......................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

2

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

gothemeteam.com

Crisp and Clean Magento Theme Instructions

3

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.

gothemeteam.com

Crisp and Clean Magento Theme Instructions

4

select Refresh in the Actions drop-down menu and click the Submit button. Finally. 10. 8. You will need to clear the store cache and all cookies.gif. and Flush Catalog Images Cache (optional). Click Select All on the left side of the page. Scroll back to the top of the page and click the Save Config button.com Crisp and Clean Magento Theme Instructions 5 . Next.Installation & Configuration 6. Flush JavaScript/CSS Cache. type images/logo. In the Logo Image Scr field. click the following buttons (in orange): Flush Magento Cache. Flush Cache Storage. 9. go to System > Cache Management from the top navigation menu. Now you are ready to add content to your website. gothemeteam. 7. On the right side. Scroll down to the Header section.

com Figure 1 Crisp and Clean Magento Theme Instructions 6 .Homepage This section will help you create a Crisp and Clean homepage: gothemeteam.

Select Enabled in the Status drop-down menu.Homepage Setting the Page Layout 1. If you haven’t already. Click the Save Page button. enter a name for the page in Page Title and a slug in the URL Key field. 2. Figure 2a gothemeteam. 4. Select the homepage from CMS > Pages. 3.com Crisp and Clean Magento Theme Instructions 7 .

Select Design from the left-hand menu. Select 1 column from the Layout drop-down menu.com Crisp and Clean Magento Theme Instructions 8 . 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. In the Layout Update XML box. 7. The following page will appear: Figure 2b 6.Homepage 5. gothemeteam.

click Content. 4. 5. copy and paste the HTML code found on the following pages. In the content box. 3. In the left-hand menu. Click the Save Page button. 2. Figure 3 gothemeteam.com Crisp and Clean Magento Theme Instructions 9 . Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor (see Figure 3). Under CMS > Pages. click on the homepage. Enter HTML code here.Homepage Adding Content To add content to your homepage: 1.

html"}}"><img src="{{skin url="images/sample/name3-1.jpg"}}" alt="" width="310" height="190" /></div> </li> <li> <div class="main"><a href="{{store direct_url="patio-sets/patio-set-banana.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/name2-3.jpg"}}" alt="" width="310" height="190" /></div> </li> <li> <div class="main"><a href="{{store direct_url="tables-1/table-c.com Crisp and Clean Magento Theme Instructions 10 .jpg"}}" alt="" width="310" height="190" /></div> <div class="third"><img src="{{skin url="images/sample/name2-3.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="chairs/adirondack-c.html"}}">ADIRONDACK C</a></p> </li> gothemeteam.jpg"}}" alt="" width="310" height="190" /></div> <div class="third"><img src="{{skin url="images/sample/name3-3.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> </li> <li> <div class="main"><a href="{{store direct_url="patio-sets/patio-set-banana.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.jpg"}}" alt="" width="630" height="400" /></ a></div> <div class="second"><img src="{{skin url="images/sample/name3-2.html"}}"><img src="{{skin url="images/sample/photo1.jpg"}}" alt="" width="310" height="190" /></div> </li> <li> <div class="main"><a href="{{store direct_url="chairs/montauk-b.jpg"}}" alt="" width="310" height="190" /></div> <div class="third"><img src="{{skin url="images/sample/name3-3.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> </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/name2-1.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="chairs/montauk-a.html"}}"><img src="{{skin url="images/sample/name1-1.html"}}"><img src="{{skin url="images/sample/name3-1.jpg"}}" alt="" width="310" height="190" /></div> <div class="third"><img src="{{skin url="images/sample/name3-3.html"}}"><img src="{{skin url="images/sample/name3-1.Homepage Homepage HTML code: <div id="slideshow"> <ul> <li> <div class="main"><a href="{{store direct_url="chairs/montauk-a.html"}}">MONTAUK A</a></p> </li> <li> <p><a href="{{store direct_url="chairs/adirondack-c.jpg"}}" alt="" width="630" height="400" /></a></div> <div class="second"><img src="{{skin url="images/sample/name2-2.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/name1-2.html"}}"><img src="{{skin url="images/sample/photo2.

html"}}">TABLE A</a></p> </li> <li> <p><a href="{{store direct_url="patio-sets/patio-set-a-41.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/photo7.html"}}">MONTAUK B</a></p> </li> <li> <p><a href="{{store direct_url="patio-sets/patio-set-carrot.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="chairs/montauk-c.html"}}">ADIRONDACK A</a></p> </li> <li> <p><a href="{{store direct_url="accessories/lighting-b.html"}}">MONTAUK C</a></p> </li> <li> <p><a href="{{store direct_url="tables-1/table-a.com Crisp and Clean Magento Theme Instructions 11 .html"}}"><img src="{{skin url="images/sample/photo5.html"}}">ZAPPY</a></p> </li> <li> <p><a href="{{store direct_url="chairs/adirondack-a.html"}}"><img src="{{skin url="images/sample/photo3.Homepage <li> <p><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}"><img src="{{skin url="images/sample/photo11.html"}}"><img src="{{skin url="images/sample/photo6.html"}}"><img src="{{skin url="images/sample/photo12.html"}}">PATIO SET APPLE</a></p> </li> <li> <p><a href="{{store direct_url="styles/zappy.html"}}"><img src="{{skin url="images/sample/photo9.html"}}"><img src="{{skin url="images/sample/photo10.html"}}">TABLE C</a></p> </li> <li> <p><a href="{{store direct_url="chairs/montauk-b.html"}}"><img src="{{skin url="images/sample/photo4.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="tables-1/table-c.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.html"}}">PATIO SET BANANA</a></p> </li> <li> <p><a href="{{store direct_url="tables-1/table-c.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="patio-sets/patio-set-carrot.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="styles/zappy.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="chairs/adirondack-a.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="patio-sets/patio-set-banana.html"}}"><img src="{{skin url="images/sample/photo8.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="patio-sets/patio-set-a-41.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="chairs/montauk-b.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="accessories/lighting-b.jpg"}}" alt="" /></a></p> <p><a href="{{store direct_url="tables-1/table-a.

Lines 3-7 in the sample code below control one group of images (also see Figure 4 on the next page). 1 2 3 4 5 6 7 <div id="slideshow"> <ul> <li> <div class="main"><a href="{{store direct_url="chairs/montauk-a. Featured Products. Main Slideshow Controls. and Featured Products Controls. Main Slideshow: <div id="slideshow"> The main slideshow rotates groups of three images at a time. but you may have as many groups as you want.jpg"}}" alt="" width="310" height="190" /></div> <div class="third"><img src="{{skin url="images/sample/name1-3.jpg"}}" alt="" width="630" height="400" /></a></div> <div class="second"><img src="{{skin url="images/sample/name1-2.html"}}"><img src="{{skin url="images/ sample/name1-1.com Crisp and Clean Magento Theme Instructions 12 .Homepage Now let’s examine the code by breaking it down into the four different sections of the page: Main Slideshow. This code will display five groups of images.jpg"}}" alt="" width="310" height="190" / ></div> </li> gothemeteam.

The dimensions for each image are set in width="" height="". Please Note: The slideshow images’ dimensions can be changed. gothemeteam.com Crisp and Clean Magento Theme Instructions 13 . but CSS and JavaScript must be changed accordingly. You can add the image’s alt attribute in alt="". To link the photo to another page.Homepage Line 5 Line 4 Line 6 Figure 4 Each photo can be linked to a page with the item’s details. enter the page’s URL on line 4 in store direct_url="". The larger image on the left is 630 x 400 and the smaller images on the right are 310 x 190. Type the URL for each image in skin url="".

gothemeteam.com Crisp and Clean Magento Theme Instructions 14 . After you have entered the code for each group.Homepage The code in lines 3-7 is used for each group of images. 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.

The slideshow is set to run automatically by default.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). 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 .

The header for the section is entered on line 3. which is also a hyperlink.Homepage Featured Products: <div id="featured"> Below the slideshow are two sliding image galleries that can be used to display featured products. sale items. 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. a new collection. Images are viewed by clicking the arrows on either side of the images.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. gothemeteam. etc. Line 6 controls the image. Enter the linking page’s URL in store direct_url="" and the image’s URL in skin url="".html"}}"><img src="{{skin url="images/sample/ photo1.com Crisp and Clean Magento Theme Instructions 16 . You can add the image’s alt attribute in alt="".

Line 6 Line 7 Figure 6 gothemeteam.com Crisp and Clean Magento Theme Instructions 17 . Use the code in lines 5-8 for each image.Homepage Line 7 controls the product name below the image. Enter the linking page’s URL in store direct_url="" and the text where MONTAUK A is located in the sample code. which can also be a hyperlink to the product’s details.

Homepage After you enter the code for all the images and descriptions in the left-hand gallery. gothemeteam. 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.com Crisp and Clean Magento Theme Instructions 18 .

Homepage Featured Products Controls: <div id="controls"> Finally. When the end of a gallery is reached. the last bit of code controls the reversing arrows on either side of the featured products gallery (see Figure 7). Line 2 Line 3 Figure 7 gothemeteam. 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. the arrow points in the opposite direction and the images are viewed in reverse order.com Crisp and Clean Magento Theme Instructions 19 .

On the right side of the page.com Crisp and Clean Magento Theme Instructions 20 . This area is a static block. click the Add New Block button.Footer Promotion At the bottom of every page. is an area where you can advertise a special promotion and a link to the promotion’s details. Figure 8a To add content to this area: 1. just above the footer. gothemeteam. Go to CMS > Static Blocks from the top navigation menu. 2.

In the Block Title field. 4. type footer_prom.com Crisp and Clean Magento Theme Instructions 21 . In the Identifier field. 5.Footer Promotion You will come to the following page: Figure 8b 3. type text describing your special offer. gothemeteam. Select Enabled from the Status drop-down menu. This is how it will be listed on the Static Blocks page.

In the Content box. Figure 8a). 7. gothemeteam.com Crisp and Clean Magento Theme Instructions 22 . enter the following code: <div class="prom">50% Off Select Items Until Tomorrow <a href="#">Learn More &raquo. Click the Show / Hide Editor button to leave WYSIWYG mode.</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.Footer Promotion 6.

Select Footer Links from the list.Footer Links The footer is located at the very bottom of the webpage and is made up of four columns. Go to CMS > Static Block. Figure 9a To add content to the footer: 1. gothemeteam.com Crisp and Clean Magento Theme Instructions 23 . This area is also a static block.

3. gothemeteam. type footer_links.com Crisp and Clean Magento Theme Instructions 24 . Enter a title in Block Title. The title is only used in the admin panel and will not appear on the website. Select Enabled in the Status drop-down menu.Footer Links You will come the following screen: Figure 9b 2. In the Identifier field. 4.

topnav" template="catalog/navigation/top. 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. 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. In the Content box.</a></li> <li><a href="{{store direct_url="contacts"}}">Contact Us</a></li> <li><a href="#">Terms &amp. Blog</a></li> </ul> 6. Click the Save Block button. gothemeteam.com Crisp and Clean Magento Theme Instructions 25 .phtml"}} </ul> <ul> <li class="first">LEARN</li> <li><a href="#">In the News</a></li> <li><a href="#">Crisp and Clean Co.Footer Links 5. Conditions</a></li> <li><a href="#">Shipping &amp.

worryfreelabs. Under General on the left-hand menu. In the top navigation menu. CT 06480</p> <p><a href="http://www. Scroll down to the Footer section in the main work area. To change the contact information in the footer below the social links: 1. Lines 3 and 4 are examples of code for hyperlink text. 2.</strong></p> <p>544 Oenoke Ridge<br /> New Canaan. Not all the text in this sample code is linked to other pages. enter the following code.worryfreelabs.Footer Links Lines 2. 11 and 15 contain code for each column’s header.com</a><br /> Toll Free: (800) 555-1212</p> gothemeteam.com">http://www. In the Copyright field. replacing the sample information with your company’s information: <p><strong>Crisp and Clean Corporation. Inc. Please modify the code to fit your needs. go to System > Configuration. select Design.com Crisp and Clean Magento Theme Instructions 26 . The code on line 12 pulls the links for the Categories section from the top navigation menu. Enter the linking page’s slug in store direct_url="" and the hyperlink’s text before </a></li>.

Twitter.Social Links Social Links consist of a series of icons linking to your different social networking accounts (e.com Figure 10b Crisp and Clean Magento Theme Instructions 27 . YouTube and your RSS feed).g. Facebook. Go to CMS > Static Blocks. Figure 10a To add social links to your website: 1. Select Social Links. You will come to the following screen: gothemeteam.

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. In the Content box. You can add or remove as many as you need.gif"}}" alt="rss" /></a></li> Enter a header that will appear above the social links in line 1.com Crisp and Clean Magento Theme Instructions 28 .gif"}}" alt="Follow us on Twitter" /></a></li> src="{{skin url="images/logo-youtube.gif"}}" alt="Follow us on Facebook" /></a> src="{{skin url="images/logo-twitter. Lines 3-7 control each icon and their link.Social Links 2.gif"}}" alt="Follow us on Youtube" /></a></li> src="{{skin url="images/logo-rss. gothemeteam.

Go to CMS > Static Blocks. Click the Add New Block button. To add an SSL seal: 1. You will come to the following screen: Figure 11 gothemeteam.com Crisp and Clean Magento Theme Instructions 29 . This area is a static block.Checkout Progress Security Adding an SSL seal to your checkout pages assures the customer your website is secure.

gif"}}" alt="GeoTrust" width="115" height="55" /> <img src="{{skin url="images/authorize. In the Block Title field. type checkout_progress_security. Click the Show / Hide Editor button to leave WYSIWYG mode. Click the Save Block button. 3.com Crisp and Clean Magento Theme Instructions 30 . Enter the following code in the Content box: <div class="block secure-by"> <div class="block-content"><img src="{{skin url="images/geotrust. gothemeteam.gif"}}" alt="Authorize. 4.net" width="88" height="70" /> </div> </div> 6.Checkout Progress Security 2. 5. type Checkout Progress Security. Select Enabled in the Status drop-down menu. In the Identifier field.

menus and categories will appear on the iPad. The iPad version has a completely different homepage. gothemeteam. 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. 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.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 following pages have screenshots of how the Crisp and Clean homepage.com Crisp and Clean Magento Theme Instructions 31 .

com Crisp and Clean Magento Theme Instructions 32 .iPad Version Figure 12a is an example of the iPad version’s homepage: Figure 12a gothemeteam.

iPad Version Figure 12b demonstrates the use of menus in the iPad version. a separate box appears with submenus: Figure 12b gothemeteam. When you click on a top-level menu item.com Crisp and Clean Magento Theme Instructions 33 .

Use finger sliding to browse through the listings.iPad Version Figure 12c shows how listings within a category are displayed.com Crisp and Clean Magento Theme Instructions 34 . Figure 12c gothemeteam.

com Crisp and Clean Magento Theme Instructions 35 . 2. In the Theme section. Enter iPad under Matched Expression and crispandclean-ipad under Value.iPad Version Activating the iPad Version To activate the iPad version of Crisp and Clean: 1. In the top navigation menu. Click the Save Config button. 3. find the Default fields. select Design. Figure 13 gothemeteam. Under General in the left-hand menu. go to System > Configuration.

com Crisp and Clean Magento Theme Instructions 36 .iPad Version Setting Up the Homepage The homepage of Crisp and Clean’s iPad version is different from the standard version. In the top navigation menu. Click the Add New Block button. as it adapts to the iPad’s fixed size and use of finger surfing. 2. To add the iPad version of the homepage: 1. The following page will appear: Figure 14 gothemeteam. go to CMS > Static Blocks.

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-05. 5. enter Homepage iPad.jpg"}}" alt="" /></li> </ul> </div> 7. In the Block Title field. enter homepage_ipad.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. 6. gothemeteam. 4.jpg"}}" alt="" /></li> <li><img src="{{skin url="images/sample/homepage-gallery-02. Click the Show / Hide Editor button. Click the Save Block button. Select Enabled under the Status drop-down menu.com Crisp and Clean Magento Theme Instructions 37 .iPad Version 3. In the Identifier field.

custom.com Crisp and Clean Magento Theme Instructions 38 .css) to avoid having to redo any changes when you upgrade the theme. Here are a few resources to help you with CSS customization: • Understanding Magento CSS • CSS Resources • Designing for Magento gothemeteam.g. if you download a Crisp and Clean upgrade. Then.Upgrades & CSS Customization We recommend creating a separate file for any CSS modifications (e. make sure the file is loaded after Crisp and Clean CSS files.

you will need to familiarize yourself with Magento. articles. forums and screencasts to help you learn how to use Magento and its features.com Crisp and Clean Magento Theme Instructions 39 . This section provides helpful links to instructions on commonly used Magento features. There are tutorials.Using Magento To make the most out of the Crisp and Clean theme. but you can learn more by exploring these resources: • Knowledge Base • Screencasts • Magento Wiki • Magento Forum gothemeteam.

com Crisp and Clean Magento Theme Instructions 40 . size and color. Examples of filterable attributes include price. • How Does Layered Navigation Work? • Magento Screencast: Layered Navigation gothemeteam. • Tutorial: Creating and Managing Categories • Admin Panel > Categories > Manage Categories Layered Navigation Layered navigation allows users to filter through products under a particular category. you will most likely need to organize your products into categories and sub-categories.Using Magento Categories To help customers browse your online store efficiently. Please read the following documentation to learn how to create and manage categories.

• 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. and add images and product descriptions. of course. The following links will help you set up. need to know how to add products to your online store. • How do I configure and use the Reviews & Ratings module? • Magento Screencast: Managing Ratings and Reviews gothemeteam. you will need to learn how to set up the module and manage incoming reviews and ratings.com Crisp and Clean Magento Theme Instructions 41 .Using Magento Adding Products to Your Online Store You will. organize and manage your products. To use this feature.

Also check that the product is assigned to a category. The product should also be in stock and have a stock quantity. Does the theme work with PayPal? A. Adding categories. it works with PayPal and all other payment gateways supported by Magento. Can I use Crisp and Clean with the free version of Magento? A. Q. A. My products aren’t showing up. You can also try clearing the Magento cache. we are also here to help you. Yes. Magento themes take longer to set up than WordPress themes. Setting up credit card payment options only requires entering your payment gateway credentials. Make sure your categories are listed under the default/root category of the correct store. it is designed for Magento Community Edition. Q.FAQs Frequently Asked Questions Q. Q. Are Magento and Crisp and Clean difficult to install? Is it difficult to add and manage products? A. gothemeteam. How do I get it to show up? A. Yes. If you still need help.com Crisp and Clean Magento Theme Instructions 42 . but the process is simple if you follow our instructions carefully. Q. Check that your products are listed under Catalog > Manage Products and their status is Enabled. which is the free version. attribute sets and products are easy in Magento. I don’t see the navigation bar.

Q. I’m under a category. Customer Service and Contact pages. I can’t find the About Us. A. but the sidebar is missing. but all I see is HTML code. The theme will automatically create new rows when necessary. Anchor your category by going to Catalog > Manage Categories in the Magento admin panel.theme • #nav > ul> li > a • #nav > ul > li Find #00597D and set any color you like. Q. Open /skin/frontend/default/crispandclean/css/ color.css and change the following rules: • . Select the category. Is there a limit on the number of thumbnail images that can be displayed under the main image of the product pages? A. When entering code. gothemeteam. How do I change the color of the menu bar and the footer promotion bar? A. Customer Service and Contact pages are in Magento by default. Q. I entered content to be displayed on a webpage. There is no limit on the number of thumbnail images you can add. Both can be easily customized by changing CSS rules. Where are they or how do I activate them? A.com Crisp and Clean Magento Theme Instructions 43 . press the Show / Hide Editor button above the Content box to leave WYSIWYG mode. Select Yes in the Is Anchor drop-down menu.FAQs Q. Q. A. then click on the Display Settings tab in the work area. The About Us and Customer Service pages can be modified under CMS > Pages in the navigation menu. The About Us.

Crisp and Clean does have good browser support with all the modern browser versions.com Crisp and Clean Magento Theme Instructions 44 . including Internet Explorer 7. In the left-hand menu. gothemeteam. Do the homepage slider images hyperlink? Is the JavaScript slider controlled by XML? If so. Does this theme support “Email to a Friend” and “We Also Recommend” static blocks? A. Is the homepage interactivity/JavaScript sliders controlled on the admin panel under static blocks? A. Click here for more information on Email to a Friend settings.0 and later. Q. find the Catalog section and select Email to a Friend to reach the feature’s settings. is it set up in the admin panel? 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. Under Product Information on the left-hand side.FAQs Q. go to the Magento admin panel and select System > Configuration from the top navigation menu. Does the theme have good browser compatibility with Internet Explorer 6.0 or later? A. Q. select Up-sells. but you can use XML and/or Magento widgets if you want. Yes. Yes. To enable the “Email to a Friend” feature. The homepage content is controlled by Magento CMS. the homepage slider images hyperlink. 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. Watch this screencast to learn how to set up up-sells: Magento Screencast: Upsells. Q. Crisp and Clean supports both types of “up-sell” static blocks. To add products to the “We Also Recommend” feature.

Q. How do you add the menus and Amazon-style submenus? A. Yes.FAQs Q.worryfreelabs. Crisp and Clean is compatible with the AheadWorks blog extension. Adding menus is one of Magento’s basic features. A. 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. Please see the demo site: http://crispandclean. cross-sell and up-sell items appear in the cart by default? A. It is located in skin/frontend/default/crispandclean/favicon. Q. Q. Where is the favicon located? A. Crisp and Clean simply provides better formatting and presentation. Can you provide a link showing how related. Does this theme work with the AheadWorks blog extension? A. Please read the following tutorial to learn how to create menus: Creating and Managing Categories.g. We recommend preserving your files by creating a separate file for your modifications (e.worryfreelabs.css) and making sure it’s loaded after Crisp and Clean CSS files. gothemeteam.com/. custom. Does the big homepage slider hyperlink to a landing page? A. Q. Yes.com Crisp and Clean Magento Theme Instructions 45 .html.com/styles/classic/chippendale/style-a.ico. Q. Please following this link to see an example of all three types of blocks on one page: http:// crispandclean.

This theme supports both Grid and List modes. To set it to List mode. Make a selection in the List Mode drop-down menu. On the Magento admin panel.css. Click the Browse button and upload an image. but it’s optimized for Grid mode. In the footer code.FAQs Q. enter the image’s URL in line 29: body { backgroundimage: url(your header and body image). go to System > Configuration. In the General Information box in the work area. enter the image’s URL in line 1256: #footer { background-image: url(your footer image). How can I use an image as a background instead of the default white color? Ideally. gothemeteam. In the header/body code. }.com Crisp and Clean Magento Theme Instructions 46 . select Catalog and click on the Frontend bar. Can the user sort by the Grid/List or List/Grid view option in the catalog pages? A. }. I’d like to use two different images: one for the header and body and another for the footer area. A. go to Catalog > Manage Categories and select the category page on which you would like it to appear. How can I get the “Outdoor Furniture” banner to appear on the catalog pages? A. Q. You can change the background color or image by modifying this stylesheet: /skin/frontend/default/ crispandclean/css/styles. On the left-hand menu under Catalog. scroll down to Images. Q.

please visit the resources listed on page 39.net/user/goThemeTeam. For more information on using Magento. please contact the Theme Team by filling out a contact form at http:// themeforest.Additional Help If you need further assistance. Thank you for purchasing the Crisp and Clean Magento theme! gothemeteam.com Crisp and Clean Magento Theme Instructions 47 .

Sign up to vote on this title
UsefulNot useful