Skip to main content

How to create slider banner

A slider banner allows you to display multiple banners in a carousel format with automatic scrolling and navigation controls. There is no limit to the number of banners in a single slider.

Campaigns dashboard

Banners slider example

Follow these steps to create a banner:

1. Create a placeholder for displaying the banners​

Navigate to the Placeholder section and create a new placeholder with the internal name Homepage / Main Slider and set the Display mode to Slider.

Enable Autoplay and set the autoplay timeout, for example, 3 seconds. Additionally, you can enable pagination and navigation buttons.

Enable Use predefined position and set the following:

  • Display on: CMS Home Page
  • Container: Before main columns
  • Before: -

In the additional settings section, configure:

  • Identifier: homeslider
  • Additional CSS: 
    .mst-banner__placeholder-homeslider a.block-promo {
        margin-bottom: 0;
    }

    .mst-banner__placeholder-homeslider img {
        width: 100%;
    }

    @media screen and (max-width: 768px) {
        .mst-banner__placeholder-homeslider img {
            max-width: none;
            width: auto;
        }
    }

This CSS will remove spacing below the banner and scale the image properly for both desktop and mobile devices. Save all changes.

2. Create the first banner​

Navigate to the Banner section and create a new banner named Homepage Slide 1. Assign it to the appropriate store view and select which customer groups can view it.

Set the Placeholder to Homepage / Main Slider, created in the previous step.

Set Priority = 1.

In the Content section, create the banner content for the first slide. You can use an image, text, or a combination of both.

Save all changes.

3. Create the second banner​

Create a new banner named Homepage Slide 2. For the Placeholder, again select Homepage / Main Slider, and set Priority = 1, the same as the first banner.

note

Using the same priority value allows multiple banners to be displayed as a slider. If you assign unique priority values, the slider will not function correctly.

In the Content section, create the banner content for the second slide.

The slider with two banners has now been successfully created. To add more slides, simply repeat step 3 as many times as needed.

Save all changes.