Last Updated 19 hours ago
Creating an image banner or slider
Creating an image banner or slider
The module lets you add banners, sliders and video blocks to your store - rendered fast and with accessibility (a11y) in mind. In the following example you will configure an image banner: first you create the block and choose where it should appear, then you add a slide (image) to it. A banner with a single slide is static, while a banner with two or more slides automatically becomes a rotating slider.Step 1. Go to the Banners & sliders tab.
Step 2. Click the Add new button.
Step 3. In the Name field, enter an internal name that will help you recognize this block in the list. In this example, enter
Promo banner.Step 4. In the Display locations field, select one or more places where the banner should appear in the store:
- Homepage - on the home page only,
- Top of every page (header) - on every page, at the very top,
- Below the header (banner area) - on every page, below the header,
- Above the footer (every page) - on every page, just above the footer.
Step 5. In the Type field, select Image - banner (1 slide) or slider (2+ slides).
Step 6. In the Layout field, choose the banner width:
- Full width - the banner takes the whole row,
- Half width - the banner takes half the row; create a second half-width banner so the two appear side by side (the module automatically matches their height).
Step 7. In the Image aspect ratio field, choose the proportions of the box in which all slides are shown. Images fill it without distortion (cropping the overflow). Select Auto (from the first slide) to derive the ratio from the first image, or set a fixed one (e.g.
16:9, 4:3, 1:1).Step 8. (Applies to a slider with 2+ slides) Set the Autoplay switch to Yes so the slides change automatically. Auto-rotating sliders always include a visible pause control and respect the system's reduced-motion setting (a11y).
Step 9. (Applies to a slider with 2+ slides) In the Autoplay speed (ms) field, enter how long a single slide is shown, in milliseconds. In this example, enter
5000 (5 seconds).Step 10. (Applies to a slider with 2+ slides) Set the Loop switch to Yes so the slider returns to the first slide after the last one.
Step 11. Make sure the Displayed switch is set to Yes - only displayed banners appear in the store.
Step 12. (Optional) In the Show from and Show until fields, set the date range in which the banner should be visible (inclusive). Leave empty for no time limit.
Step 13. (Optional) In the Days of week section, select the days on which the banner should be shown. Leaving all unchecked means it is shown every day.
Step 14. (Optional) In the Devices section, select the devices on which the banner should be shown (Desktop, Mobile, Tablet). Leaving all unchecked means it is shown on every device.
Step 15. (Optional) In the Customer groups section, select the groups the banner should be shown to. If no group is selected, the banner applies to all customers.
Step 16. Click Save to store the banner.
Step 17. The banner now appears in the list, but it is still empty - add an image to it. In the banner's row in the list, click the Slides action and add a slide (described in the separate guide "Managing banner slides"). Remember: one slide = a static banner, two or more = a rotating slider.
Note. Once the banner starts showing and customers click it, the banner list gains the Views, Clicks and CTR (click-through rate) columns, so you can measure its performance.