Skip to main content
All CollectionsStorefront pages
Banner types and sizes
Banner types and sizes

All possible types and sizes of banners on the shop pages, additional banner settings — indents, rounding, navigation

Updated over a week ago

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.

Types of banners — Cartum

Important: cover and blockplus banner types are only available for the homepage.

Banner height

Banner height — Cartum

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

Banner corners rounding — Cartum

Indents between banners

Indents between banners — Cartum

Important: If you choose 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.

Banner navigation arrows — Cartum

Pagination

There are two types of pagination markers available:

Pagination markers — Cartum

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.

Read also

Did this answer your question?