Image Slider

Image Sliders can be displayed on almost any page of your website. CMS pages can contain one or more image sliders while catalog pages can only contain one.


Creating an Image Slider is a two step process: you need first to create each individual Slide and then a Slider which will contain the slides.


Step 1: Creating slides

  1. On the Admin menu, select Theme > Image Slider > Slides.
  2. Click Add Slide button.
  3. Under the Slide Information tab, complete the required fields:
    Image Slider - Add Slide - Slide Information tab
  4. On the left pane, click the Images tab and upload the background image for the slide:
    Image Slider - Add Slide - Images tab
    • Prepare 3 versions of your background image with the recommended sizes to improve performance and load speed of your website on tablets and cellphones.
    • Enter a link if you want the background image to be clickable.
  5. On the left pane, click the Content tab and fill in the content for the slide:
    Image Slider - Add Slide - Content tab
  6. [Only applies to Multi-Store installations] On the left pane, click the Store views tab and select the appropriate store view:
    Image Slider - Add Slide - Store views tab
  7. Click the Save Slide button.
  8. Repeat steps 2-7 to create all the slides for your image slider.

Step 2: Creating the Slider

  1. On the Admin menu, select Theme > Image Slider > Sliders.
  2. Click Add Slider button.
  3. Under the Settings section of the "General Information" tab, complete the required fields:
    Image Slider - General Information tab
  4. [Only applies to Multi-Store installations] On the left pane, click the Store views tab and set the store view:
    Image Slider - Store views tab
  5. On the left pane, click the Slides tab, search and select the slides you created on Step 1:
    Image Slider - Slides tab
  6. Click the Save Slider button.
    You can use the Advanced tab if you prefer to manually create the HTML content for the slider. Refer to the last section of this article for an example.

To Insert an Image Slider into a Page

To insert an Image Slider into any CMS page just add the CMS markup tag in the Content field, or use the Insert Widget button located above the Content field.


The CMS markup tag to insert an Image Slider in a CMS page is as follows:

{{block type="itactica_orbitslider/view" identifier="put_here_your_identifier" template="itactica_orbitslider/view.phtml"}}


To insert an Image Slider on a Catalog page do the following:

  1. On the Admin menu, select Catalog > Manage Categories.
  2. On the left pane, click on the name of the category
  3. Click the Display Settings tab.
  4. Set the name of the slider on the Orbit Slider field.
  5. Click the Save Category button.

Using the Advanced tab

If you prefer to insert your own HTML markup inside the slider, you can do so by doing the following:

  1. On the General Information tab set "Enable Advanced Mode" as "Enabled".
  2. On the left pane, click the Advanced tab and fill in the content for the image slider:
    • Image tags must be inside <li> </li> tags with class name "item".
    • Use one list tag (<li></li>) per slide.
    • Do not include opening and closing <ul> or <ol> tags.
    • We recommend creating a HD version, a medium sized version and smaller version of each image and use Foundation's Interchange syntax to add your images, as in the example below.
    • Use class name "dark" on the opening <li> tag for dark images. This way, the text color will be lighter to be more readable over dark images.

    Example code of the demo Home Page slider:

    <li class="item dark">
        <img alt="" data-interchange="[{{media url="orbitslider/hero-1-medium.jpg"}}, (default)], [{{media url="orbitslider/hero-1-small.jpg"}}, (small)], [{{media url="orbitslider/hero-1-medium.jpg"}}, (medium)], [{{media url="orbitslider/hero-1-large.jpg"}}, (large)]" width="1920" height="800">
        <noscript><img alt="Remarkably Crisp and Clear" src="{{media url="orbitslider/hero-1-large.jpg"}}" width="1920" height="800"></noscript>
        <div style="background: none repeat scroll 0% 0% rgb(217, 223, 226);" class="hero-text">
            <h1 style="color: #ffffff" class="show-for-medium-up">Remarkably Crisp and Clear</h1>
            <h1 style="color: #333333" class="show-for-small-only">Remarkably Crisp and Clear</h1>
            <h5 style="color: #ffffff" class="show-for-medium-up">Intenso is a stunning  Retina theme for Magento. Let your products shine with its incredibly detailed and vibrant frontend.</h5>
            <h5 style="color: #777777" class="show-for-small-only">Stunning & Truly Responsive Retina theme for Magento.</h5>
            <a class="button" href="#">Learn more</a>
        </div>
    </li>
    <li class="item">
        <img alt="" data-interchange="[{{media url="orbitslider/hero-2-medium.jpg"}}, (default)], [{{media url="orbitslider/hero-2-small.jpg"}}, (small)], [{{media url="orbitslider/hero-2-medium.jpg"}}, (medium)], [{{media url="orbitslider/hero-2-large.jpg"}}, (large)]" width="1920" height="800">
        <noscript><img alt="The Power of Responsiveness" src="{{media url="orbitslider/hero-2-large.jpg"}}" width="1920" height="800"></noscript>
        <div style="background: none repeat scroll 0% 0% rgb(213, 213, 201);" class="hero-text">
            <h1 style="color: #000000" class="show-for-medium-up">The Power of Responsiveness</h1>
            <h1 style="color: #333333" class="show-for-small-only">The Power of Responsiveness</h1>
            <h5 style="color: #000000" class="show-for-medium-up">Combine the power of Magento with a multi-purpose theme that has been meticulously considered and pixel-precision designed to be beautiful and responsiveness.</h5>
            <h5 style="color: #777777" class="show-for-small-only">Meticulously considered and pixel-precision designed.</h5>
            <a class="button" href="#">Learn more</a>
        </div>
    </li>