Introduction

Progressive is Magento theme, which 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 "Progressive" on ThemeForest. This can be done in Downloads area. Just select "Progressive" in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.


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

Third-party extensions

The «Progressive» 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 Progressive theme you should install your extension into the following theme directories — app/design/frontend/progressive/default and skin/frontend/progressive/default, where progressive 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.


Quick Start

Installation

To install Progressive theme, you need to perform the following steps:

  1. Install Progressive 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

You are able to import the demo content into your site.
To do this, firstly download our demo content.
There are 8 database backups and a folder with media content.

To install one of our demo pages, follow this steps:
1.) Firstly you need prepare your database: it must be clean, without any table in it.
2.) Choose the database you have for magento, go the 'Import' page. Choose the needed .sql file (v1-v8) and press 'Import' button.
3.) After importing the sql tables in the database, copy the clean magento on your FTP. Than copy the files of 'progressive' template. Final thing is to upload the 'media' folder from the demo.zip archive.
4.) At this time go to the installation page of the magento and configure it.
Remember: The demo content will be installed only on the clean database. If you already have your own database with products, static blocks, pages etc, make the back-up of your database.

Video tutorial


Install Progressive theme

  1. 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 Progressive 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 — progressive.
    • Navigate to the Themes tab and in the Default field enter the name of theme in the package
    • default. Click the Save Config button.
    Screenshot 1.

  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.

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

Menu

Menu is formed according to the category tree. Yo need to go to the "Categories" editing (Catalog > Manage Categories), and create there "Root Category"; this will be the main category for the menu tree.

Step 1

After creating the "Root Category", check if it is chosen as the "Root Category" in the settings. To do this, go to "Store Information" settings (System > Manage Stores > Main Store)

Step 2

Than we create a "Subcategory" for the previously created "Root Category".
To set up, go to the tab "Menu".
Here you can see a very large number of different settings, so that you can create menu according to your wishes.
The following options are available:


Header

Header

Options

In order to get the access of the header configuration you need to go to the admin panel, System->Configuration->Design.

You can enable or disable the top panel, and change the type of headers (fixed / regular).

Options for header

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.

Add Languages

For the proper display of the flag next to a language you need to specify the correct code of this language, as it matches the name of the image that will be displayed. List of all pictures of flags you can see in the folder skin/frontend/progressive/default/images/flags.

Store viev information

Currency

To add multiple currency you need to do two steps:
1) Go to Admin Panel System->Configuration->Currency Setup and in the selectlist "Allowed Currencies" choose the currency you need.

Screenshot currency.

2) Go to System->Manage Currency->Rates and set the exchange rates.

Manage currency

Phone

To add a phone in the Header of the site you need to go to System->Configuration->General, and enter the number of the telephone in the field "Store Contact Telephone".

Store contact phone


Header V1
Header V1
  • Select slider type: Theme Style
  • Width (Large devices): 900
  • Height: 450
  • Full Width: Disable
  • Enabled: Enable

Header V2
Header V2

To set up the background under the slider you should go to(System > Design > Header Second). There choose "Image" for "Top Static Block Type|.
Next upload the image to the folder with the theme (skin/frontend/progressive/default/images/bg-images/).
Ender the name of the image in the field "Top Static Block Image".
You must create a static block with ID home_top, and paste the shortcode previously created slide into static content block.
Also you need to insert three side banners there.

  1. <div class="container">
  2. <div class="row slider-banners">
  3. <div class="col-md-9 sliders-container">{{block type="zslider/zslider" name="slider_1"
  4. slider_id="1" template="zslider/zslider.phtml" }}</div>
  5. <div class="col-md-3 banners">
  6. <a class="banner" href="#">
  7. <img src="{{media url="wysiwyg/sider_1.jpg"}}" alt="" />
  8. </a>
  9. <a class="banner" style="background: #ee485c;" href="#">
  10. <img src="{{media url="wysiwyg/sider_2.jpg"}}" alt="" />
  11. </a>
  12. <a class="banner" style="background: #65a93c;" href="#">
  13. <img src="{{media url="wysiwyg/sider_3.jpg"}}" alt="" />
  14. </a>
  15. </div>
  16. </div>
  17. </div>

Slider Options:

  • Select slider type: Layers
  • Width (Large devices): 900
  • Height: 450
  • Full Width: Disable
  • Enabled: Enable
  • Autoplay: Yes
  • Transition: Basic
  • Enable Prev, Next Buttons: Disable
  • Enable Pagination: Enable

Header V3
Header V3

To create this type of header you need to create a static block with the identifier "home_top" and paste html code there.

  1. <!-- Start Metro Banners -->
  2. <div class="container container-metro">
  3. <div class="row metro">
  4. <div class="col-sm-4">
  5. <a class="banner" href="#">
  6. <img src="{{media url=" wysiwyg="" 01.png"}}"="" alt="">
  7. </a>
  8. <a class="margin-top banner" href="#">
  9. <img src="{{media url=" wysiwyg="" 02.png"}}"="" alt="">
  10. </a>
  11. </div>
  12. <div class="col-sm-4">
  13. <a class="banner" href="#">
  14. <img src="{{media url=" wysiwyg="" 03.png"}}"="" alt="">
  15. </a>
  16. </div>
  17. <div class="col-sm-4">
  18. <a class="banner" href="#">
  19. <img src="{{media url=" wysiwyg="" 04.png"}}"="" alt="">
  20. </a>
  21. <a class="margin-top banner" href="#">
  22. <img src="{{media url=" wysiwyg="" 05.png"}}"="" alt="">
  23. </a>
  24. </div>
  25. </div>
  26. </div>
  27. <!-- End Metro Banners -->

To set up the background under the slider you should go to (System > Configuration > Design > Header Second), than set up the option "Gradient Horizontal" in the field "Top Static Block Type", and change the color in fields "Top Static Block Start Color" and "Top Static Block End Color" into #b3768e, #54638e.

Header V3

Header V4
Header V4

For this type of slider you must use type "Full Screen", and paste the generated shortcode in pre-created static block with the ID "home_before_top".

  • Select slider type: Full Screen
  • Width (Large devices): 1170
  • Height: 700
  • Full Width: Disable
  • Enabled: Enable
  • Width (Medium devices): 970
  • Width (Small devices): 720
  • Autoplay: No
  • Transition: Basic
  • Enable Prev, Next Buttons: Disable
  • Enable Pagination: Enable
  1. <div class="promo text white">
  2. FULLY<br>
  3. <b>RESPONSIVE</b> &<br>
  4. <b>RETINA READY</b><br>
  5. THEME
  6. </div>
  1. <a href="#" class="promo learn-more white"><b>LEARN MORE</b></a>

Header V5
Header V5

This option consists of two parts, carousels and slider.
To create a carousel slider you need to create a slider with the type "Carousel" and the style "Third Variant".

Than create the carousel and paste the shortcode in a previously created static block with the ID "home_before_top".

Slider Options:

  • Select slider type: Carousel
  • Select Style: Third Variant
  • Width (Large devices): 1170
  • Full Width: Disable
  • Enabled: Enable
  • Autoplay: Yes
  • Enable Prev, Next Buttons: Disable
  • Enable Pagination: Enable

Next you need to create a slider "Layers", and paste its shortcode into the created static block with the ID "home_top", in the tag div with the class container.

  1. <div class="container">{{block type="zslider/zslider" name="slider_1"
  2. slider_id="1" template="zslider/zslider.phtml" }}
  3. </div>

To set up the background under the slider you should go to (System > Configuration > Design > Header Second), than set up the option "Image" in the field "Top Static Block Type", and change the image in fields "Top Static Block Image".

The path to the folder in which you need to upload the background image is "skin > frontend > progressive > default > images > bg-images"

Header V5

Header V6
Header V6

In the sixth version of the main, there is no header, instead of that we use a slider.

Slider Options:

  • Select slider type: Theme Style
  • Width (Large devices): 570
  • Height: 350
  • Full Width: Disable
  • Enabled: Enable
  • Autoplay: Yes
  • Enable Prev, Next Buttons: Enable
  • Enable Pagination: Enable

Header V7
Header V7

To set it up you need to create a slider "Theme Style". Then create a static block with ID home_top, and paste the shortcode previously created slide into static content block.

Slider Options:

  • Select slider type: Theme Style
  • Width (Large devices): 900
  • Height: 450
  • Full Width: Disable
  • Enabled: Enable

Header V8
Header V8

Slider Options:

  • Select slider type: Layers
  • Width (Large devices): 870
  • Height: 350
  • Full Width: Disable
  • Enabled: Enable
  • Autoplay: Yes
  • Transition: Flow
  • Enable Prev, Next Buttons: Enable
  • Enable Pagination: Disable

Footer

Footer

Options

In order to manage your footer settings you need to go to the admin panel, System->Configuration->Design.

You can eliminate the block of subscription (newsletter) by selecting the checkbox "Disable Footer Newsletter Block"; or the top or bottom of the footer block, by selecting the checkboxes "Disable Footer Top Block", "Disable Footer Bottom Block".

Footer

Blocks

To add a blocks you need to go to CMS->Static Blocks, and add them according to the their appropriate identifiers.

There are four blocks in the footer:

If you do not want to use the block of subscription (newsletter), you can exclude it in the preferences and substitute on any block using the block identifier footer_links_2.

To change the block "General Links" create a new block with the identifier footer_links_3

To change the block "General Links" create a new block with the identifier footer_links_3

Follow Us

This block is located at the bottom of the site, there are links to the social networks, you should use theme specific HTML template to keep the design consistent:

Follow Us

Identifier: footer_links_1

  1. <header>
  2. <h3 class="title">Follow Us</h3>
  3. </header>
  4. <p>Follow us in social media</p>
  5. <a class="sbtnf sbtnf-rounded color
  6. color-hover icon-facebook" href="#">&nbps;</a>
  7. <a class="sbtnf sbtnf-rounded color
  8. color-hover icon-twitter" href="#">&nbps;</a>
  9. <a class="sbtnf sbtnf-rounded color
  10. color-hover icon-gplus" href="#">&nbps;</a>
  11. <a class="sbtnf sbtnf-rounded color
  12. color-hover icon-linkedin" href="#">&nbps;</a>

Icons List:

  • icon-duckduckgo
  • icon-aim
  • icon-delicious
  • icon-paypal
  • icon-flattr
  • icon-android
  • icon-eventful
  • icon-smashmag
  • icon-gplus
  • icon-wikipedia
  • icon-lanyrd
  • icon-calendar
  • icon-stumbleupon
  • icon-fivehundredpx
  • icon-pinterest
  • icon-bitcoin
  • icon-w3c
  • icon-foursquare
  • icon-html5
  • icon-ie
  • icon-call
  • icon-grooveshark
  • icon-forrst
  • icon-digg
  • icon-spotify
  • icon-reddit
  • icon-guest
  • icon-gowalla
  • icon-appstore
  • icon-blogger
  • icon-cc
  • icon-dribbble
  • icon-evernote
  • icon-flickr
  • icon-google
  • icon-viadeo
  • icon-instapaper
  • icon-weibo
  • icon-klout
  • icon-linkedin
  • icon-meetup
  • icon-vk
  • icon-plancast
  • icon-disqus
  • icon-rss
  • icon-skype
  • icon-twitter
  • icon-youtube
  • icon-vimeo
  • icon-windows
  • icon-xing
  • icon-yahoo
  • icon-chrome
  • icon-email
  • icon-macstore
  • icon-myspace
  • icon-podcast
  • icon-amazon
  • icon-steam
  • icon-cloudapp
  • icon-dropbox
  • icon-ebay
  • icon-facebook
  • icon-github
  • icon-googleplay
  • icon-itunes
  • icon-plurk
  • icon-songkick
  • icon-lastfm
  • icon-gmail
  • icon-pinboard
  • icon-openid
  • icon-quora
  • icon-soundcloud
  • icon-tumblr
  • icon-eventasaurus
  • icon-wordpress
  • icon-yelp
  • icon-intensedebate
  • icon-eventbrite
  • icon-scribd
  • icon-posterous
  • icon-stripe
  • icon-opentable
  • icon-cart
  • icon-print
  • icon-angellist
  • icon-instagram
  • icon-dwolla
  • icon-appnet
  • icon-statusnet
  • icon-acrobat
  • icon-drupal
  • icon-buffer
  • icon-pocket
  • icon-bitbucket

Footer Phones

This block is located at the bottom of the site, there are phone numbers, you should use theme specific HTML template to keep the design consistent:

Footer Phones in Magento

Identifier: footer_phones

  1. <p>
  2. <strong class="title">Call Us:</strong> +1 (877) 123-45-67 <br />
  3. <strong>or</strong> +1 (777) 123-45-67
  4. </p>

Address

