Promotion banners
Overview
The Promotion Banners section displays a flexible grid of promotional images, each with optional headings, captions, discounts, and links. This section is ideal for showcasing sales, product categories, or featured collections.
Section Configuration:
Setting |
Description |
|---|---|
| Desktop Row Height | Sets the row height for desktop grid layout (200–600px). |
| Mobile Row Height | Sets the row height for mobile grid layout (150–300px). |
| Columns | Defines how many columns appear in the grid (6–9). |
| Remove Spacing | Toggles spacing between grid items. |
| Container Layout | Controls the section width: Page Width, Contained Content, or Full Width. |
| Corner Radius | Applies a corner radius style to the section’s outer edges. |
| Color Scheme | Applies a predefined color scheme to the section background. |
| Top Padding | Adds spacing above the section (0–100px). |
| Bottom Padding | Adds spacing below the section (0–100px). |
Blocks Configuration:
Block: Banner
Each banner block represents a promotional image with text and an optional link.
Setting |
Description |
|---|---|
| Image | Upload or select an image for the banner. |
| Discount | Optional text to highlight a discount (e.g., "20% OFF"). |
| Discount Size | Sets the font size of the discount text. |
| Discount Weight | Sets the font weight of the discount text. |
| Heading | Optional heading displayed on the banner. |
| Heading Size | Sets the font size of the heading. |
| Heading Weight | Sets the font weight of the heading. |
| Caption | Optional caption text shown below the heading. |
| Caption Size | Sets the font size of the caption. |
| Caption Weight | Sets the font weight of the caption. |
| Content Position | Controls where the text content appears on the banner (e.g., bottom left, center right, etc.). |
| Link | Makes the entire banner clickable by adding a link. |
| Open in New Window | Opens the banner link in a new tab when enabled. |
| Block Corner Radius | Adjusts the border radius of the individual banner (options: none, one side, or both). |
| Columns | Sets how many columns this banner spans (1–9). |
| Rows | Sets how many rows this banner spans (1–4). |
| Color Scheme | Applies a predefined color scheme to this banner. |
The image, content position, and size/weight settings allow for a variety of visual compositions within a single section.