Вы находитесь на странице: 1из 22

Breeze Theme

User Guide

Revision #2 dated 2013-02-25

2013, ItemBridge

Contents
Contents Introduction Help and Support Guides and Tutorials Support Third-party extensions How to install Quick Start Installation Configuration Demo Content Installation Configuration Caching System Flush cache Disable cache Enable cache Refresh cache Enable Theme Contact Information Header Logo Categories Products Cross-sell Content Management System (CMS) WYSIWYG editor CMS markup tags Static blocks Localization Interface translation Languages Theme Static Blocks header_call_us footer_contacts footer_links footer_social column_products column_banners Home Page HTML template Not Found Page HTML template Theme Design Customization
2013, ItemBridge 2

Introduction
Breeze e-commerce theme is created to make impression on you and your customers. We offer you an up-to-date and really high quality work with outstanding design and well-thought usability approach. This template can help you to achieve a significant increase of the conversion rates and number of positive feedback, as well as will simply be a nice surprise for your customers. Please do not forget to rate Breeze on ThemeForest. This can be done in Downloads area. Just select Breeze in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Besides, we will be happy to meet you in social networks and on websites.

2013, ItemBridge

Help and Support


Guides and Tutorials
You can find these websites useful when deploying and configuring your store: 1. User Guides 2. FAQ 3. Wiki 4. Forum 5. System Requirements 6. Server Compatibility Check 7. Installation Guide

Support
We provide support only if your question is directly related to the theme. If you have questions regarding Magento (e.g. categories or products management, attributes creation, extensions setup etc.) please refer to Magento Forum, where almost every detail of Magento configuration is described. The best place to start searching answers is Magento User Guide, which can be downloaded here. You will get all basic configuration information there. If you find any bugs, please contact us via the contact form in our ThemeForest profile.

Third-party extensions
The Breeze theme is not compatible with any third-party extension as it is simply not feasible to create the theme matching the requirements of all existing and future extensions. Often (but not always), you just need to configure extension to work properly with your Magento theme. The only theme which is compatible with any extension is the Default Magento Theme located in app/design/frontend/default/default and skin/frontend/default/default. It is so since all extensions are designed to work with this theme by default.

How to install
Any extension can work with any theme. In order to do this, your extension should be installed into the theme directories rather than into the default Magento theme directories. In case of Breeze theme you should install your extension into the following theme directories app/design/frontend/breeze/default and skin/frontend/breeze/default, where breeze is the name of design package and default is the default theme name in the package. Most often you will need to upload the extension into the theme directories. Sometimes you might need to edit layout files to "tell" the theme where it should display extension output. If you are not familiar with Magento, you will probably need to contact the extension author or use professional assistance for extension installation.

2013, ItemBridge

Quick Start
Installation
To install Breeze theme, you need to perform the following steps: 1. Install Breeze theme 2. Flush Magento cache 3. Enable the theme

Configuration
Next you need to configure your store. To do this, you need to take the following steps: 1. Disable Magento cache before you start configuring your store 2. Upload your logo 3. Create static blocks for user content 4. Setup home page 5. Setup Not Found Page 6. Enable Magento cache back, after you have finished configuring your store Besides, you can find those Magento guides and tutorials useful while you are configuring your Magento store.

Demo Content
To install demo categories and products, you can use sample data from official Magento website.

2013, ItemBridge

Installation
1. 2. 3. 4. 5. Backup your Magento installation and store database. Disable Compilation in System Tools Compilation, in case it is enabled. Disable Magento cache. Extract theme files on your computer. Copy the content of the theme directory (app and skin directories) into the root directory of your Magento instance (this will not overwrite the existing Magento files). 6. Enable Breeze theme in System Configuration Design section: Navigate to the Package tab and in the Current Package Name field enter the name of the design package breeze. Navigate to the Themes tab and in the Default field enter the name of theme in the package default. Click the Save Config button.

7. Flush Magento cache and log out from Magento Admin Panel clicking the Log Out link in the top right corner of the page. 8. Clear browsers cache and store domain cookies.

