General Options
The Banners module is a very simple and efficient way to display static images in your store. Banner images are fully responsive and will resize automatically to any resolution. They are not cropped so you don’t have to calculate exact pixel dimensions and you will always see the entire image.

Image Dimensions

When preparing your images roughly divide your Site Width by how many images you want to display per row. The height can be anything, but make all images within a module the same dimensions so they line up evenly.

For example if you need a banner with 4 images and your site width is 1024 make them around 280px wide. If you want 3 per row make them around 350, etc. For single image banners make the images as wide as your Site Width.

Notice that we make the images wider to avoid upsizing and possible loss of quality. If the original image is larger, it can downsize without loss of quality but if you make them at 220px wide and put 3 per row on a 1024 resolutoin they would get upsized to fit their container (each container being over 300 pixels wide). Also, if you intend to have one image per row on the phone resolution, make it at least 280px wide because the smallest resolution is 320px (minus two 20px margins on the sides).
The Site Width is in Settings > Global > General > Layout > Site Width

You can add up to 8 banners per row within a module. See this example and refer to point 3 below.

Side Columns

The image width for banners placed on the side columns is 220px.

To create a Banners module access it and click on the Create New button on the Add to Layout page, then refer to the explanations below to understand what they do. For an explanation of the Add to Layout page click here.

  • 1 Module Name – This is the module name that will appear on the Add to Layout page.
  • 2 Module Title – Adds title in the store front in the title bar atop your banner or banners. Leave empty if you don’t want a title.
  • 3 Items per Row - Indicate how many banners you want visible per row for each resolution. Resize your browser down to see how the module adapts to each breakpoint. Adjust all sliders to achive your desired layout for each resolution. To create brick pattern banners (3 on 1 row, 2 on the next, etc.) create a separate module for each row and adjust your items per row accordingly.
  • 4 Image Border Settings – Allows you to add borders to your banner image as well as rounded corners.
  • 5 Disable on Mobile – Optionally disable the module on mobile devices.

Top / Bottom Settings
  • 1 Background – Background Settings for the Top or Bottom container holding the module.
  • 2 Fullwidth - Can make the module fullwidth to extend to 100% of the browser width, past the limits of the site container.
  • 3 Margin – Optionally add top and bottom margins to the module.

These options only apply if you add the module to the Top or Bottom positions.
  • 1 Image – The banner image.
  • 3 Link - The link your banner points to.
  • 4 Open in New Tab – Open the page in the same window or a new tab.
  • 2 Status – Turn the banner on/off
  • 5 Sort Order – Changes the order the banners are displayed in.

Once you done with creating banner, you can add this to any layout directly or using “Advnce Grid”