Download pdf - Breeze Theme Documentation

Breeze ThemeUser Guide

Revision #2 dated 2013-02-25

© 2013, ItemBridge 1

ContentsContentsIntroductionHelp and Support

Guides and Tutorials SupportThird - party extensions

How to install Quick Start

InstallationConfigurationDemo Content

InstallationConfiguration

Caching System Flush cache Disable cache Enable cache Refresh cache

Enable Theme Contact Information HeaderLogoCategoriesProducts

Cross - sell Content Management System ( CMS )

WYSIWYG editor CMS markup tags Static blocks

LocalizationInterface 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


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


Help and Support

Guides and TutorialsYou 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

SupportWe 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 extensionsThe «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.


http://www.google.com/url?q=http%3A%2F%2Fthemeforest.net%2Fuser%2FInfoStyle&sa=D&sntz=1&usg=AFQjCNH6Ze09We8aHBF8l6qK0-XQW8yjcA

http://www.google.com/url?q=http%3A%2F%2Fthemeforest.net%2Fuser%2FInfoStyle&sa=D&sntz=1&usg=AFQjCNH6Ze09We8aHBF8l6qK0-XQW8yjcA

http://www.google.com/url?q=http%3A%2F%2Fwww.magentocommerce.com%2Fresources%2Fuser-guide-download&sa=D&sntz=1&usg=AFQjCNEa2T_jIOlj2_pZHrnjEzx5cl_7mQ

http://www.magentocommerce.com/resources/user-guide-download



http://www.magentocommerce.com/boards/


http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide

http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide

http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento




http://www.magentocommerce.com/wiki/

http://www.magentocommerce.com/product/faq/

http://www.magentocommerce.com/resources/magento-user-guide

http://www.magentocommerce.com/resources/magento-user-guide

Quick Start

InstallationTo install Breeze theme, you need to perform the following steps:

1. Install Breeze theme 2. Flush Magento cache 3. Enable the theme

ConfigurationNext 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 store2. Upload your logo 3. Create static blocks for user content4. 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 ContentTo install demo categories and products, you can use sample data from official Magento website.


http://www.magentocommerce.com/knowledge-base/entry/installing-sample-data-archive-for-magento-1610

http://www.magentocommerce.com/knowledge-base/entry/installing-sample-data-archive-for-magento-1610

Installation1. Backup your Magento installation and store database.2. Disable Compilation in System » Tools » Compilation, in case it is enabled.3. Disable Magento cache .4. Extract theme files on your computer.5. 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 browser’s cache and store domain cookies.


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


ConfigurationThe following chapter describes key settings of the Magento.

Caching SystemWhen 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 Cache2. Flush Cache Storage3. Fluch Catalog Images Cache4. 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 ThemeMagento 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.


2. The following sections fields should be empty as well:Catalog » Manage Categories » [category] » Custom Design » Custom DesignCatalog » Manage Products » [product] » Design » Custom DesignCMS » Pages » [page] » Design » Custom Theme

Don’t forget to refresh cache after applying design changes.

Contact InformationYou 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.

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

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

CategoriesTo 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. That’s 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 .


http://magento.breeze.itembridge.com/




ProductsYou 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


http://www.magentocommerce.com/wiki/3_-_store_setup_and_management/cms/markup_tags





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 BlocksAll 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_usCall 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.


footer_contactsThis 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:[email protected]">[email protected]</a></li>

footer_linksBlock positioned in the footer, which contains store’s 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">

 <h3>Customer Services</h3>

<nav class="f_menu">

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

<div class="grid_3">

<h3>My Account</h3>

<nav class="f_menu">

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

</nav></div> 

<div class="clear"></div>

footer_social


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_productsSidebar’s 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 slider2. products_count — products count3. random_products — indicates products random order, remove this attribute to use Magento

default order4. type — theme block type for products slider: ibtheme/product_list_featured5. 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_bannersList 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">




<strong><span>Banners</span></strong>

</div>

<div class="list_carousel"> <ul id="list_banners">

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

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


Home PageHome 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.


HTML template for the home page content:<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">

 <div class="slide">

 <img src="{{media url="wysiwyg/slide1.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/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> 

 <div id="myController"> <div class="control"><span>1</span></div> <div class="control"><span>2</span></div>


<div class="control"><span>3</span></div> </div>

</div> </div> <div class="clear"> </div>

<div class="container_12">

 <div id="top_button">

 <div class="grid_4">  <a class="button_block best_price" href="#">  <img src="{{media url="wysiwyg/banner1.png"}}" alt="" /> </a> </div> 

<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"> </div> </div>

 <div class="carousel"> <div class="c_header">

<div class="grid_10">  <h2>Best Sellers</h2> </div>

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

<div id="best_sellers" class="list_carousel">


 {{block type="ibtheme/product_list_featured" category_id="18" template="catalog/product/list/featured.phtml"}}  </div> </div>  

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

<div id="home-featured" class="list_carousel"> {{block type="ibtheme/product_list_featured" category_id="18" template="catalog/product/list/featured.phtml"}} </div> </div> 

<div id="content_bottom">

 <div class="grid_4"> <div class="bottom_block about_as">

 <h3>About Us</h3>

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

 <div class="grid_4"> <div class="bottom_block news">




<h3>News</h3>

 <ul>

 <li>  3 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>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>  

 <div class="grid_4"> <div class="bottom_block newsletter">

 <h3>Newsletter</h3>

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

 {{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}

 <div class="lettel_description">Vel lobortis gravida. Cursus in dapibus ultrices velit fusce. Felis lacus erat.</div> </div> </div>  

<div class="clear"> </div> </div> 

<div class="clear"> </div></div> 

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




Not Found PageNot 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:


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

 <div class="grid_4 left_404"> <h1 class="text_404">404</h1> <h6>Page not found...</h6> </div> 

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

<div class="clear"> </div></div> 

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


http://magento.breeze.itembridge.com/no-route

http://magento.breeze.itembridge.com/no-route

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