2013, ItemBridge

9. Theme is installed. Now you can log into the Magento Admin Panel to configure your store and theme settings.

2013, ItemBridge

Configuration
The following chapter describes key settings of the Magento.

Caching System
When developing your e-store, you will probably want to see your changes right after you made them. In order to have this ability, you need to completely disable cache. Do not forget to switch it on after you complete the configuration of your e-store. If the cache is enabled, please refresh it every time after you have made changes to configuration of store / theme / extension. Cache management could be achieved in System Cache Management.

Flush cache
Navigate to the System Cache Management. Click the following buttons to completely flush Magento cache: 1. Flush Magento Cache 2. Flush Cache Storage 3. Fluch Catalog Images Cache 4. Flush JavaScript/CSS Cache

Disable cache
Navigate to the System Cache Management. Click the Select All link, select Disable in Actions field and click the Submit button.

Enable cache
Navigate to the System Cache Management. Click the Select All link, select Enable in Actions field and click the Submit button.

Refresh cache
If the cache is enabled, always refresh the cache after changing the configuration, installation, upgrading or removal of extension. In order to do this, go to the System Cache Management, click the Select All link, select Refresh in Actions field and click the Submit button.

Enable Theme
Magento allows you to enable theme on multiple levels. This means that you can setup one theme for entire store, but you can also set different themes for separate parts of your store (even for separate category, product or CMS page). If you want all your pages of your store to use the same theme, your theme should only be enabled in System Configuration Design. You need to remove all custom themes definitions from categories, products and CMS pages. If you just installed a fresh copy of Magento, those places will be empty. Otherwise, please check the following admin sections: 1. System Design this section should be empty, remove all existing entries.
2013, ItemBridge 8

2. The following sections fields should be empty as well: Catalog Manage Categories [category] Custom Design Custom Design Catalog Manage Products [product] Design Custom Design CMS Pages [page] Design Custom Theme Dont forget to refresh cache after applying design changes.

Contact Information
You need to specify contact information of your store, since Breeze theme displays it in the header, footer and at the Contact Us page. To start with, go to the System Configuration General Store Information section and specify phone and address for your store in the fields Store Contact Telephone Store Contact Address correspondingly. You can specify several telephones for your store. Just separate them with commas. Besides you need to go to the System Configuration Store Email Addresses and enter your email addresses in the fields General Contact, Sales Representative and Customer Support.

Header
If you would like to have the same header welcome text as at the Breeze theme demo store, then you need to navigate to System Configuration Design Header and change the value of Welcome Text field to the following string:
Welcome visitor! You can <a href="/customer/account/login/">login</a> or <a href="/customer/account/create/">create an account</a>.

Logo
Upload your logo (recommended height up to 90 pixels and recommended width up to 180 pixels) to the skin/frontend/breeze/default/images directory. By default, Magento displays logo with the name logo.gif, thus if you use different filename or another file format (e.g., JPG or PNG) go to the System Configuration Design Header section and put proper logo image path into the Logo Image Src field. The path is relative to skin/frontend/breeze/default directory.

Categories
To manage categories, please navigate to Catalog Manage Categories. After Magento installation, your category tree is almost empty, except the only root category named Default Category. The root category is not displayed on the frontend of your store. Thats why you will not see anything in the main menu after Magento installation. You should add several subcategories to the root category. Please note that all categories of your store should be the descendants of the root category. To make category displayed on the frontend of your store, you need to set Is Active field of the category to Yes. If you want specific category to be shown in the main menu of your store, then you need to set value of the Include in Navigation Menu field to Yes. If you need layered navigation for the specific category and you want it to show products from subcategories, then you should set Yes as a value of the Is Anchor field of the category at Display Settings tab. If subcategory is not shown on the frontend, you need to re-index data in System Index Management and refresh Magento cache.

2013, ItemBridge

Products
You can change the position of the Options block at the product page for the products with options (e.g., configurable products or bundle products). It can be displayed in the main column (next to the product images) or in the column below images. In order to change this option go to the System Manage Products, switch to the Design tab and select options block position in Display Product Options In field.

