Magento Tips & Tricks

Tabs with Product sliders on your magento home page

If you check popular ecommerce sites, you can often see such marketing element as tabs with product sliders.
It can be Bestsellers, Recently Added, New Products or products from certain categories.

Tabs with Product sliders

Today we are going to implement this element using two magento extensions from NWDthemes – Responsive Magento Product Slider and Ultratabs.

Ultratabs has CMS tabs feature that allow us to create tabs on cms page. Product slider support different product collections like “New products”, “Bestsellers”, “Category Products”, “Most Viewed Products” and “Recently Added Products”.

  1. Install both extensions

    We do recommend to install and test the extension on development server before installing it on live store

    Before start

    Backup store files and the store database.

    • Disable compilation mode in System > Tools > Compilation.
    • disable Magento cache in Cache Management
    • Log out from magento admin panel ( if you logged in ). This step is required to reset magento access control cache.
    • Unzip extension package
    • Navigation into package/Extension folder
    • Upload content of package/Extension to your magento root directory.
      • package/Extension/app >> magento_root/app
      • package/Extension/js >> magento_root/js
      • package/Extension/skin >> magento_root/skin
      • and so on
      Extension does not overwrite any magento core files
    • Set correct file permissions for all the theme files which you uploaded to your server.
  2. Setup Static blocks for CMS Tabs

    In this step we are going to create several static blocks that will be used as a content for each tab. Product slider block will be added using magento widget system.
    widget selection

    • Log in to magento admin panel
    • Navigate to CMS > Static blocks
    • Add several blocks

    First tab

    It would be just a text block

    • Title = “First Tab”
    • Identifier = “ultratabs1”
    • Content

    Second tab

    Content of this tab is generated with help of Product Slider Widget

    widget Product Slider

    • Title = “Women”
    • Identifier = “ultratabs2”
    • Content

    Third tab

    Content of this tab is generated with help of Product Slider Widget

    • Title = “Men”
    • Identifier = “ultratabs3”
    • Content

    Fourth tab

    Content of this tab is generated with help of Product Slider Widget

    • Title = “Accessories”
    • Identifier = “ultratabs4”
    • Content
  3. Insert CMS Tabs shortcode in CMS page

    In this step we are going to create CMS page and insert Ultratabs widget.

    PLEASE NOTE: If you want to use Ultratabs only for cms pages and do not want to apply it to product page, you need to set “Use Ultra Tabs on Product Page” = NO. It can be done in Ultratabs configuration ( Navigate to NWDthemes > Ultratabs > Configuration and open “General” section )

    IMPORTANT: Tab blocks ID’s should be separating with commas and WITHOUT spaces.

    widget Ultratabs

    • Navigate to CMS > Pages
    • Add new page
    • Title = “Ultratabs CMS tabs”
    • Identifier = “Ultratabs CMS tabs”
    • Content
  4. Check the result

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.