To add the address you need to go to System->Configuration->General, and enter the address in the field "Store Contact Address".

Footer Address in Magento

Category

To change the number of output items in a particular category, we use xml code. It must be inserted in the field "Custom Layout Update" which is found under the "Custom Design" when editing the category.

setDefaultGridPerPage - responsible for displaying by default.
addPagerLimit - to change the option "Show" in the toolbar.

  1. <reference name="product_list_toolbar">
  2. <action method="setDefaultGridPerPage">
  3. <limit>27</limit>
  4. </action>
  5. <action method="addPagerLimit">
  6. <mode>grid</mode>
  7. <limit>27</limit>
  8. </action>
  9. <action method="addPagerLimit">
  10. <mode>grid</mode>
  11. <limit>36</limit>
  12. </action>
  13. <action method="addPagerLimit">
  14. <mode>grid</mode>
  15. <limit>45</limit>
  16. </action>
  17. </reference>

Header

Header content

To set up the header categories go to Catalog-> Manage Categories, then select the needed category, enter the description and attach the image.

Header content

Sidebar

The theme has two methods of configuring sidebar:

  1. With the use of Custom Layout Update (xml)
  2. With the use of php (editing the file)

Custom Layout Update

You need to go to tab "Custom Design" in categories editing, there you can submit your xml code, add or remove various blocks of sidebar.

Header content

Using tags <reference> you may refer to either the left or right sidebar specifying a value attribute name

<reference name="left"></reference>
<reference name="right"></reference>

For adding and deleting the blocks from the sidebar we use <action></action> with the attribute method, such as insert and unsetChild.

  1. <reference name="left">
  2. <action method="unsetChild"><name>catalog.leftnav</name></action>
  3. <action method="unsetChild"><name>left.newsletter</name></action>
  4. <action method="unsetChild"><name>tags_popular</name></action>
  5. </reference>
  6. <reference name="right">
  7. <action method="unsetChild"><name>right.reports.product.viewed</name></action>
  8. <action method="unsetChild"><name>right.reports.product.compared</name></action>
  9. <action method="insert"><blockName>catalog.leftnav</blockName></action>
  10. <action method="insert"><blockName>tags_popular</blockName></action>
  11. </reference>

To add the sidebar to the custom block, e.g. "static block", which you can create here (CMS > Static Blocks > Add New Block), we use the option setBlockId for attribute method.

  1. <block type="cms/block" name="your-block-id">
  2. <action method="setBlockId"><block_id>your-block-id</block_id></action>
  3. </block>

The list of blocks that are available in magento:

  • catalog.compare.sidebar
  • catalog.leftnav
  • catalog.product.related
  • catalogsearch.leftnav
  • category.nav
  • customer_account_navigation
  • left.newsletter
  • left.permanent.callout
  • paypal.partner.right.logo
  • right.permanent.callout
  • right.poll
  • right.reports.product.compared
  • right.reports.product.viewed
  • sale.reorder.sidebar
  • tags_popular
  • wishlist_sidebar

Using php (editing the file)

With the use of files, it will be easier to display the blocks you need and sort them correctly. You will only need go to "Custom Layout Update" and remove the blocks that are not needed, and connect the block that outputs the file.

The link to the file: app/design/frontend/progressive/default/template/catalog/category/sidebar.phtml.

Enabling th block:
<block type="core/template" name="category.sidebar" template="catalog/category/sidebar.phtml"/>

Example of usage:

  1. <reference name="right">
  2. <action method="unsetChild"><child>right.reports.product.compared</child></action>
  3. <action method="unsetChild"><child>right.reports.product.viewed</child></action>
  4. <action method="unsetChild"><child>catalog.compare.sidebar</child></action>
  5. <action method="unsetChild"><child>right.poll</child></action>
  6. <block type="core/template" name="category.sidebar" template="catalog/category/sidebar.phtml"/>
  7. </reference>

There are additional blocks that are displayed in the sidebar

There are static blocks with such identifiers for the sidebar:

  • right_sidebar_block
  • left_sidebar_block
  • before_left_sidebar
  • after_left_sidebar
  • before_right_sidebar
  • after_right_sidebar

To set up the sidebar blocks use "Custom Layout Update". You can find the detailed information about the customization in the documentation page.


Settings

Our theme provides the following settings such as adding a category to the top of the static block (e.g. the banners carousel) and Product List settings.

To add a carousel to the top of the page, firstly, you must a carousel with the type "Third Variant", and than paste the generated shortcode into the field "Top Static Block" in the tab "Custom Design".

Settings in Magento admin panel
Settings in Magento admin panel
You can customize the representation of the products with the following options (Grid Products Size, Rotate, Change Image on mouseover, Show Action Button on mouseover).
Option Description
Grid Products Size There are three variants (Normal, Small, Large) in this option. This option changes the size of products in grid type list.
Rotate This option enables or disables the rotation of the products when hover on it.
Change Image on mouseover This option enables or disables the changing of pictures on the product when you hover on it, is relevant to the grid and list type. Works only when "Rotate" is off.
Show Action Buttons on mouseover This option enables or disables the appearance of action buttons when you hover on it ("Rotate" is off).

Home page

There are 8 options of the main home page that are provided in our theme:

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 and select Home page in the pages list.

Than you need to press the button "Add New Page".

After that you need to switch to Design tab and change the value of the Layout field to appropriate type of layout:

Edit "Home page"

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.


Home 1

Layout: 1 column.