Cross-sell
If you want to increase the number of cross-sell products, displayed in the block You may also be interested in the following product(s) at the frontend product page, then you need to open the file app/code/core/Mage/Checkout/Block/Cart/Crosssell.php in text editor, find the following string:
protected $_maxItemCount = 4;

and replace the number 4 with the number of products you want to see in the given block.

Content Management System (CMS)


WYSIWYG editor
WYSIWYG (What You See Is What You Get) editor is a convenient way to add to pages and static blocks in Magento. It is enabled by default. You can turn it off by clicking on Show/Hide Editor button on the page/block edit page. It is important to keep in mind that if you are copying HTML markup from this documentation or from any other source, or if you insert copied CMS markup tags, then you should always do this with the hidden WYSIWYG editor. Otherwise, WYSIWYG editor can break the markup. Moreover, while you are installing and configuring the theme we recommends you to disable editor by changing the value of the Enable WYSIWYG Editor field to Disabled by Default in the System Configuration Content Management WYSIWYG Options.

CMS markup tags


Magento has special markup tags text in double curly braces, which has a special meaning. For example, tag {{store url=''}} will be converted to the base URL of your store. You can learn more about tags, tags list and their usage at Markup Tags - CMS Directives.

Static blocks
To create a static block navigate to CMS Static Blocks Add New Block and perform the following actions: 1. Enter the identifier of the static block into the Identifier field. Make sure the identifier is all lowercase and separated by underscores to be compliant with Magento standards. 2. Enter the title into the Block Title field. 3. Select the Store Views where this block will be displayed. 4. Select Enabled in the Status field. Disabled means will not be shown on the frontend. 5. Insert block content. It could be text or HTML markup. 6. Click the Save Block button.

Localization
2013, ItemBridge 10

Interface translation
This theme introduces several additional interface translations. For example, first links group in the footer has label General Links. These lines are located in the file app/design/frontend/breeze/default/locale/en_US/translate.csv. This file could be used to translate interface to other languages. For example, to translate interface to the German language you should follow these steps: 1. Create new directory for translation. For German language it will be app/design/frontend/breeze/default/locale/de_DE/ directory. 2. Copy the file app/design/frontend/breeze/default/locale/en_US/translate.csv to the newly created directory. In case with German language file path will be app/design/frontend/breeze/default/locale/de_DE/translate.csv. 3. Open the file app/design/frontend/breeze/default/locale/de_DE/translate.csv with text editor. 4. As you can see each line of the file contains string translations matching the following format: "Original string","Translation String" First part of the text enclosed in brackets contains original string. This should be left without changes. In the second column you can place your translation of each string. Thus to translate text which is located at place of Original string to German language, then you should replace the text, which is located at place of Translation String, with its German equivalent. 5. Some strings contains %d or %s entries. This entries should be left intact in the translated strings.

Languages
If you have more than one store view in your store, so the store view switcher will be displayed at the top of the page. You can set different language for each store view. To manage store you should go to System Manage Stores and click on the store view name. You could find the store view code in the Code field.

Theme Static Blocks


All available predefined block's identifiers are described later in this chapter. For example, header_call_us is the identifier of the block, which displays store telephones in the header. So, if you create static block with identifier header_call_us, the content of this block will be automatically displayed in the header of the store. For more information on static blocks please refer to Static blocks article. You can insert any content into any block, but usage of the suggested templates will help you to keep design consistent. Below you can find predefined static block identifiers which are available in the Breeze theme. You can use them to create static blocks, which will be placed into specific store regions.

header_call_us
Call Us header block, which displays store telephones in the header and is positioned at the top left corner of the page. If you did not create block with this identifier, then the default theme block will be shown. This block could be useful in cases when you are interested to show another telephone number, instead of that, which could be found at the contact page.

2013, ItemBridge

11

