How to set up the promotion blocks

The promotion blocks section showcases your top deals or featured products with customizable visuals and discount tags.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Items per row: Adjust the number of cards displayed in a single row.

Columns gap: Select the gap size between columns. Options: Extra Small, Small, Medium, Large, Extra Large, Extra Extra Large.

Stack on mobile: Choose whether the promotion blocks stack vertically on mobile devices.

Image ratio: Select the aspect ratio for images in the promotion blocks. Options: Adapt to first image, Portrait, Square, Landscape.

Styles

Heading size: Select the size of the promotion block heading. Options: Extra Small, Small, Medium, Large, Extra Large.

Font scale: Adjust the overall text scale for the promotion block, affecting the heading and other text elements.

Section heading color: Choose the color for the heading of the section.

Section subheading color: Choose the color for the subheading of the section.

Section background color: Choose the background color for the section.

Promotion block

Image: Select or upload an image for the promotion block. You can also browse free images via the “Explore free images” link.

Heading: Set the title for the promotion block.

Link: Set the destination for the promotion block (e.g., page, collection, product, external link, etc.).

Badge text: Enter the text for the badge displayed on the promotion block.

Heading alignment: Select the alignment of the heading. Options: Left, Center, Right.

Badge position: Select the position of the badge on the promotion block.

Styles

Overlay color: Choose the color of the overlay applied to the promotion block image.

Overlay opacity: Adjust the transparency of the overlay color.

Heading text color: Choose the color of the heading text.

Heading background color: Choose the background color behind the heading.

Heading background opacity: Adjust the transparency of the heading background color.

Badge text color: Choose the color of the text inside the badge.

Badge background color: Choose the background color of the badge.

Badge border color: Choose the color of the badge border.

Badge border radius: Adjust the roundness of the badge corners.