HTML template for the home page content:
  1. <!-- Start Carousel -->
  2. <div class="bottom-padding-mini">
  3. {{block type="ibtheme/product_list_featured" category_id="6" products_count="10"
  4. random_products="" title="Our Feature" carousel_type="2"
  5. template="catalog/product/list/carousel.phtml"}}
  6. </div>
  7. <!-- End Carousel -->
  8. <!-- Start Product Tabs -->
  9. <div class="products-tab bottom-padding bottom-padding-mini">
  10. <ul class="nav nav-tabs">
  11. <li class="active">
  12. <a href="#best-sellers">Best Sellers</a>
  13. </li>
  14. <li>
  15. <a href="#new-products">New Products</a>
  16. </li>
  17. <li>
  18. <a href="#related-products">Related Products</a>
  19. </li>
  20. </ul>
  21. <div class="tab-content">
  22. <div id="best-sellers" class="tab-pane row active fade in text-center">
  23. {{block type="ibtheme/product_list_featured" category_id="20" products_count="6"
  24. random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  25. </div>
  26. <div id="new-products" class="tab-pane row fade in text-center">
  27. {{block type="ibtheme/product_list_featured" category_id="51" products_count="6"
  28. random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  29. </div>
  30. <div id="related-products" class="tab-pane row fade in text-center">
  31. {{block type="ibtheme/product_list_featured" category_id="75" products_count="6"
  32. random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  33. </div>
  34. </div>
  35. </div>
  36. <!-- End Product Tabs -->
  37. <!-- Start Manufactures -->
  38. <div class="bottom-padding">
  39. {{block type="zslider/zslider" name="slider_3" slider_id="3" template="zslider/zslider.phtml" }}
  40. </div>
  41. <!-- End Manufactures -->
  42. <div class="row">
  43. <div class="about-us col-sm-6 col-md-6 bottom-padding">
  44. <div class="title-box">
  45. <h2 class="title">About Us</h2>
  46. </div>
  47. <p><strong>some text</strong></p>
  48. <p>Some text.</p>
  49. </div>
  50. <div class="col-sm-6 col-md-6">
  51. <!-- .about-us -->
  52. {{block type="clnews/news" block_id="news_block" template="clnews/home.phtml"}}
  53. </div>
  54. </div>

To display the news block you need to install the News by CommerceLab module.


Home 2

Layout: 1 column.

HTML template for the home page content:
  1. <!-- Start Services -->
  2. <div class="row services">
  3. <div class="service col-sm-4 col-md-4">
  4. <div class="icon bg">
  5. <div class="livicon" data-n="tablet" data-s="40" data-c="#000" data-hc="0"></div>
  6. </div>
  7. <h6 class="title">Web Design</h6>
  8. <div class="text-small"> some text
  9. <br> <a class="btn btn-default" href="#">Read more</a>
  10. </div>
  11. </div>
  12. <div class="service col-sm-4 col-md-4">
  13. <div class="icon bg">
  14. <div class="livicon" data-n="html5" data-s="50" data-c="#000" data-hc="0"></div>
  15. </div>
  16. <h6 class="title">Graphic Design</h6>
  17. <div class="text-small">some text
  18. <br>
  19. <a class="btn btn-default" href="#">Read more</a>
  20. </div>
  21. </div>
  22. <div class="service col-sm-4 col-md-4">
  23. <div class="icon bg">
  24. <div class="livicon" data-n="responsive" data-s="40" data-c="#000" data-hc="0" data-d="1600"></div>
  25. </div>
  26. <h6 class="title">Internet Marketing</h6>
  27. <div class="text-small">some text
  28. <br> <a class="btn btn-default" href="#">Read more</a>
  29. </div>
  30. </div>
  31. </div>
  32. <!-- End Services -->
  33.  
  34. <p></p>
  35. <!-- Start Carousel -->
  36. <div class="clearfix products-tab bottom-padding">
  37. {{block type="ibtheme/product_list_featured" category_id="13" products_count="10" random_products=""
  38. title="Our Featured Products" carousel_type="3" template="catalog/product/list/carousel.phtml"}}
  39. </div>
  40. <!-- End Carousel -->
  41.  
  42. <!-- Start Banners -->
  43. <div class="row">
  44. <div class="col-sm-9 bottom-padding">
  45. <a class="banner" href="#">
  46. <img src="{{media url=" wysiwyg="" b1.jpg "}}"="" alt="">
  47. </a>
  48. </div>
  49. <div class="col-sm-3 bottom-padding">
  50. <a class="banner" href="#">
  51. <img src="{{media url=" wysiwyg="" b2.jpg "}}"="" alt="">
  52. </a>
  53. </div>
  54. </div>
  55. <!-- End Banners -->
  56.  
  57. <!-- Start Tabs -->
  58. <div class="products-tab bottom-padding bottom-padding-mini">
  59. <ul class="nav nav-tabs">
  60. <li class="active"><a href="#best-sellers">Best Sellers</a>
  61. </li>
  62. <li><a href="#new-products">New Products</a>
  63. </li>
  64. <li><a href="#related-products">Related Products</a>
  65. </li>
  66. </ul>
  67. <div class="tab-content">
  68. <div id="best-sellers" class="tab-pane row active fade in text-center">
  69. {{block type="ibtheme/product_list_featured" category_id="7" products_count="12"
  70. random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  71. </div>
  72. <div id="new-products" class="tab-pane row fade in text-center">
  73. {{block type="ibtheme/product_list_featured" category_id="41"
  74. products_count="12" random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  75. </div>
  76. <div id="related-products" class="tab-pane row fade in text-center">
  77. {{block type="ibtheme/product_list_featured" category_id="12" products_count="12"
  78. random_products="" list_type="mini" template="catalog/product/list/list.phtml"}}
  79. </div>
  80. </div>
  81. </div>
  82. <!-- End Tabs -->
  83.  
  84. <div class="row">
  85. <div class="col-sm-12 col-md-6 promo-partners bottom-padding">
  86. <div class="title-box">
  87. <h2 class="title">Our partners</h2>
  88. </div>
  89. <div class="row manufactures manufactures-list">
  90. <div class="make-wrapper">
  91. <a class="make" href="#">
  92. <img src="{{media url=" wysiwyg="" make-1.png "}}"="" alt="">
  93. </a>
  94. </div>
  95.  
  96. <div class="make-wrapper">
  97. <a class="make" href="#">
  98. <img src="{{media url=" wysiwyg="" make-2.png "}}"="" alt="">
  99. </a>
  100. </div>
  101.  
  102. <div class="make-wrapper">
  103. <a class="make" href="#">
  104. <img src="{{media url=" wysiwyg="" make-6.png "}}"="" alt="">
  105. </a>
  106. </div>
  107. </div>
  108. <p>some text</p>
  109. </div>
  110. <!-- .about-us -->
  111. <div class="col-sm-12 col-md-6">
  112. {{block type="clnews/news" block_id="news_block"
  113. view_type="2" template="clnews/home.phtml"}}
  114. </div>
  115. </div>

To display the news block you need to install the News by CommerceLab module.


Home 3

In the upper part, under the header you can see banners carousel, to insert it you should create a slider with the type "Carousel > Second Variant", and paste its shortcode into the static block with the identifier home_after_top

Layout: 1 column.

HTML template for the home page content:
  1. <!-- Start Product Tabs -->
  2. <div class="products-tab">
  3. <ul class="nav nav-tabs">
  4. <li class="active">
  5. <a href="#best-sellers">Best Sellers</a>
  6. </li>
  7. <li>
  8. <a href="#new-products">New Products</a>
  9. </li>
  10. <li>
  11. <a href="#related-products">Related Products</a>
  12. </li>
  13. </ul>
  14. <div class="tab-content">
  15. <div id="best-sellers" class="tab-pane row active fade in text-center">
  16. {{block type="ibtheme/product_list_featured" category_id="35"
  17. products_count="8" template="catalog/product/list/list.phtml"}}
  18. </div>
  19. <div id="new-products" class="tab-pane row fade in text-center">
  20. {{block type="ibtheme/product_list_featured" category_id="7"
  21. products_count="8" template="catalog/product/list/list.phtml"}}
  22. </div>
  23. <div id="related-products" class="tab-pane row fade in text-center">
  24. {{block type="ibtheme/product_list_featured" category_id="18"
  25. products_count="8" template="catalog/product/list/list.phtml"}}
  26. </div>
  27. </div>
  28. </div>
  29. <!-- End Product Tabs -->
  30. <p> </p>
  31. <div class="full-width-box auto-width">
  32. <div class="fwb-bg fwb-paralax" data-stellar-background-ratio="0.5"> </div>
  33. <div class="container">
  34. <div class="white text-center">
  35. <div class="title-box text-center title-white">
  36. <h1 class="title no-top-padding">Promo Section</h1>
  37. </div>
  38. <p>some text</p>
  39. <a class="btn btn-default" href="#">Read more</a>
  40. </div>
  41. <div class="clearfix"> </div>
  42. </div>
  43. </div>
  44. <p> </p>
  45. <p> </p>
  46. <div class="row">
  47. <div class="col-sm-8 bottom-padding">
  48. {{block type="ibtheme/product_list_featured" category_id="13" products_count="10"
  49. random_products="" title="Our Featured Products" carousel_type="3"
  50. template="catalog/product/list/carousel.phtml"}}
  51. </div>
  52. <div class="col-sm-4 bottom-padding">
  53. <a href="#" class="banner">
  54. <img src="{{media url=" wysiwyg="" 3.jpg"}}"="" alt=""></a>
  55. </div>
  56. </div>
  57. <div class="row">
  58. <div class="col-sm-12 col-md-6 promo-partners bottom-padding">
  59. <div class="title-box">
  60. <h2 class="title">Our partners</h2>
  61. </div>
  62. <div class="row manufactures manufactures-list">
  63. <div class="make-wrapper">
  64. <a class="make" href="#">
  65. <img src="{{media url=" wysiwyg="" make-1.png"}}"="" alt="">
  66. </a>
  67. </div>
  68. <div class="make-wrapper">
  69. <a class="make" href="#">
  70. <img src="{{media url=" wysiwyg="" make-2.png"}}"="" alt="">
  71. </a>
  72. </div>
  73. <div class="make-wrapper">
  74. <a class="make" href="#">
  75. <img src="{{media url=" wysiwyg="" make-6.png"}}"="" alt="">
  76. </a>
  77. </div>
  78. </div>
  79. <p>some text</p>
  80. <p>some text</p>
  81. </div>
  82. <!-- .about-us -->
  83. <div class="col-sm-12 col-md-6">
  84. {{block type="clnews/news" block_id="news_block" view_type="2"
  85. template="clnews/home.phtml"}}
  86. </div>
  87. </div>

To display the news block you need to install the News by CommerceLab module.


Home 4

Layout: 1 column.

HTML template for the home page content:
  1. <!-- Start Banners -->
  2. <div class="row">
  3. <div class="col-sm-4 bottom-padding"><a href="#" class="banner"><img src="{{media url=" wysiwyg="" 3_1.jpg"}}"="" alt=""></a></div>
  4. <div class="col-sm-4 bottom-padding"><a href="#" class="banner"><img src="{{media url=" wysiwyg="" 3_2.jpg"}}"="" alt=""></a></div>
  5. <div class="col-sm-4 bottom-padding"><a href="#" class="banner"><img src="{{media url=" wysiwyg="" 3_3.jpg"}}"="" alt=""></a></div>
  6. </div>
  7. <!-- End Banners -->
  8. <!-- Start Tabs -->
  9. <div class="products-tab bottom-padding bottom-padding-mini">
  10. <ul class="nav nav-tabs">
  11. <li class="active"><a href="#best-sellers">Best Sellers</a></li>
  12. <li><a href="#new-products">New Products</a></li>
  13. <li><a href="#related-products">Related Products</a></li>
  14. </ul>
  15. <div class="tab-content">
  16. <div id="best-sellers" class="tab-pane row active fade in text-center">{{block type="ibtheme/product_list_featured" category_id="27" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  17. <div id="new-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="31" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  18. <div id="related-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="34" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  19. </div>
  20. </div>
  21. <!-- End Tabs -->
  22. <!-- Start Promo Section -->
  23. <div class="full-width-box auto-width bottom-padding">
  24. <div class="fwb-bg fwb-paralax" data-stellar-background-ratio="0.5"> </div>
  25. <div class="container margin-top-60 bottom-padding-medium">
  26. <div class="white text-center">
  27. <div class="title-box text-center title-white">
  28. <h1 class="title no-top-padding">Promo Section</h1>
  29. </div>
  30. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quisquam aperiam necessitatibus id consequuntur quidem praesentium laboriosam repellendus modi fugiat aliquam quam minus mollitia eveniet sapiente perferendis voluptatibus ad rem? Id nesciunt alias neque non illum facilis nobis cupiditate ullam corrupti nisi esse cum tempore tempora praesentium soluta autem vitae!</p>
  31. <a class="btn btn-default" href="#">Read more</a>
  32. </div>
  33. <div class="clearfix"> </div>
  34. </div>
  35. </div>
  36. <!-- End Promo Section -->
  37. <div class="title-box">
  38. <h2 class="title">Bestsellers</h2>
  39. </div>
  40. <div class="row text-center bottom-padding-mini">
  41. {{block type="ibtheme/product_list_featured" category_id="5"
  42. products_count="12" random_products="" list_type="mini"
  43. template="catalog/product/list/list.phtml"}}
  44. </div>
  45. <!-- Start Who We Are Section -->
  46. <div class="title-box">
  47. <h1 class="title">Who we are</h1>
  48. </div>
  49. <div class="row">
  50. <div class="col-sm-6 col-md-6 bottom-padding">
  51. <p class="lead"><strong>text</strong></p>
  52. <p>some text</p>
  53. <p>some text</p>
  54. <a href="#" class="btn btn-default">Read more</a>
  55. </div>
  56. <div class="col-sm-6 col-md-6 bottom-padding">
  57. <div class="progress border-radius hover" data-appear-progress-animation="80%">
  58. <div class="progress-bar progress-bar-info">Web Design 80%</div>
  59. </div>
  60. <div class="progress border-radius" data-appear-progress-animation="70%">
  61. <div class="progress-bar progress-bar-success">HTML/CSS 70%</div>
  62. </div>
  63. <div class="progress border-radius" data-appear-progress-animation="40%">
  64. <div class="progress-bar progress-bar-info">Opencart 40%</div>
  65. </div>
  66. <div class="progress border-radius" data-appear-progress-animation="90%">
  67. <div class="progress-bar progress-bar-warning">Graphic Design 90%</div>
  68. </div>
  69. <div class="progress border-radius" data-appear-progress-animation="58%">
  70. <div class="progress-bar progress-bar-danger">WordPress 58%</div>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- End Who We Are Section -->
  75. <!-- Start Our Partners and Latest Posts Section -->
  76. <div class="row">
  77. <div class="col-sm-12 col-md-6 promo-partners bottom-padding">
  78. <div class="title-box">
  79. <h2 class="title">Our partners</h2>
  80. </div>
  81. <div class="row manufactures manufactures-list">
  82. <div class="make-wrapper">
  83. <a class="make" href="#">
  84. <img src="{{media url=" wysiwyg="" make-1.png"}}"="" alt="">
  85. </a>
  86. </div>
  87. <div class="make-wrapper">
  88. <a class="make" href="#">
  89. <img src="{{media url=" wysiwyg="" make-2.png"}}"="" alt="">
  90. </a>
  91. </div>
  92. <div class="make-wrapper">
  93. <a class="make" href="#">
  94. <img src="{{media url=" wysiwyg="" make-6.png"}}"="" alt="">
  95. </a>
  96. </div>
  97. </div>
  98. <p>some text</p>
  99. <p>some text</p>
  100. </div>
  101. <!-- .about-us -->
  102. <div class="col-sm-12 col-md-6">
  103. {{block type="clnews/news" block_id="news_block" view_type="2"
  104. template="clnews/home.phtml"}}
  105. </div>
  106. </div>
  107. <!-- End Our Partners and Latest Posts Section -->

Home 5

HTML template for the home page content:
  1. <!-- Start Banners -->
  2. <div class="row">
  3. <div class="col-sm-3 bottom-padding">
  4. <a class="banner round-5" href="#">
  5. <img class="img-rounded" src="{{media url=" wysiwyg="" 01_1.jpg"}}"="" alt="">
  6. </a>
  7. </div>
  8. <div class="col-sm-6 bottom-padding">
  9. <a class="banner round-5" href="#">
  10. <img class="img-rounded" src="{{media url=" wysiwyg="" 02.jpg"}}"="" alt="">
  11. </a>
  12. </div>
  13. <div class="col-sm-3 bottom-padding">
  14. <a class="banner round-5" href="#">
  15. <img class="img-rounded" src="{{media url=" wysiwyg="" 03.jpg"}}"="" alt="">
  16. </a>
  17. </div>
  18. </div>
  19. <!-- End Banners -->
  20. <!-- Start Tabs -->
  21. <div class="products-tab bottom-padding bottom-padding-mini">
  22. <ul class="nav nav-tabs">
  23. <li class="active">
  24. <a href="#best-sellers">Best Sellers</a>
  25. </li>
  26. <li>
  27. <a href="#new-products">New Products</a>
  28. </li>
  29. <li>
  30. <a href="#related-products">Related Products</a>
  31. </li>
  32. </ul>
  33. <div class="tab-content">
  34. <div id="best-sellers" class="tab-pane row active fade in text-center">{{block type="ibtheme/product_list_featured" category_id="27" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  35. <div id="new-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="31" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  36. <div id="related-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="34" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  37. </div>
  38. </div>
  39. <!-- End Tabs -->
  40. <!-- Start Pricing -->
  41. <div class="full-width-box auto-width bottom-padding padding-bottom-36">
  42. <div class="fwb-bg fwb-paralax" data-stellar-background-ratio="0.5">
  43. <div class="overlay"> </div>
  44. </div>
  45. <div class="container">
  46. <div class="col-sm-6 col-md-4 col-lg-3">
  47. <div class="pricing">
  48. <div class="title"><a href="#">First Package</a></div>
  49. <div class="price-box">
  50. <div class="icon pull-right circle">
  51. <span class="livicon" data-n="shopping-cart" data-s="32" data-c="#1e1e1e" data-hc="0"></span>
  52. </div>
  53. <div class="starting">Starting at</div>
  54. <div class="price">$199<span>/month</span></div>
  55. </div>
  56. <ul class="options">
  57. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  58. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  59. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  60. </ul>
  61. <div class="bottom-box">
  62. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  63. <div class="rating-box">
  64. <div style="width: 60%" class="rating">
  65. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-fwb-bg="new 0 0 73 12" xml:space="preserve">
  66. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  67. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  68. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  69. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  70. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  71. </svg>
  72. </div>
  73. </div>
  74. <div class="clearfix"></div>
  75. <button class="btn btn-default btn-lg">Buy Now</button>
  76. </div>
  77. </div><!-- .pricing -->
  78. </div>
  79. <div class="col-sm-6 col-md-4 col-lg-3">
  80. <div class="pricing prising-info">
  81. <div class="title"><a href="#">Second Package</a></div>
  82. <div class="price-box">
  83. <div class="icon pull-right circle">
  84. <span class="livicon" data-n="wrench" data-s="32" data-c="#35beeb" data-hc="0"></span>
  85. </div>
  86. <div class="starting">Starting at</div>
  87. <div class="price">$299<span>/month</span></div>
  88. </div>
  89. <ul class="options">
  90. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  91. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  92. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  93. </ul>
  94. <div class="bottom-box">
  95. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  96. <div class="rating-box">
  97. <div style="width: 80%" class="rating">
  98. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-fwb-bg="new 0 0 73 12" xml:space="preserve">
  99. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  100. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  101. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  102. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  103. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  104. </svg>
  105. </div>
  106. </div>
  107. <div class="clearfix"></div>
  108. <button class="btn btn-info btn-lg">Buy Now</button>
  109. </div>
  110. </div><!-- .pricing -->
  111. </div>
  112. <div class="col-sm-6 col-md-4 col-lg-3">
  113. <div class="pricing pricing-success">
  114. <div class="title"><a href="#">Third Package</a></div>
  115. <div class="price-box">
  116. <div class="icon pull-right circle">
  117. <span class="livicon" data-n="piggybank" data-s="32" data-c="#9ab71a" data-hc="0"></span>
  118. </div>
  119. <div class="starting">Starting at</div>
  120. <div class="price">$399<span>/month</span></div>
  121. </div>
  122. <ul class="options">
  123. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  124. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  125. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  126. </ul>
  127. <div class="bottom-box">
  128. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  129. <div class="rating-box">
  130. <div style="width: 80%" class="rating">
  131. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-fwb-bg="new 0 0 73 12" xml:space="preserve">
  132. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  133. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  134. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  135. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  136. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  137. </svg>
  138. </div>
  139. </div>
  140. <div class="clearfix"></div>
  141. <button class="btn btn-success btn-lg">Buy Now</button>
  142. </div>
  143. </div><!-- .pricing -->
  144. </div>
  145. <div class="col-sm-6 col-md-4 col-md-offset-4 col-lg-3 col-lg-offset-0">
  146. <div class="pricing pricing-error">
  147. <div class="title"><a href="#">Fourth Package</a></div>
  148. <div class="price-box">
  149. <div class="icon pull-right circle">
  150. <span class="livicon" data-n="key" data-s="32" data-c="#de2a61" data-hc="0"></span>
  151. </div>
  152. <div class="starting">Starting at</div>
  153. <div class="price">$499<span>/month</span></div>
  154. </div>
  155. <ul class="options">
  156. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  157. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  158. <li class="active"><span><i class="fa fa-check"></i></span>Easy Setup</li>
  159. </ul>
  160. <div class="bottom-box">
  161. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  162. <div class="rating-box">
  163. <div style="width: 100%" class="rating">
  164. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-fwb-bg="new 0 0 73 12" xml:space="preserve">
  165. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  166. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  167. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  168. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  169. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  170. </svg>
  171. </div>
  172. </div>
  173. <div class="clearfix"></div>
  174. <button class="btn btn-danger btn-lg">Buy Now</button>
  175. </div>
  176. </div><!-- .pricing -->
  177. </div>
  178. </div>
  179. </div>
  180. <!-- End Pricing -->
  181. <!-- Start Carousel -->
  182. <div class="clearfix bottom-padding">{{block type="ibtheme/product_list_featured" category_id="13" products_count="10" random_products="" title="Our Featured Products" carousel_type="3" template="catalog/product/list/carousel.phtml"}}</div>
  183. <!-- End Carousel -->
  184. <div class="row">
  185. <div class="col-sm-12 col-md-6 promo-partners bottom-padding">
  186. <div class="title-box">
  187. <h2 class="title">Our partners</h2>
  188. </div>
  189. <div class="row manufactures manufactures-list">
  190. <div class="make-wrapper"><a class="make" href="#"> <img src="{{media url=" wysiwyg="" make-1.png"}}"="" alt=""> </a></div>
  191. <!--
  192. -->
  193. <div class="make-wrapper"><a class="make" href="#"> <img src="{{media url=" wysiwyg="" make-2.png"}}"="" alt=""> </a></div>
  194. <!--
  195. -->
  196. <div class="make-wrapper"><a class="make" href="#"> <img src="{{media url=" wysiwyg="" make-6.png"}}"="" alt=""> </a></div>
  197. </div>
  198. <p>Duis bibendum pulvinar laoreet. Ut eu arcu sit amet elit placerat pharetra sit amet a tortor. Fusce vestibulum auctor rhoncus. Nullam rhoncus, tellus a congue elementum, leo ipsum tincidunt justo, ut condimentum velit eros et lectus. Phasellus ultrices rhoncus vehicula.</p>
  199. <p>Integer ultricies semper massa non condimentum. Phasellus eu ipsum justo. Nullam non pulvinar purus. Ut ante ipsum, venenatis at tristique quis, congue vitae felis. Aliquam cursus diam in massa dapibus auctor. In volutpat, risus non egestas luctus, justo tellus laoreet justo.</p>
  200. </div>
  201. <!-- .about-us -->
  202. <div class="col-sm-12 col-md-6 bottom-padding">
  203. {{block type="clnews/news" block_id="news_block" view_type="2" template="clnews/home.phtml"}}
  204. <div class="clearfix"></div>
  205. </div>
  206. </div>
  207. <!-- Start Content Band -->
  208. <div class="full-width-box auto-width margin-bottom-minus bg" style="background: #61b72b;">
  209. <div class="container">
  210. <div class="map-box">
  211. <div class="map-canvas" data-zoom="6" data-lat="40.748441" data-lng="-73.985664" data-title="Bryant Park" data-content="New York, NY"> </div>
  212. </div>
  213. </div>
  214. </div>
  215. <!-- End Content Band -->

To display the news block you need to install the News by CommerceLab module.

In order to configure the background for the block "Content Band", in the design settings you need to select a value "Image" for the item "Content Band Type" and enter the name of the picture in the field "Content Band BG Image" pre-loaded it in the folder (skin > frontend > progressive > default > images > bg-images)

Content Band

Home 6

For this version of the home page you need to select in the tab "Design" layout Type "3 columns",
and specify such xml code in the box "Layout Update XML"

  1. <reference name="left">
  2. <block type="cms/block" name="left_bottom_products">
  3. <action method="setBlockId"><block_id>left_bottom_products</block_id></action>
  4. </block>
  5. <action method="unsetChild"><name>catalog.leftnav</name></action>
  6. <action method="unsetChild"><name>left.newsletter</name></action>
  7. <action method="unsetChild"><name>tags_popular</name></action>
  8. </reference>
  9. <reference name="right">
  10. <block type="cms/block" name="right_top_banners">
  11. <action method="setBlockId"><block_id>right_top_banners</block_id></action>
  12. </block>
  13. <block type="cms/block" name="sidebar_product_twitter">
  14. <action method="setBlockId"><block_id>sidebar_product_twitter</block_id></action>
  15. </block>
  16. <action method="unsetChild"><name>right.reports.product.viewed</name></action>
  17. <action method="unsetChild"><name>right.reports.product.compared</name></action>
  18. <remove name="catalog.compare.sidebar">
  19. <action method="insert"><blockname>catalog.leftnav</blockname></action>
  20. <action method="insert"><blockname>tags_popular</blockname></action>
  21. </remove></reference>
HTML template for the home page content:
  1. {{block type="zslider/zslider" name="slider_1" slider_id="1" template="zslider/zslider.phtml" }}
  2. <!-- Start Products Carousel -->
  3. <div class="title-box">
  4. <h2 class="title">Our features</h2>
  5. </div>
  6. <div class="row text-center">
  7. {{block type="ibtheme/product_list_featured" category_id="13" products_count="9"
  8. random_products="" title="Our Feature" list_type="mini" template="catalog/product/list/list.phtml"}}
  9. </div>
  10. <!-- End Products Carousel -->

You also need to create several static blocks with such identifiers and html content.

right_top_banners
  1. <aside class="widget" style="width: auto; max-width: 378px; left: 0px;">
  2. <a class="banner" href="#">
  3. <img src="{{media url=" http:="" placehold.it="" 270x102"}}"="" alt="">
  4. </a><br>
  5. <a class="banner" href="#">
  6. <img src="{{media url=" http:="" placehold.it="" 270x102"}}"="" alt="">
  7. </a><br>
  8. <a class="banner" href="#">
  9. <img src="{{media url=" http:="" placehold.it="" 270x102"}}"="" alt="">
  10. </a>
  11. </aside>
sidebar_product_twitter
  1. <aside class="widget" style="width: auto; max-width: 378px; left: 0px;">
  2. <a class="banner" href="#"><img src="{{media url=" wysiwyg="" 6-7.jpg"}}"="" alt=""></a>
  3. </aside>
  4. <aside class="widget twitter-widget" style="width: auto; max-width: 378px; left: 0px;">
  5. <header>
  6. <h3 class="title">Twitter</h3>
  7. </header>
  8. <a class="twitter-timeline" href="https://twitter.com/ItemBridge"
  9. data-widget-id="446943467755696128">@ItemBridge</a>
  10. </aside>
left_top_products
  1. {{block type="ibtheme/product_list_featured" category_id="18" products_count="2"
  2. random_products="" title="Custom Category Products"
  3. template="catalog/product/list/column.phtml"}}
left_bottom_products
  1. {{block type="ibtheme/product_list_featured" category_id="15" products_count="3"
  2. random_products="" title="Custom Category Products" template="catalog/product/list/column.phtml"}}
  3. {{block type="ibtheme/product_list_featured" category_id="13" products_count="10"
  4. random_products="" title="Our Feature" carousel_type="4"
  5. template="catalog/product/list/carousel.phtml"}}

To insert the bottom of the page you must use a static block with the ID "home_before_footer".

  1. <!-- Start Content Band -->
  2. <div class="full-width-box auto-width bottom-padding padding-bottom-36">
  3. <div class="fwb-bg fwb-paralax band-1" data-stellar-background-ratio="0.5"> </div>
  4. <div class="container">
  5. <div class="row text-center">
  6. <div class="col-sm-6 col-md-4 col-lg-3">
  7. <div class="pricing">
  8. <div class="title"><a href="#">First Package</a></div>
  9. <div class="price-box">
  10. <div class="icon pull-right border circle"><span class="livicon" data-n="shopping-cart" data-s="32" data-c="#1e1e1e" data-hc="0"></span></div>
  11. <div class="starting">Starting at</div>
  12. <div class="price">$199<span>/month</span></div>
  13. </div>
  14. <ul class="options">
  15. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  16. <li><span><i class="fa fa-check"></i></span>Color Customization</li>
  17. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  18. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  19. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  20. </ul>
  21. <div class="bottom-box">
  22. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  23. <div class="rating-box">
  24. <div style="width: 80%" class="rating">
  25. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  26. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  27. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  28. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  29. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  30. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  31. </svg>
  32. </div>
  33. </div>
  34. <button class="btn btn-default btn-lg">Buy Now</button>
  35. </div>
  36. </div><!-- .pricing -->
  37. </div>
  38. <div class="col-sm-6 col-md-4 col-lg-3">
  39. <div class="pricing prising-info">
  40. <div class="title"><a href="#">Second Package</a></div>
  41. <div class="price-box">
  42. <div class="icon pull-right border circle"><span class="livicon" data-n="wrench" data-s="32" data-c="#35beeb" data-hc="0"></span></div>
  43. <div class="starting">Starting at</div>
  44. <div class="price">$299<span>/month</span></div>
  45. </div>
  46. <ul class="options">
  47. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  48. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  49. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  50. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  51. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  52. </ul>
  53. <div class="bottom-box">
  54. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  55. <div class="rating-box">
  56. <div style="width: 60%" class="rating">
  57. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  58. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  59. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  60. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  61. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  62. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  63. </svg>
  64. </div>
  65. </div>
  66. <button class="btn btn-info btn-lg">Buy Now</button>
  67. </div>
  68. </div><!-- .pricing -->
  69. </div>
  70. <div class="col-sm-6 col-md-4 col-lg-3">
  71. <div class="pricing pricing-success">
  72. <div class="title"><a href="#">Third Package</a></div>
  73. <div class="price-box">
  74. <div class="icon pull-right border circle"><span class="livicon" data-n="piggybank" data-s="32" data-c="#9ab71a" data-hc="0"></span></div>
  75. <div class="starting">Starting at</div>
  76. <div class="price">$399<span>/month</span></div>
  77. </div>
  78. <ul class="options">
  79. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  80. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  81. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  82. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  83. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  84. </ul>
  85. <div class="bottom-box">
  86. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  87. <div class="rating-box">
  88. <div style="width: 80%" class="rating">
  89. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  90. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  91. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  92. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  93. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  94. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  95. </svg>
  96. </div>
  97. </div>
  98. <button class="btn btn-success btn-lg">Buy Now</button>
  99. </div>
  100. </div><!-- .pricing -->
  101. </div>
  102. <div class="col-sm-6 col-md-4 col-md-offset-4 col-lg-3 col-lg-offset-0">
  103. <div class="pricing pricing-error">
  104. <div class="title"><a href="#">Fourth Package</a></div>
  105. <div class="price-box">
  106. <div class="icon pull-right border circle"><span class="livicon" data-n="key" data-s="32" data-c="#de2a61" data-hc="0"></span></div>
  107. <div class="starting">Starting at</div>
  108. <div class="price">$499<span>/month</span></div>
  109. </div>
  110. <ul class="options">
  111. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  112. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  113. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  114. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  115. <li class="active"><span><i class="fa fa-check"></i></span>Easy Setup</li>
  116. </ul>
  117. <div class="bottom-box">
  118. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  119. <div class="rating-box">
  120. <div style="width: 100%" class="rating">
  121. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  122. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  123. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  124. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  125. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  126. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  127. </svg>
  128. </div>
  129. </div>
  130. <button class="btn btn-danger btn-lg">Buy Now</button>
  131. </div>
  132. </div><!-- .pricing -->
  133. </div>
  134. </div>
  135. <div class="clearfix"> </div>
  136. </div>
  137. </div>
  138. <!-- End Content Band -->
  139. <!-- Start Product Tabs -->
  140. <div class="products-tab bottom-padding-mini">
  141. <ul class="nav nav-tabs">
  142. <li class="active"><a href="#best-sellers">Best Sellers</a></li>
  143. <li><a href="#new-products">New Products</a></li>
  144. <li><a href="#related-products">Related Products</a></li>
  145. </ul>
  146. <div class="tab-content">
  147. <div id="best-sellers" class="tab-pane row active fade in text-center">{{block type="ibtheme/product_list_featured" category_id="35" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  148. <div id="new-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="7" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  149. <div id="related-products" class="tab-pane row fade in text-center">{{block type="ibtheme/product_list_featured" category_id="18" products_count="8" random_products="" template="catalog/product/list/list.phtml"}}</div>
  150. </div>
  151. </div>
  152. <!-- End Product Tabs -->
  153. <div class="row">
  154. <div class="about-us col-sm-6 bottom-padding">
  155. <div class="title-box">
  156. <h2 class="title">About Us</h2>
  157. </div>
  158. <p><strong>Information becomes stylish when you work with «Itembridge». Creative studio «Itembridge» owes years of experience, excellent reputation and high-end status at many resources.</strong></p>
  159. <p>Every our project is the result of exciting collaboration of creative and development teams. All templates, that come down the conveyor belt of our company, are 100% adaptive, so you can easily work with them on various gadgets. Your choice of «Itembridge» products is an investment in fast and efficient management of your business.</p>
  160. <p>The main requirement of our company is to create products of flexible functionality, simplicity and clarity. Minimalistic approach allows to create works, highly appreciated by our customers. Over the years of its existance, «Itembridge» company mastered in all aspects of web engineering, development of corporate identity and unique web sites, manufacturing of online stores templates and web applications. </p>
  161. </div>
  162. <!-- .about-us -->
  163. <div class="col-sm-6">{{block type="clnews/news" block_id="news_block" template="clnews/home.phtml"}}</div>
  164. </div>
  165. <!-- Start Content Band -->
  166. <div class="full-width-box auto-width margin-bottom-minus">
  167. <div class="fwb-bg" style="background: #00c59c;"> </div>
  168. <div class="container">
  169. <div class="map-box">
  170. <div class="map-canvas" style="height: 200px;" data-zoom="6" data-lat="40.748441" data-lng="-73.985664" data-title="Bryant Park" data-content="New York, NY"> </div>
  171. </div>
  172. </div>
  173. </div>
  174. <!-- End Content Band -->

Home 7

In this type of home page, there is a carousel with the type "Second Variant" right below the header, which you need to insert into the static block with the identifier "home_after_top".

Slider Options:

  • Select slider type: Carousel
  • Select Style: Second Variant
  • FullWidth: Disable
  • Enabled: Enable
HTML template for the home page content:
  1. <!-- Start Carousel -->
  2. <div class="bottom-padding-mini">{{block type="ibtheme/product_list_featured" category_id="35" products_count="10" random_products="" title="Our Feature" carousel_type="2" template="catalog/product/list/carousel.phtml"}}</div>
  3. <!-- End Carousel -->
  4. <!-- Start Call Action -->
  5. <div class="full-width-box auto-width ">
  6. <div class="fwb-bg fwb-video band-16">
  7. <video width="320" height="240" autoplay="autoplay" muted="" loop="loop">
  8. <source src="http://magento.progressive.itembridge.com/v3/video/video.mp4" type="video/mp4">
  9. <source src="http://magento.progressive.itembridge.com/v3/video/video.webm" type="video/webm">
  10. <object width="320" height="240" data="http://magento.progressive.itembridge.com/v7/js/tiny_mce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash">
  11. <param name="src" value="http://magento.progressive.itembridge.com/v7/js/tiny_mce/plugins/media/moxieplayer.swf">
  12. <param name="flashvars" value="url=/v3/video/video.mp4&poster=/v7/index.php/admin/cms_page/edit/page_id/2/back/edit/active_tab/content_section/key/53c49dfe3cf081bd942ba9a794fc2ea4/">
  13. <param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="true">
  14. </object>
  15. </video>
  16. <div class="overlay"> </div>
  17. </div>
  18. <div class="container margin-top-40 bottom-padding-mini">
  19. <div class="row">
  20. <div class="white text-center col-sm-12 col-md-12">
  21. <div class="title-box text-center title-white">
  22. <h1 class="title">Hurry up and buy the template right now!</h1>
  23. </div>
  24. <a class="btn btn-default" href="#">Buy Now</a></div>
  25. </div>
  26. </div>
  27. </div>
  28. <!-- End Call Action -->
  29. <!-- Start Carousel -->
  30. <div class="full-width-box">
  31. <div class="container">{{block type="ibtheme/product_list_featured" category_id="35" products_count="10" random_products="" title="Our Feature" carousel_type="3" template="catalog/product/list/carousel.phtml"}}</div>
  32. </div>
  33. <!-- End Carousel -->
  34. <!-- Start Pricing -->
  35. <div class="full-width-box auto-width padding-bottom-36">
  36. <div class="fwb-bg fwb-fixed">
  37. <div class="overlay"> </div>
  38. </div>
  39. <div class="container">
  40. <div class="row text-center">
  41. <div class="col-sm-6 col-md-4 col-lg-3">
  42. <div class="pricing">
  43. <div class="title"><a href="#">First Package</a></div>
  44. <div class="price-box">
  45. <div class="icon pull-right border circle"><span class="livicon" data-n="shopping-cart" data-s="32" data-c="#1e1e1e" data-hc="0"></span></div>
  46. <div class="starting">Starting at</div>
  47. <div class="price">$199<span>/month</span></div>
  48. </div>
  49. <ul class="options">
  50. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  51. <li><span><i class="fa fa-check"></i></span>Color Customization</li>
  52. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  53. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  54. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  55. </ul>
  56. <div class="bottom-box">
  57. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  58. <div class="rating-box">
  59. <div style="width: 80%" class="rating">
  60. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  61. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  62. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  63. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  64. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  65. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  66. </svg>
  67. </div>
  68. </div>
  69. <button class="btn btn-default btn-lg">Buy Now</button>
  70. </div>
  71. </div><!-- .pricing -->
  72. </div>
  73. <div class="col-sm-6 col-md-4 col-lg-3">
  74. <div class="pricing prising-info">
  75. <div class="title"><a href="#">Second Package</a></div>
  76. <div class="price-box">
  77. <div class="icon pull-right border circle"><span class="livicon" data-n="wrench" data-s="32" data-c="#35beeb" data-hc="0"></span></div>
  78. <div class="starting">Starting at</div>
  79. <div class="price">$299<span>/month</span></div>
  80. </div>
  81. <ul class="options">
  82. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  83. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  84. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  85. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  86. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  87. </ul>
  88. <div class="bottom-box">
  89. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  90. <div class="rating-box">
  91. <div style="width: 60%" class="rating">
  92. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  93. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  94. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  95. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  96. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  97. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  98. </svg>
  99. </div>
  100. </div>
  101. <button class="btn btn-info btn-lg">Buy Now</button>
  102. </div>
  103. </div><!-- .pricing -->
  104. </div>
  105. <div class="col-sm-6 col-md-4 col-lg-3">
  106. <div class="pricing pricing-success">
  107. <div class="title"><a href="#">Third Package</a></div>
  108. <div class="price-box">
  109. <div class="icon pull-right border circle"><span class="livicon" data-n="piggybank" data-s="32" data-c="#9ab71a" data-hc="0"></span></div>
  110. <div class="starting">Starting at</div>
  111. <div class="price">$399<span>/month</span></div>
  112. </div>
  113. <ul class="options">
  114. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  115. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  116. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  117. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  118. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  119. </ul>
  120. <div class="bottom-box">
  121. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  122. <div class="rating-box">
  123. <div style="width: 80%" class="rating">
  124. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  125. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  126. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  127. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  128. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  129. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  130. </svg>
  131. </div>
  132. </div>
  133. <button class="btn btn-success btn-lg">Buy Now</button>
  134. </div>
  135. </div><!-- .pricing -->
  136. </div>
  137. <div class="col-sm-6 col-md-4 col-md-offset-4 col-lg-3 col-lg-offset-0">
  138. <div class="pricing pricing-error">
  139. <div class="title"><a href="#">Fourth Package</a></div>
  140. <div class="price-box">
  141. <div class="icon pull-right border circle"><span class="livicon" data-n="key" data-s="32" data-c="#de2a61" data-hc="0"></span></div>
  142. <div class="starting">Starting at</div>
  143. <div class="price">$499<span>/month</span></div>
  144. </div>
  145. <ul class="options">
  146. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  147. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  148. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  149. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  150. <li class="active"><span><i class="fa fa-check"></i></span>Easy Setup</li>
  151. </ul>
  152. <div class="bottom-box">
  153. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  154. <div class="rating-box">
  155. <div style="width: 100%" class="rating">
  156. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  157. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  158. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  159. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  160. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  161. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  162. </svg>
  163. </div>
  164. </div>
  165. <button class="btn btn-danger btn-lg">Buy Now</button>
  166. </div>
  167. </div><!-- .pricing -->
  168. </div>
  169. </div>
  170. <div class="clearfix"> </div>
  171. </div>
  172. </div>
  173. <!-- End Pricing -->
  174. <!-- Start Column Products -->
  175. <div class="full-width-box padding-bottom-36">
  176. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="5" products_count="2" random_products="" title="Women's Wear" template="catalog/product/list/column.phtml"}}
  177. <p> </p>
  178. <a class="more" href="http://magento.progressive.itembridge.com/v7/index.php/women-s-wear.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  179. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="7" products_count="2" random_products="" title="Men's Wear" template="catalog/product/list/column.phtml"}}
  180. <p> </p>
  181. <a class="more" href="http://magento.progressive.itembridge.com/v7/index.php/men-s-wear.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  182. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="41" products_count="2" random_products="" title="Accessories" template="catalog/product/list/column.phtml"}}
  183. <p> </p>
  184. <a class="more" href="http://magento.progressive.itembridge.com/v7/index.php/accessories.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  185. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="9" products_count="2" random_products="" title="Lingerie" template="catalog/product/list/column.phtml"}}
  186. <p> </p>
  187. <a class="more" href="http://magento.progressive.itembridge.com/v7/index.php/lingerie.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  188. </div>
  189. <!-- End Column Products -->
  190. <!-- Start Banners -->
  191. <div class="full-width-box auto-width margin-bottom-minus bg">
  192. <div class="container">
  193. <div class="row">
  194. <div class="col-sm-4 bottom-padding-mobile"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  195. <div class="col-sm-4 bottom-padding-mobile"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  196. <div class="col-sm-4"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  197. </div>
  198. </div>
  199. </div>
  200. <!-- End Banners -->

Home 8

This page has a left sidebar, so in the tab "Design" for the field "Layout" we need to select the option "2 columns with left bar", and insert such xml in "Layout Update XML".

  1. <reference name="left">
  2. <block type="cms/block" name="sidebar_banners">
  3. <action method="setBlockId"><block_id>sidebar_banners</block_id></action>
  4. </block>
  5. <block type="cms/block" name="home_sidebar_products">
  6. <action method="setBlockId"><block_id>home_sidebar_products</block_id></action>
  7. </block>
  8. <action method="unsetChild"><name>left.newsletter</name></action>
  9. <action method="unsetChild"><name>catalog.leftnav</name></action>
  10. <action method="unsetChild"><name>tags_popular</name></action>
  11. </reference>

You also need to create several static blocks with such identifiers and html content:

sidebar_banners
  1. <div class="widget">
  2. <a class="banner" href="#"><img src="{{media url=" wysiwyg="" 8-7.jpg"}}"="" alt=""></a>
  3. </div>
home_sidebar_products
  1. {{block type="ibtheme/product_list_featured" category_id="18" products_count="3"
  2. random_products="" template="catalog/product/list/column.phtml"}}
HTML template for the home page content:
  1. <!-- Start Slider -->
  2. {{block type="zslider/zslider" name="slider_1" slider_id="1" template="zslider/zslider.phtml" }}
  3. <!-- End Slider -->
  4. <p> </p>
  5. <!-- Start Carousel -->
  6. <p>{{block type="ibtheme/product_list_featured" category_id="13" products_count="10"
  7. random_products="" title="Our Feature" carousel_type="2"
  8. template="catalog/product/list/carousel.phtml"}}</p>
  9. <!-- End Carousel -->

To add the bottom of the content you need to create a static block with the identifier "home_before_footer" and fill it with relevant content.

  1. <!-- Start Call Action -->
  2. <div class="full-width-box auto-width ">
  3. <div class="fwb-bg fwb-video band-16">
  4. <video width="320" height="240" autoplay="autoplay" muted="" loop="loop">
  5. <source src="http://magento.progressive.itembridge.com/v3/video/video.mp4" type="video/mp4">
  6. <source src="http://magento.progressive.itembridge.com/v3/video/video.webm" type="video/webm">
  7. <object width="320" height="240" data="http://magento.progressive.itembridge.com/v8/js/tiny_mce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash">
  8. <param name="src" value="http://magento.progressive.itembridge.com/v8/js/tiny_mce/plugins/media/moxieplayer.swf">
  9. <param name="flashvars" value="url=/v3/video/video.mp4&poster=/v8/index.php/admin/cms_block/edit/block_id/17/key/4e921d175954786064f0cb3109602e58/">
  10. <param name="allowfullscreen" value="true">
  11. <param name="allowscriptaccess" value="true">
  12. </object>
  13. </video>
  14. <div class="overlay"> </div>
  15. </div>
  16. <div class="container margin-top-40 bottom-padding-mini">
  17. <div class="row">
  18. <div class="white text-center col-sm-12 col-md-12">
  19. <div class="title-box text-center title-white">
  20. <h1 class="title">Hurry up and buy the template right now!</h1>
  21. </div>
  22. <a class="btn btn-default" href="#">Buy Now</a></div>
  23. </div>
  24. </div>
  25. </div>
  26. <!-- End Call Action -->
  27. <!-- Start Carousel -->
  28. <div class="full-width-box">
  29. <div class="container">{{block type="ibtheme/product_list_featured" category_id="35" products_count="10" random_products="" title="Our Feature" carousel_type="3" template="catalog/product/list/carousel.phtml"}}</div>
  30. </div>
  31. <!-- End Carousel -->
  32. <!-- Start Pricing -->
  33. <div class="full-width-box auto-width padding-bottom-36">
  34. <div class="fwb-bg fwb-fixed">
  35. <div class="overlay"> </div>
  36. </div>
  37. <div class="container">
  38. <div class="row text-center">
  39. <div class="col-sm-6 col-md-4 col-lg-3">
  40. <div class="pricing">
  41. <div class="title"><a href="#">First Package</a></div>
  42. <div class="price-box">
  43. <div class="icon pull-right border circle"><span class="livicon" data-n="shopping-cart" data-s="32" data-c="#1e1e1e" data-hc="0"></span></div>
  44. <div class="starting">Starting at</div>
  45. <div class="price">$199<span>/month</span></div>
  46. </div>
  47. <ul class="options">
  48. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  49. <li><span><i class="fa fa-check"></i></span>Color Customization</li>
  50. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  51. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  52. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  53. </ul>
  54. <div class="bottom-box">
  55. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  56. <div class="rating-box">
  57. <div style="width: 80%" class="rating">
  58. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  59. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  60. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  61. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  62. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  63. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  64. </svg>
  65. </div>
  66. </div>
  67. <button class="btn btn-default btn-lg">Buy Now</button>
  68. </div>
  69. </div><!-- .pricing -->
  70. </div>
  71. <div class="col-sm-6 col-md-4 col-lg-3">
  72. <div class="pricing prising-info">
  73. <div class="title"><a href="#">Second Package</a></div>
  74. <div class="price-box">
  75. <div class="icon pull-right border circle"><span class="livicon" data-n="wrench" data-s="32" data-c="#35beeb" data-hc="0"></span></div>
  76. <div class="starting">Starting at</div>
  77. <div class="price">$299<span>/month</span></div>
  78. </div>
  79. <ul class="options">
  80. <li><span><i class="fa fa-check"></i></span>Responsive Design</li>
  81. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  82. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  83. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  84. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  85. </ul>
  86. <div class="bottom-box">
  87. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  88. <div class="rating-box">
  89. <div style="width: 60%" class="rating">
  90. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  91. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  92. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  93. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  94. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  95. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  96. </svg>
  97. </div>
  98. </div>
  99. <button class="btn btn-info btn-lg">Buy Now</button>
  100. </div>
  101. </div><!-- .pricing -->
  102. </div>
  103. <div class="col-sm-6 col-md-4 col-lg-3">
  104. <div class="pricing pricing-success">
  105. <div class="title"><a href="#">Third Package</a></div>
  106. <div class="price-box">
  107. <div class="icon pull-right border circle"><span class="livicon" data-n="piggybank" data-s="32" data-c="#9ab71a" data-hc="0"></span></div>
  108. <div class="starting">Starting at</div>
  109. <div class="price">$399<span>/month</span></div>
  110. </div>
  111. <ul class="options">
  112. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  113. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  114. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  115. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  116. <li><span><i class="fa fa-check"></i></span>Easy Setup</li>
  117. </ul>
  118. <div class="bottom-box">
  119. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  120. <div class="rating-box">
  121. <div style="width: 80%" class="rating">
  122. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  123. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  124. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  125. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  126. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  127. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  128. </svg>
  129. </div>
  130. </div>
  131. <button class="btn btn-success btn-lg">Buy Now</button>
  132. </div>
  133. </div><!-- .pricing -->
  134. </div>
  135. <div class="col-sm-6 col-md-4 col-md-offset-4 col-lg-3 col-lg-offset-0">
  136. <div class="pricing pricing-error">
  137. <div class="title"><a href="#">Fourth Package</a></div>
  138. <div class="price-box">
  139. <div class="icon pull-right border circle"><span class="livicon" data-n="key" data-s="32" data-c="#de2a61" data-hc="0"></span></div>
  140. <div class="starting">Starting at</div>
  141. <div class="price">$499<span>/month</span></div>
  142. </div>
  143. <ul class="options">
  144. <li class="active"><span><i class="fa fa-check"></i></span>Responsive Design</li>
  145. <li class="active"><span><i class="fa fa-check"></i></span>Color Customization</li>
  146. <li class="active"><span><i class="fa fa-check"></i></span>HTML5 & CSS3</li>
  147. <li class="active"><span><i class="fa fa-check"></i></span>Styled elements</li>
  148. <li class="active"><span><i class="fa fa-check"></i></span>Easy Setup</li>
  149. </ul>
  150. <div class="bottom-box">
  151. <a href="#" class="more">Read more <span class="fa fa-angle-right"></span></a>
  152. <div class="rating-box">
  153. <div style="width: 100%" class="rating">
  154. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="73px" height="12px" viewBox="0 0 73 12" enable-background="new 0 0 73 12" xml:space="preserve">
  155. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="6.5,0 8,5 13,5 9,7.7 10,12 6.5,9.2 3,12 4,7.7 0,5 5,5"></polygon>
  156. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="66.5,0 68,5 73,5 69,7.7 70,12 66.5,9.2 63,12 64,7.7 60,5 65,5 "></polygon>
  157. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="21.5,0 23,5 28,5 24,7.7 25,12 21.5,9.2 18,12 19,7.7 15,5 20,5 "></polygon>
  158. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="51.5,0 53,5 58,5 54,7.7 55,12 51.5,9.2 48,12 49,7.7 45,5 50,5 "></polygon>
  159. <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1e1e1e" points="36.5,0 38,5 43,5 39,7.7 40,12 36.5,9.2 33,12 34,7.7 30,5 35,5 "></polygon>
  160. </svg>
  161. </div>
  162. </div>
  163. <button class="btn btn-danger btn-lg">Buy Now</button>
  164. </div>
  165. </div><!-- .pricing -->
  166. </div>
  167. </div>
  168. <div class="clearfix"> </div>
  169. </div>
  170. </div>
  171. <!-- End Pricing -->
  172. <!-- Start Column Products -->
  173. <div class="full-width-box padding-bottom-36">
  174. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="5" products_count="2" random_products="" title="Women's Wear" template="catalog/product/list/column.phtml"}}
  175. <p> </p>
  176. <a class="more" href="http://magento.progressive.itembridge.com/v8/index.php/women-s-wear.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  177. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="7" products_count="2" random_products="" title="Men's Wear" template="catalog/product/list/column.phtml"}}
  178. <p> </p>
  179. <a class="more" href="http://magento.progressive.itembridge.com/v8/index.php/men-s-wear.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  180. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="41" products_count="2" random_products="" title="Accessories" template="catalog/product/list/column.phtml"}}
  181. <p> </p>
  182. <a class="more" href="http://magento.progressive.itembridge.com/v8/index.php/accessories.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  183. <div class="col-sm-6 col-lg-3 sidebar">{{block type="ibtheme/product_list_featured" category_id="9" products_count="2" random_products="" title="Lingerie" template="catalog/product/list/column.phtml"}}
  184. <p> </p>
  185. <a class="more" href="http://magento.progressive.itembridge.com/v8/index.php/lingerie.html">Learn More <span class="fa fa-angle-right"> </span></a></div>
  186. </div>
  187. <!-- End Column Products -->
  188. <!-- Start Banners -->
  189. <div class="full-width-box auto-width margin-bottom-minus bg">
  190. <div class="container">
  191. <div class="row">
  192. <div class="col-sm-4 bottom-padding-mobile"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  193. <div class="col-sm-4 bottom-padding-mobile"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  194. <div class="col-sm-4"><a class="banner" href="#"><img src="http://placehold.it/370x200" alt=""></a></div>
  195. </div>
  196. </div>
  197. </div>
  198. <!-- End Banners -->

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.

Manage "Not found" page

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

Page layout "Not found" page

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 (first variant):
  1. <div class="row">
  2. <div class="content span12">
  3. <div class="row">
  4. <div class="col-sm-6 col-md-6">
  5. <div class="box-404 bg">
  6. <h1>404</h1>
  7. <h2>The page cannot be found.</h2>
  8. </div>
  9. </div>
  10. <div class="col-sm-6 col-md-6">
  11. <h3>Whoops, our bad...</h3>
  12. <p>The page you requested was not found, and we have a fine guess why.</p>
  13. <ul>
  14. <li>If you typed the URL directly, please make sure the spelling is correct.</li>
  15. <li>If you clicked on a link to get here, the link is outdated.</li>
  16. </ul>
  17. <strong>What can you do?</strong>
  18. <p>Have no fear, help is near! There are many ways you can get back on track with Store.</p>
  19. <ul>
  20. <li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li>
  21. <li>Use the search bar at the top of the page to search for your products.
  22. Follow these links to get you back on track!</li>
  23. <li><a href="{{store url=""}}">Store Home</a> | <a href="{{store url="customer/account"}}">
  24. My Account</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
HTML template for the 404 page content (second variant):
  1. <div class="row">
  2. <div class="col-sm-12 col-md-12">
  3. <div class="box-404 bg">
  4. <h1>404</h1>
  5. <h2>The page cannot be found.</h2>
  6. </div>
  7. </div>
  8. </div>

Contact Us Page

To add the address you need to go to System->Configuration->General, and enter the address in the field "Store Contact Address".

Store contact adress

To configure the e-mails go to System->Configuration->Store Email Addresses, and type in the fields your desired e-mails and labels for them.

Store email adress
Contact Page Phone

This block is located on the contact page.

Contact block

Identifier: contact_phone

  1. <div>Support: +777 (100) 1234</div>
  2. <div>Sales manager: +777 (100) 4321</div>
  3. <div>Director: +777 (100) 1243</div>
Contact Page Text

This block is located on the contact page.

Contact page text

Identifier: contact_text

  1. <p>Phasellus vulputate, lectus eu consequat scelerisque, felis odio consequat enim,
  2. ut vulputate elit lacus nec ipsum.</p>
  3. <p>Phasellus vulputate, lectus eu consequat scelerisque, felis odio consequat enim,
  4. ut vulputate elit lacus nec ipsum.</p>
Contact Page Map

This block is located on the contact page.

Contact page text

Identifier: map

  1. <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7cad08b8c00fa4a!2sForest+Lawn+Memorial+Park+%26+Mortuaries!5e0!3m2!1sen!2s!4v1391611006867" frameborder="0" width="100%" height="270"></iframe>

About Us Page


Slider

To activate the module, go to Z-Slider Pro » ZSP Configuration, and change the drop-down option to "yes".

You could also choose to skin for the slider.

Slider settings
Create New Slider Or Carousel

To create a new slidee or carousel, you must go to the item "Add New Slider".

Add new slider
Slider information

Set all the parameters and click on the button "Save And Continue Edit".

After saving, in the field "How to embed" there will appear the embed code for sliders

How to embed
Add New Slide

To add a new slide, go to Z-Slider Pro » Manage Slides » Add New slide.

Add new slide

In the opened window fill in all fields. Be sure to include the correct slider for the slide.

New slide
Add New Layer to Slide

After saving the slide, it is possible to add a layer to it. 4 layers are available (text, image, video, hotspot)

New slide layer

Here you can set up the position of the layer, effect of animation, its time and delay


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.

Identificators

  • home_top
  • home_after_top
  • home_before_top
  • home_before_footer
  • home_after_footer
  • home_after_footer_top
  • right_sidebar_block
  • left_sidebar_block
  • before_left_sidebar
  • after_left_sidebar
  • before_right_sidebar
  • after_right_sidebar
  • contact_phone
  • map
  • footer_links_1
  • footer_links_2
  • footer_links_3
  • footer_links_4
  • footer_phones


Column Products List

This block is provided for installation in the sidebar, in which you can withdraw any particular category of goods and specify certain criteria that will display it below.

  1. {{block type="ibtheme/product_list_featured"
  2. category_id="18" products_count="2" random_products=""
  3. template="catalog/product/list/column.phtml"}}
Specials
type ibtheme/product_list_featured
template catalog/product/list/column.phtml
category_id ID of the category which you want to display
products_count Amount of products which you want to dispay
random_products If this parameter is enabled, all products will be displayed randomly
title Title of the block (Specials)

Products Carousel

This block can be used as the main content of the page and as the sidebar. There are three options of dispaying the carousel products. If you use them in the main content, though you can insert them in any column of provided grid.

  1. {{block type="ibtheme/product_list_featured" category_id="13" products_count="10"
  2. random_products="" title="Our Feature" carousel_type="1"
  3. template="catalog/product/list/carousel.phtml"}}
type ibtheme/product_list_featured
template catalog/product/list/carousel.phtml
category_id ID of the category which you want to display
products_count Amount of products which you want to dispay
random_products If this parameter is enabled, all products will be displayed randomly
carousel_type 1, 2, 3, 4
title Title of the block (Specials)

Carousel Type 1

Carousel Type 2

Carousel Type 3


Column List

This block provides the list of products of separate cotegory. There are two options for output.

  1. {{block type="ibtheme/product_list_featured" category_id="13"
  2. products_count="10" random_products=""
  3. template="catalog/product/list/list.phtml"}}
Column List 1
Column List 2
type ibtheme/product_list_featured
template catalog/product/list/list.phtml
category_id ID of the category which you want to display
products_count Amount of products which you want to dispay
random_products If this parameter is enabled, all products will be displayed randomly
list_type normal, mini

Column Banners

The type of the banner is created using the slider (Z-Slider), and used for the sidebar.

For this type of banners, in settings, you need to select the type of slider "Carousel" and style "Sidebar Banners".

Carousel
Carousel

Carousel Banners

This type of banners has three display options and is used in the main content.

For this type of banners, in settings, you need to select the type of slider "Carousel", and one of the styles (First Variant, Second Variant, Third Variant).

First Variant

Manufactures

Second Variant

Second variant carousel banners

Third Variant

Third variant carousel banners

Simple Image Banners

This is a custom type of banners. You can make them with random width, or using grid system.

It is also recommended to add to a link or an image (if not using links) class "banner", it is necessary for hover effect.

  1. <div class="row">
  2. <div class="col-sm-3">
  3. <a href="#" class="banner">
  4. <img src="http://placehold.it/270x150" alt=""/>
  5. </a>
  6. </div>
  7. <div class="col-sm-6">
  8. <a href="#" class="banner">
  9. <img src="http://placehold.it/570x150" alt=""/>
  10. </a>
  11. </div>
  12. <div class="col-sm-3">
  13. <a href="#" class="banner">
  14. <img src="http://placehold.it/270x150" alt=""/>
  15. </a>
  16. </div>
  17. </div>

News

This element is provided for displaying recently added posts in the main page content. It has two options of output.

  1. {{block type="clnews/news" block_id="news_block" view_type="2" template="clnews/home.phtml"}}

view_type="1"

view_type="2"


Facebook

Facebook widget.

  1. <aside class="widget facebook-widget">
  2. <header>
  3. <h3 class="title">Facebook</h3>
  4. </header>
  5. <div id="fb-root"></div>
  6. <div class="fb-like-box"
  7. data-href="https://www.facebook.com/ItemBridge"
  8. data-border-color="#000"
  9. data-colorscheme="light"
  10. data-show-faces="true"
  11. data-force-wall="8"
  12. data-header="false"
  13. data-stream="false"
  14. data-connections="8"
  15. data-show-border="false"
  16. data-height="205">
  17. </div>
  18. </aside>
Facebook widget

Twitter

Twitter widget.

  1. <aside class="widget twitter-widget">
  2. <header>
  3. <h3 class="title">Twitter</h3>
  4. </header>
  5. <a class="twitter-timeline" href="https://twitter.com/ItemBridge"
  6. data-widget-id="446943467755696128">@ItemBridge</a>
  7. </aside>
Twitter widget


Content Band

This block has several display options, it is provided for dispaying any information and blocks in it.

We have provided two types of blocks with different types of settings, but you can insert any blocks and any html there.

On the settings page of theme styles (System > Configuration > Design > Other Elements) you can change such settings of the block, e.g. the filling type of background (several types of gradient and an image).

To set up the image for these blcoks as the background, you need to upload it via ftp in the folder "skin > frontend > progressive > default > images > bg-images", and then enter its name in the field settings "Content Band BG Image".

Content band

Embed code of the block without additional effects:

  1. <div class="full-width-box auto-width">
  2. <div class="fwb-bg">
  3. <div class="overlay"> </div>
  4. </div>
  5. <div class="container">
  6. <!-- Insert Your HTML Code -->
  7. </div>
  8. </div>

Embed code of the block with fixed image:

  1. <div class="full-width-box auto-width">
  2. <div class="fwb-bg fwb-fixed">
  3. <div class="overlay"> </div>
  4. </div>
  5. <div class="container">
  6. <!-- Insert Your HTML Code -->
  7. </div>
  8. </div>

Embed code of the block with the parallax effect:

  1. <div class="full-width-box auto-width">
  2. <div class="fwb-bg fwb-paralax" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="200">
  3. <div class="overlay"> </div>
  4. </div>
  5. <div class="container">
  6. <!-- Insert Your HTML Code -->
  7. </div>
  8. </div>

Embed code of the block with blur effect:

  1. <div class="full-width-box auto-width">
  2. <div class="fwb-bg fwb-blur" <span style="color: red">data-blur-image="img/content/band-4.jpg"</span> data-blur-amount="2"">
  3. <div class="overlay"> </div>
  4. </div>
  5. <div class="container">
  6. <!-- Insert Your HTML Code -->
  7. </div>
  8. </div>

Please, note that for this block there is another way of setting image for background. You must specify the path to the image in the attribute "data-blur-image".

Embed code of the block with video background:

1) HTML5 Video
  1. <div class="full-width-box">
  2. <div class="fwb-bg fwb-bg-video">
  3. <video autoplay="" muted="" loop="" poster="img/content/video-poster.jpg">
  4. <source src="video/video.mp4" type="video/mp4">
  5. <source src="video/video.webm" type="video/webm">
  6. </video>
  7. <div class="overlay"></div>
  8. </div>
  9. Content
  10. </div>
2) Youtube Video
  1. <div class="full-width-box">
  2. <div class="fwb-bg fwb-bg-video fwb-bg-youtube-video" data-youtube-videoId="ZCAnLxRvNNc" data-youtube-poster="img/content/video-poster.jpg">
  3. <div class="overlay"></div>
  4. </div>
  5. Content
  6. </div>

Pre-upload the video via ftp, or connect with external resources.

Two examples of HTML content of this block:

  1. <div class="row">
  2. <div class="content-box col-sm-6 col-md-6">
  3. <h2 class="title light white">Background Color</h2>
  4. <p class="description white">
  5. We added more than 80 items to the standard page design.<br>
  6. You can form the page yourself by placing any information<br>
  7. you want – graphs, tables, buttons, slides, animated<br>
  8. content, maps and so on.
  9. </p>
  10. <button class="btn btn-red btn-default">Read more</button>
  11. <br><br>
  12. </div>
  13. <div class="images-box col-sm-6 col-md-6">
  14. <img src="http://placehold.it/568x351" width="568" height="351" alt="">
  15. </div>
  16. </div>
  1. <div class="cm-margin-top cm-margin-bottom">
  2. <div class="title-box">
  3. <h1 class="title">Video Background</h1>
  4. </div>
  5. <div class="row">
  6. <div class="col-sm-6 col-md-6">some text</div>
  7. <div class="col-sm-6 col-md-6">some text</div>
  8. </div>
  9. </div>

Accordions & Toggles
  1. <div class="panel-group" id="accordion">
  2. <div class="panel panel-default">
  3. <div class="panel-heading">
  4. <div class="panel-title">
  5. <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
  6. Title
  7. </a>
  8. </div>
  9. </div>
  10. <div id="collapse1" class="panel-collapse collapse">
  11. <div class="panel-body">
  12. Content
  13. </div>
  14. </div>
  15. </div>
  16. </div>
parameters:

panel-bg - sets the gray background

  1. <div class="panel panel-default panel-bg">
  2. ...
  3. </div>

one-open - only one element can be opened

  1. <div class="panel-group one-open" id="accordion">
  2. <div class="panel panel-default">
  3. ...
  4. </div>
  5. </div>

Animations

You can add animation to any element you want. To do this you have to add the attribute data-appear-animation with the corresponding value of the type of animation.
Types of animation:

  • fadeIn
  • fadeInUp
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • bounceIn
  • bounceInUp
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • rotateIn
  • rotateInUpLeft
  • rotateInDownLeft
  • rotateInUpRight
  • rotateInDownRight
  • flash
  • shake
  • bounce
  • tada
  • swing
  • wobble
  • wiggle

Example:

  1. <img src="img/content/animations.png" data-appear-animation="fadeIn">

Buttons & Social Icons

All types of buttons and theirs settings can be found here and here

  1. <a class="sbtnf icon-duckduckgo" href="#">duckduckgo</a>
parameters:

1. sbtnf-rounded - rounded button

  1. <a class="sbtnf sbtnf-rounded icon-duckduckgo" href="#">duckduckgo</a>

2. sbtnf-circle - circled button

  1. <a class="sbtnf sbtnf-circle icon-duckduckgo" href="#">duckduckgo</a>

3. sbtnf-icon-bg-black - icon with black background

  1. <a class="sbtnf sbtnf-circle sbtnf-icon-bg-black icon-duckduckgo" href="#">duckduckgo</a>

4. color - the color of the icon

  1. <a class="sbtnf sbtnf-circle sbtnf-icon-bg-black color icon-duckduckgo" href="#">duckduckgo</a>

5. color-hover - the color of the icon's hover

  1. <a class="sbtnf sbtnf-circle sbtnf-icon-bg-black color-hover icon-duckduckgo" href="#">duckduckgo</a>

Charts

To create the charts we use the following plugins jQuery Sparklines and morris.js. Detailed information about its configuration you can find on their sites.


Container
  1. <div class="content-block">
  2. Content...
  3. </div>

For example:

  1. <div class="content-block frame frame-shadow-lifted">
  2. Content...
  3. </div>

Dividers & Gaps
  1. <hr>

styles - determines the lines style. Can have such values:

no-line - transparent (clear) line

  1. <hr class="no-line">

shadow - line's style as a shadow

  1. <hr class="shadow">

dotted - dotted style

  1. <hr class="dotted">

dashed - dashed style

  1. <hr class="dashed">

double - doubled style

  1. <hr class="double">

Featured Box

This block have three main types, which you can see demo html elements


Font Awesome Icons
  1. <div class="icon">
  2. <i class="fa fa-adjust"></i>
  3. </div>

Icons Size - determines the size of icons, can take such values: icon-24, icon-40, icon-60, icon-100

  1. <div class="icon icon-24">
  2. <i class="fa fa-adjust"></i>
  3. </div>

Icon Background - sets the icon's background. Has several basic colors: bg, bg-muted, bg-text-warning, bg-text-error, bg-text-info, bg-text-success

  1. <div class="icon bg-muted">
  2. <i class="fa fa-adjust"></i>
  3. </div>

Icon Color - determines the color of the icon. Has several basic colors: muted, text-warning, text-error, text-info, text-success.

  1. <div class="icon text-info">
  2. <i class="fa fa-adjust"></i>
  3. </div>

Icon Border - determines the color of the border. Has several basic colors: border, border-muted, border-text-warning, border-text-error, border-text-info, border-text-success

  1. <div class="icon border-text-info">
  2. <i class="fa fa-adjust"></i>
  3. </div>

Icon Form - determines the form of the icon. Can take such values:
rounded - icon with rounded corners;
circle - round icon.


Frames

This block can contain any image and any other content.

  1. <div class="frame">
  2. Content...
  3. </div>

This block can be designed according to the proposed styles.

  • frame-padding
  • frame-border
  • frame-shadow
  • frame-shadow-lifted
  • frame-shadow-perspective
  • frame-shadow-curved
  • frame-shadow-raised
  • rotated-box
  • rotated-right-box

For example:

  1. <div class="frame frame-padding frame-shadow-lifted">
  2. Content...
  3. </div>

Google Maps
  1. <div class="map-box">
  2. <div class="map-canvas"></div>
  3. </div>
parameters:

1. data-zoom - this attribute sets the scale of the map (by default - '8')

  1. <div class="map-canvas" data-zoom="8"></div>

2. data-lat, data-lng - these attributes set the coordinates of the center of the map and the point of the map (by default - '-34' and '150')

  1. <div class="map-canvas" data-lat="40.25" data-lng="-70.235"></div>

3. data-type - this attribute sets the type of the map. Can take values - roadmap, satellite, hybrid, terrain (by default - 'roadmap')

  1. <div class="map-canvas" data-type="satellite"></div>

4. data-scrollwheel - disables zooming on the map (by default - 'false')

  1. <div class="map-canvas" data-scrollwheel="true"></div>

5. data-hue - sets the hue of the feature to match the hue of the color supplied. Note that the saturation and lightness of the feature is conserved, which means that the feature will not match the color supplied exactly. Valid values: An RGB hex string, i.e. '#ff0000'.

  1. <div class="map-canvas" data-hue="#000"></div>

6. data-title - marker's title.

  1. <div class="map-canvas" data-title="Title"></div>

7. data-content - content to display in the InfoWindow.

  1. <div class="map-canvas" data-content="Content"></div>

LivIcons
structure:
  1. <div class="livicon" data-n="rocket" data-s="48" data-c="#ff5c00" data-hc="0"></div>

You can find the detailed information about the configuration of this


Media

Modal - Bootstrap documentation

Images - Bootstrap documentation

Video
structure:

  1. <div class="video-box">
  2. Video
  3. </div>

Video can be inserted from such resources as YouTube, Vimeo and even HTML5 Video. For the playback of the HTML5 Video we use the plugin Video.js

YouTube

  1. <div class="video-box youtube">
  2. <iframe src="..."></iframe>
  3. </div>

Vimeo

  1. <div class="video-box vimeo">
  2. <iframe src="..." frameborder="0" webkitallowfullscreen=""
  3. mozallowfullscreen="" allowfullscreen="">
  4. </iframe>
  5. </div>

HTML5 Video

  1. <div class="video-box html5">
  2. <video class="video-js vjs-default-skin" controls preload="auto" poster="" data-setup="{}">
  3. <source src="..." type="video/mp4">
  4. <source src="..." type="video/webm">
  5. </video>
  6. </div>

Audio

  1. <div class="audio-box">
  2. <iframe width="100%" height="80" scrolling="no" frameborder="no" src="..."></iframe>
  3. </div>

Notification
structure:
  1. <div class="alert fade in">
  2. <i class="fa fa-volume-up alert-icon"></i>
  3. <button type="button" class="close" data-dismiss="alert">×</button>
  4. Content...
  5. </div>
parameters:

1. alert-border - this class sets the border of the informational message

  1. <div class="alert alert-border fade in">
  2. ...
  3. </div>

2. border color/background color - sets the color of the background/border. Can take values - alert-black, alert-success, alert-error, alert-info

  1. <div class="alert alert-info fade in">
  2. ...
  3. </div>

Person

Elements "Person" can be inserted on the page as one or several elements, also these elements can be inserted into the carousel. All these variants can be seen demo html elements folder.


Sequence
  1. <div class="steps">
  2. <div class="step">
  3. <div class="step-wrapper">
  4. Content...
  5. </div>
  6. </div>
  7. </div>
parameters:

1. border color - sets the border. Can take values - border-info, border-success, border-warning, border-error

  1. <div class="steps">
  2. <div class="step border-warning">
  3. <div class="step-wrapper">
  4. Content...
  5. </div>
  6. </div>
  7. </div>

2. background color - sets the color of the background. Can take values - bg-info, bg-success, bg-warning, bg-error

  1. <div class="steps">
  2. <div class="step bg-warning">
  3. <div class="step-wrapper">
  4. Content...
  5. </div>
  6. </div>
  7. </div>

3. background image - sets the image of the background

  1. <div class="steps">
  2. <div class="step bg-warning border-info">
  3. <div id="bg-steps-apart1" class="bg-image"></div>
  4. <div class="step-wrapper">
  5. Content...
  6. </div>
  7. </div>
  8. </div>

4. with spacing

  1. <div class="row steps steps-apart">
  2. <div class="col-sm-4 col-md-4">
  3. <div class="step border-info bg-info">
  4. <div class="step-wrapper">
  5. Content...
  6. </div>
  7. </div>
  8. </div>
  9. </div>

5. numbered

  1. <div class="steps progress-steps">
  2. <div class="step border-warning">
  3. <div class="step-wrapper">
  4. <div class="number">1</div>
  5. Content...
  6. </div>
  7. </div>
  8. </div>

Tabs

Detailed information about configuration of the tabs you can find in the documentation of Bootstrap.


Testimonials
  1. <div class="respond">
  2. <div class="description">
  3. Description...
  4. </div>
  5. <div class="name">
  6. <div class="icon"><i class="fa fa-user"></i></div>
  7. <strong>Name</strong>,
  8. <a href="#" target="" class="no-border">Company</a>
  9. </div>
  10. </div>
parameters:

1. bg - sets the background

  1. <div class="respond bg">
  2. ...
  3. </div>

2. border - sets the border

  1. <div class="respond border">
  2. ...
  3. </div>

Works

On each page you can insert one or more elements. Also these elements can be inserted into the carousel. There is an opportunity to create a filter of any option. The filter is implemented with Isotope


Helper Classes

Class Description
.margin-top-40 Top Margin 40px
.margin-top-60 Top Margin 60px
.margin-top-minus Top Margin -80px
.margin-top-minus-50 Top Margin -50px
.margin-top-minus-45 Top Margin -45px
.margin-bottom-minus Bottom margin -80px
.margin-bottom-minus-45 Bottom margin -45px
.margin-bottom-minus-40 Bottom margin -40px
.bottom-padding Bottom margin 80px
.bottom-padding-medium Bottom margin 60px
.bottom-padding-mini Bottom margin 40px
.banner Hover effect
.round-5 Round corners 5px
Bootstrap helper classes

Grid System

Introduction
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
  1. <div class="row">
  2. <div class="col-md-1">.col-md-1</div>
  3. <div class="col-md-1">.col-md-1</div>
  4. <div class="col-md-1">.col-md-1</div>
  5. <div class="col-md-1">.col-md-1</div>
  6. <div class="col-md-1">.col-md-1</div>
  7. <div class="col-md-1">.col-md-1</div>
  8. <div class="col-md-1">.col-md-1</div>
  9. <div class="col-md-1">.col-md-1</div>
  10. <div class="col-md-1">.col-md-1</div>
  11. <div class="col-md-1">.col-md-1</div>
  12. <div class="col-md-1">.col-md-1</div>
  13. <div class="col-md-1">.col-md-1</div>
  14. </div>
  15. <div class="row">
  16. <div class="col-md-8">.col-md-8</div>
  17. <div class="col-md-4">.col-md-4</div>
  18. </div>
  19. <div class="row">
  20. <div class="col-md-4">.col-md-4</div>
  21. <div class="col-md-4">.col-md-4</div>
  22. <div class="col-md-4">.col-md-4</div>
  23. </div>
  24. <div class="row">
  25. <div class="col-md-6">.col-md-6</div>
  26. <div class="col-md-6">.col-md-6</div>
  27. </div>
Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
  1. <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  2. <div class="row">
  3. <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  4. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  5. </div>
  6. <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  7. <div class="row">
  8. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  9. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  10. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  11. </div>
  12. <!-- Columns are always 50% wide, on mobile and desktop -->
  13. <div class="row">
  14. <div class="col-xs-6">.col-xs-6</div>
  15. <div class="col-xs-6">.col-xs-6</div>
  16. </div>
Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
  1. <div class="row">
  2. <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <div class="row">
  6. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8. <!-- Optional: clear the XS cols if their content doesn't match in height -->
  9. <div class="clearfix visible-xs"></div>
  10. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>

Facebook Login

To enable authentication using the social network facebook you must install the required module, Facebook Connect and Like Free. This module is free and supported by our theme.

Link to the extension on our server.

After installing, go to the tab "System", a section "BELVG EXTENSIONS" will appear in the left menu.
Go go "Facebook Connect and Like Free", and in the field "Enabled" in section "Settings" change it on "Enable".
Also, you must enter "Application Id" and "Secret Key".

Setting "Login Button" is irrelevant, since we have designed the button under the design of our theme.


Theme Settings

Our theme has many settings which will be described below.
In order to access the theme settings you need to go to (System > Itembridge/Settings).


Layout

This is the setting for the appearance of the main Layout. There are three types of the setting.

Value Description
Standart Standard Layout (no configuration of the backgrounds). demo
Boxed Boxed mode has fixed width and provides the background settings (color, image, pattern). demo
Boxed vs top padding Boxed mode has fixed width and provides the background settings (color, image, pattern) and has a significant retreat at the top. demo

Header

There are three options of header settings.

Option Description
Top Bar Allows you to disable the top toolbar (language and currency switcher and magento top links).
Header Type Allows you to change the type of standard headers into fixed.
Home Breadcrumbs Enables or disables breadcrumbs on the homepage.

Footer

There are three options for footer customization.

Option Description
Disable Footer Newsletter Block Disables the newsletter block in footer
Disable Footer Top Block Disables the top part of block in footer
Disable Footer Bottom Block Disables the bottom part of block in footer

Products

General settings of list of products and displaying a single product.
Grid Products Size, Rotate, Change Image on mouseover, Show Action Buttons on mouseover - general settings of the products which don't have certain categories while displaying - for example, Search Results.

Option Description
Grid Products Size There are three variants (Normal, Small, Large) in this option. This option changes the size of products in grid type list.
Rotate This option enables or disables the rotation of the products when hover on it.
Change Image on mouseover This option enables or disables the changing of pictures on the product when you hover on it, is relevant to the grid and list type. Works only when "Rotate" is off.
Show Action Buttons on mouseover This option enables or disables the appearance of action buttons when you hover on it ("Rotate" is off).
Show "New" Label Enables/disables the displaying of "New" label.
Show "Sale" Label Enables/disables the displaying of "Sale" label.
Show "Availability" Enables/disables the displaying of parameter "Availability".
Show "SKU" Enables/disables the displaying of parameter "SKU".
Show "Sale Timer" Enables/disables the displaying of the timer of the discount.
Show "Save Percentage" Enables/disables the displaying of discount's percent.
Price Filter Location Change price filter location

Subscribe

The customization of the modal window for subscription.

Option Description
Ebable Modal Subscribe Enables the modal window with the form of subscription.
Subscribe Title The text for the title.
Subscribe Description Text for the description.
Subscribe Input Placeholder Placeholder for the email input.
Subscribe Button Text for submit button.
Subscribe BG Type Type of background for the modal window.
Subscribe BG Start Color Start color of gradient.
Subscribe BG End Color End color of gradient.
Subscribe BG Image Name of the background image (skin/frontend/progressive/default/images/bg-images/)
Subscribe BG Pattern Background pattern.
Subscribe Border Color Border color of the modal window

Ajax

The configuration of Ajax, such as adding to the cart, to the wishlist, to compare.

Option Description
Enable Ajax Add To Cart Enables Ajax for adding to the shopping cart (works only for products that have no other options).
Enable Ajax Add To Wishlist Enables Ajax for adding to the wishlist (works only for registered users).
Enable Ajax Add To Comare Enables Ajax for adding to the compare list.

Page

Configuration of the upper part of system pages.

Here you can set any static block for displaying at the top of the page. demo


Style Options

Our theme provides a wide selection of customization of colors for different elements. Changing the colors, backgrounds (color, pattern, picture), fonts (all fonts set of Google).
To change the style of the theme you need to go to the corresponding item (System > Configuration > ItemBridge/Design)


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.


Localization

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/progressive/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/progressive/default/locale/de_DE/ directory.
  2. Copy the file app/design/frontend/progressive/default/locale/en_US/translate.csv to the newly created directory. In case with German language file path will be app/design/frontend/progressive/default/locale/de_DE/translate.csv.
  3. Open the file app/design/frontend/progressive/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.

Code copied to clipboard