footer_contacts
This block is positioned before the links block in the footer. It contains short contact information of your store. If you did not create block with this identifier, then the default theme block will be shown. You should use the following HTML template, if you would like to change content of this block:
<li>United States, California, Infinite str., 5</li> <li>+380 (012) 456-67-45</li> <li><a href="mailto:sales@store.com">sales@store.com</a></li>

footer_links
Block positioned in the footer, which contains stores links list. All links should be grouped. Each links group should contain at least one link. By default this block is already defined from scratch in Magento, but you should use theme specific HTML template to keep the design consistent:
<div class="grid_3"> <!-- Links group header --> <h3>Customer Services</h3> <nav class="f_menu"> <!-- Links list --> <ul> <li><a href="{{store url="about-magento-demo-store"}}">About Us</a></li> <li><a href="{{store url="customer-service"}}">Customer Service</a></li> <li><a href="{{store url="privacy-policy-cookie-restriction-mode"}}">Privacy Policy</a></li> </ul> </nav> </div> <!-- .grid_3 --> <div class="grid_3"> <h3>My Account</h3> <nav class="f_menu"> <ul> <li><a <li><a <li><a <li><a </ul>

href="#">Return</a></li> href="#">FAQ</a></li> href="#">Wish List</a></li> href="#">Newsletter</a></li>

</nav> </div> <!-- .grid_3 --> <!-- Do not remove the following tag, it always should be located at the very bottom of the footer_links block content --> <div class="clear"></div>

footer_social
2013, ItemBridge 12

Social services links. This block is positioned at the lower right corner of the page. You should use the following HTML template for this block:
<div class="soc"> <a class="google" href="#"></a> <a class="twitter" href="#"></a> <a class="facebook" href="#"></a> </div>

column_products
Sidebars block containing products listing from specific category. The following code snippet is responsible for displaying 5 randomly ordered products from category with ID = 3:
{{block type="ibtheme/product_list_featured" category_id="3" products_count="5" random_products="" template="catalog/product/list/column.phtml"}}

where: 1. category_id ID of the category containing products to be shown in the products slider 2. products_count products count 3. random_products indicates products random order, remove this attribute to use Magento default order 4. type theme block type for products slider: ibtheme/product_list_featured 5. template theme template for products slider: catalog/product/list/column.phtml You should use the following HTML template for this block:
<h4>Featured Products</h4> {{block type="ibtheme/product_list_featured" category_id="3" products_count="5" random_products="" template="catalog/product/list/column.phtml"}} <h4>Best Sellers</h4> {{block type="ibtheme/product_list_featured" category_id="17" products_count="3" template="catalog/product/list/column.phtml"}}

As you can see, you can add as many as you wish different products groups with their own headers titles (e.g. featured products, best sellers, etc).

column_banners
List of banners. This block is located in the store's sidebar. Each banner consists of the banner image and the banner link. You should use the following HTML template for this block:
<a id="ban_next" class="next arows" href="#"><span>Next</span></a> <a id="ban_prev" class="prev arows" href="#"><span>Prev</span></a> <div class="block-title"> <!-- Banners block title -->

2013, ItemBridge

13

<strong><span>Banners</span></strong> </div> <div class="list_carousel"> <ul id="list_banners"> <!-- Banner --> <li class="banner"> <!-- Banner link --> <a href="#"> <div class="prev"> <!-- Banner image --> <img src="{{media url="wysiwyg/banner.png"}}" alt="" /> </div> <!-- Banner title --> <h2>New smells</h2> <!-- Banner description --> <p>in the next series</p> </a> </li> <li class="banner"> <a href="#"> <div class="prev"> <img src="{{media url="wysiwyg/banner.png"}}" alt="" /> </div> <h2>New smells</h2> <p>in the next series</p> </a> </li> <li class="banner"> <a href="#"> <div class="prev"> <img src="{{media url="wysiwyg/banner.png"}}" alt="" /> </div> <h2>New smells</h2> <p>in the next series</p> </a> </li> </ul> </div> <!-- .list_carousel -->

2013, ItemBridge

14

Home Page
Home page is probably the most important page of your store which needs to have decent look to keep the design consistent. To start with, to edit this page, you need to go to CMS Pages select Home page in the pages list.

