Banner line is a block on a page where a banner of a certain type is placed. The type of banner determines the number of images in the line and their size.
Banner lines on the shop pages
You can place any number of banners on the homepage. There are two banner lines on the catalog pages: Top and Bottom (above and below the products).
New banner lines and change of banner type
To create new banner lines, change banner parameters in existing lines, or change their location, go to the Webste → Design → Design editor section of the admin panel and expand the Homepage item. Click Add banner or expand an existing banner line and set the necessary banner parameters. A preview in the design editor allows you to immediately evaluate the changes you've made.
Important: Before changing your banners, we recommend that you save the images you used before. After applying the changes, your previous images may be deleted.
Types of banners
All available banner types are shown below.
Important: cover and blockplus banner types are only available for the homepage.
Banner height
Dimensions of different types of banners in pixels
Single banners
Size/Type | block | wideblock | cover |
S | 1440 × 216 | 1920 × 288 | 1920 × 400 |
M | 1440 × 432 | 1920 × 576 | 1920 × 600 |
L | 1440 × 576 | 1920 × 768 | 1920 × 800 |
Double and triple banners
Size/Type | 2x | 3x | wide2x | wide3x |
S | 720 × 216 | 480 × 240 | 960 × 288 | 640 × 320 |
M | 720 × 432 | 480 × 480 | 960 × 576 | 640 × 640 |
L | 720 × 648 | 480 × 720 | 960 × 864 | 640 × 800 |
Blockplus banner
Size/Type | blockplus |
M | 960 × 432 / 480 × 216 |
Additional settings
For each banner line, you can additionally customize the corners rounding radius, padding, and navigation elements.
Corners rounding
Indents between banners
Important: If you choose to use banner padding (s-l), don't place important image elements close to the edge. Allow 10-15 pixels from the edge to be overlapped by the indentation.
Navigation in banners
Navigation is displayed in block, wideblock, and large blockplus banners if the number of banners in the line is more than one (slider).
Navigation consists of scroll arrows and pagination markers. Keep in mind that banner navigation settings are common to the entire site.
Arrows
There are eight types of arrows available. By default, the arrows are white, but you can change them to any color.
Pagination
There are two types of pagination markers available:
You can enable or disable navigation elements, change their type and color of arrows in the Website → Design → Design editor admin panel section, the Global styles item, Blocks and navigation tab, Banners navigation sub-section.