Professional Documents
Culture Documents
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
gothemeteam.com
gothemeteam.com
gothemeteam.com
Homepage
This section will help you create a Crisp and Clean homepage:
gothemeteam.com
Figure 1
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
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) -->
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.
Figure 3
gothemeteam.com
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"><!-- --></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
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
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
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
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>
gothemeteam.com
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"><!-- --></div>
Figure 5
gothemeteam.com
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
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
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">
gothemeteam.com
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
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
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
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 »</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
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
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
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 & Conditions</a></li> <li><a href="#">Shipping & 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>
gothemeteam.com
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
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
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
28
Figure 11
gothemeteam.com
29
gothemeteam.com
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
31
iPad Version
Figure 12a is an example of the iPad versions homepage:
Figure 12a
gothemeteam.com
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
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
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
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
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>
gothemeteam.com
37
gothemeteam.com
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:
gothemeteam.com
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.
gothemeteam.com
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
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
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
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
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
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
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
47