After that you need to switch to Design tab and change the value of the Layout field to 1 column:

Further, you need to edit the page content at the Content tab by inserting the following code. Please remember that when you are inserting HTML code you need to turn off WYSIWYG editor for proper page look.

2013, ItemBridge

15

HTML template for the home page content:


<!-- Main slider --> <div class="container_12"> <div class="grid_12"> <div class="slidprev"><span>Prev</span></div> <div class="slidnext"><span>Next</span></div> <div id="slider"> <!-- Slide content --> <div class="slide"> <!-- Slide image --> <img src="{{media url="wysiwyg/slide1.jpg"}}" alt="" /> <div class="slid_text"> <!-- Slide title --> <h3 class="slid_title"><span>Breeze Theme</span></h3> <!-- Slide description --> <p><span>Breeze theme will helps you boost sales</span></p> <p><span>and receive good feedback from your clients.</span></p> </div> </div> <!-- End of slide content --> <div class="slide"> <img src="{{media url="wysiwyg/slide2.jpg"}}" alt="" /> <div class="slid_text"> <h3 class="slid_title"><span>Breeze Theme</span></h3> <p><span>Breeze theme will helps you boost sales</span></p> <p><span>and receive good feedback from your clients.</span></p> </div> </div> <div class="slide"> <img src="{{media url="wysiwyg/slide3.jpg"}}" alt="" /> <div class="slid_text"> <h3 class="slid_title"><span>Breeze Theme</span></h3> <p><span>Breeze theme will helps you boost sales</span></p> <p><span>and receive good feedback from your clients.</span></p> </div> </div> </div> <!-- #slider --> <!-- Slides navigation buttons --> <div id="myController"> <div class="control"><span>1</span></div> <div class="control"><span>2</span></div>

2013, ItemBridge

16

<div class="control"><span>3</span></div> </div> </div> <!-- .grid_12 --> </div> <!-- .container_12 --> <div class="clear">&nbsp;</div>

<div class="container_12"> <!-- Banner buttons --> <div id="top_button"> <!-- Banner button content --> <div class="grid_4"> <!-- Banner link --> <a class="button_block best_price" href="#"> <!-- Banner image --> <img src="{{media url="wysiwyg/banner1.png"}}" alt="" /> </a> </div> <!-- End of banner button content --> <div class="grid_4"> <a class="button_block new_smells" href="#"> <img src="{{media url="wysiwyg/banner2.png"}}" alt="" /> </a> </div> <div class="grid_4"> <a class="button_block only_natural" href="#"> <img src="{{media url="wysiwyg/banner3.png"}}" alt="" /> </a> </div> <div class="clear">&nbsp;</div> </div>

<!-- Product slider --> <div class="carousel"> <div class="c_header"> <div class="grid_10"> <!-- Products slider header --> <h2>Best Sellers</h2> </div> <!-- Products slider controls --> <div class="grid_2"> <a id="next_c1" class="next arows" href="#"><span>Next</span></a> <a id="prev_c1" class="prev arows" href="#"><span>Prev</span></a> </div> </div> <!-- .c_header --> <div id="best_sellers" class="list_carousel">

2013, ItemBridge

17

<!-- Products block --> {{block type="ibtheme/product_list_featured" category_id="18" template="catalog/product/list/featured.phtml"}} <!-where: category_id ID of the category containing products to be shown in the products slider products_count products count random_products indicates products random order, remove this attribute to use Magento default order type theme block type for products slider template theme template for products slider --> </div> </div> <!-- .carousel --> <!-- End of products slider --> <div class="carousel"> <div class="c_header"> <div class="grid_10"><h2>Featured Products</h2></div> <div class="grid_2"> <a id="next_c2" class="next arows" href="#"><span>Next</span></a> <a id="prev_c2" class="prev arows" href="#"><span>Prev</span></a> </div> </div> <!-- .c_header --> <div id="home-featured" class="list_carousel"> {{block type="ibtheme/product_list_featured" category_id="18" template="catalog/product/list/featured.phtml"}} </div> </div> <!-- .carousel -->

