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 Website → 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.
Block
Block Plus
2x
3x
Wide 2x
Wide 3x
Wide Block
Important: the blockplus banner type is only available for the homepage.
Banner height
S (small banner)
M (medium banner)
L (large banner)
Dimensions of different types of banners in pixels
The tables below, as well as the upper-right corner of each image upload field, indicate the optimal size for Retina displays. You can use images that are half the size horizontally and vertically without any loss of quality.
Single banners
Size/Type | Block | Wide Block |
S | 2280 × 432 | 3840 × 576 |
M | 2280 × 864 | 3840 × 1152 |
L | 2280 × 1152 | 3840 × 1536 |
Double and triple banners
Size/Type | 2x | 3x | Wide 2x | Wide 3x |
S | 1440 × 432 | 960 × 480 | 1920 × 576 | 1280 × 640 |
M | 1440 × 864 | 960 × 960 | 1920 × 1152 | 1280 × 1280 |
L | 1440 × 1296 | 960 × 1440 | 1920 × 1728 | 1280 × 1600 |
Block Plus banner
Size/Type | Block Plus |
M | 1920 × 864 / 960 × 432 |
Additional settings
For each banner line, you can additionally customize the corners rounding radius, padding, and navigation elements.
Corners rounding
Margins between banners
None
S (10px)
M (16px)
L (22px)
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 bullets 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.