<div id="content_bottom"> <!-- Text block --> <div class="grid_4"> <div class="bottom_block about_as"> <!-- Text block title --> <h3>About Us</h3> <!-- Text block content --> <p>A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline-level boxes within each line box align with respect to the line box's</p> <p>Alignment is not with respect to the viewport. In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible.</p> <p>by expanding or contracting the contents of inline boxes, else aligned as for the initial value.</p> </div> </div> <!-- .grid_4 --> <!-- End of text block -->

<!-- News block --> <div class="grid_4"> <div class="bottom_block news"> <!-- News block title -->

2013, ItemBridge

18

<h3>News</h3> <!-- News list --> <ul> <!--Post --> <li> <!-- Post date --> 3 january 2012 <!-- Post link --> <a href="#"> <!-- Post title --> A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies </a> </li> <!-- End of post --> <li>2 january 2012<a href="#">A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies</a></li> <li>1 january 2012<a href="#">A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline-level boxes within each line</a></li> </ul> </div> </div> <!-- .grid_4 --> <!-- End of news block --> <!-- Newsletter block --> <div class="grid_4"> <div class="bottom_block newsletter"> <!-- Newsletter block title --> <h3>Newsletter</h3> <!-- Newsletter block descriptiopn --> <p>Cursus in dapibus ultrices velit fusce. Felis lacus erat. Fermentum parturient lacus tristique habitant nullam morbi et odio nibh mus dictum tellus erat.</p> <!-- Newsletter subsribe form --> {{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}} <!-- Newsletter form description --> <div class="lettel_description">Vel lobortis gravida. Cursus in dapibus ultrices velit fusce. Felis lacus erat.</div> </div> </div> <!-- .grid_4 --> <!-- End of newsletter block --> <div class="clear">&nbsp;</div> </div> <!-- #content_bottom --> <div class="clear">&nbsp;</div> </div> <!-- .container_12 -->

Finally, save the page by clicking the Save Page button and check if everything is shown correctly.

2013, ItemBridge

19

Not Found Page


Not Found page is a page which is displayed when the user entered the non-existing URL address, e.g. clicking in the link at any search engine page which further leads to the previously deleted product or page. This page also needs proper look for the consistent design. To start with, to edit this page, you need to go to CMS Pages select 404 Not Found in the pages list.

After that you need to switch to Design tab and change the value of the Layout field to 1 column:

2013, ItemBridge

20

Further, you need to edit the page content at the Content tab by inserting the following code. Please remember that when you are inserting HTML code you need to turn off WYSIWYG editor for proper page look.

HTML template for the 404 page content:


<div class="container_12 page-404"> <!-- Left column --> <div class="grid_4 left_404"> <h1 class="text_404">404</h1> <h6>Page not found...</h6> </div> <!-- .left_404 --> <!-- Right column --> <div class="grid_8"> <h2>Whoops, our bad...</h2> <p><strong>The page you requested was not found, and we have a fine guess why.</strong></p> <ul class="ul"> <li>If you typed the URL directly, please make sure the spelling is correct.</li> <li>If you clicked on a link to get here, the link is outdated.</li> </ul> <p><strong>What can you do?</strong><br /> Have no fear, help is near! There are many ways you can get back on track with Magento Store.</p> <ul class="ul"> <li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li> <li>Use the search bar at the top of the page to search for your products.<br /> Follow these links to get you back on track!</li> <li><a href="{{store url=""}}">Store Home</a> | <a href="{{store url="customer/account"}}">My Account</a></li> </ul> </div> <!-- .grid_8 --> <div class="clear">&nbsp;</div> </div> <!-- .page-404 -->

Finally, save the page by clicking the Save Page button and check if everything is shown correctly.

2013, ItemBridge

21

Theme Design Customization


To configure theme design, e.g. customize theme colors, you should navigate to the System Configuration ItemBridge Design.

2013, ItemBridge

22