Promotion banners
Overview:
The Promotion Banners section displays a flexible grid of image-based banners that can be used to highlight promotions, collections, products, or announcements. Each banner supports custom layout settings and can include text, buttons, and links. The grid layout is responsive and can be adjusted for both desktop and mobile views.
Section Configuration:
Grid Layout
| Setting | Description |
|---|---|
| Desktop Row Height | Set the height of each row in the grid on desktop devices. |
| Mobile Row Height | Set the height of each row in the grid on mobile devices. |
Layout & Spacing
| Setting | Description |
|---|---|
| Full Width | Toggle to make the section span the full width of the browser window. |
| Enable Custom Spacing | Enable custom spacing between grid items. |
| Custom Gap | Define the space between grid items in pixels. Visible only if custom spacing is enabled. |
| Remove Corner Radius | Remove the default border radius from banners for a square look. |
| Top Padding | Add spacing above the section. |
| Bottom Padding | Add spacing below the section. |
Blocks Configuration:
Block: Banner
Each block adds a promotional banner to the grid with configurable size, text, and linking options.
Content & Media
| Setting | Description |
|---|---|
| Image | Upload an image to display as the background of the banner. |
| Remove Container | Toggle to remove the container around the text content. |
| Heading | Enter a heading for the banner. |
| Heading Size | Choose the size for the heading text. |
| Description | Add supporting text or a tagline. |
| Text Size | Set the size for the description text. |
Button
| Setting | Description |
|---|---|
| Button Label | Text to display on the button. |
| Button Style | Choose between primary or secondary button styles. |
| Button Link | URL to open when the button is clicked. |
| Open in New Window | Toggle to open the link in a new browser tab. |
| Make Entire Banner Clickable | Toggle to make the entire banner clickable (not just the button). |
Content Positioning & Layout
| Setting | Description |
|---|---|
| Content Position | Choose where the text content appears within the banner (e.g., center, top left, bottom right). |
| Desktop Columns | Number of columns this banner should span on desktop. |
| Desktop Rows | Number of rows this banner should span on desktop. |
| Text Alignment | Set the horizontal alignment of the text within the banner. |
| Color Scheme | Select a color scheme for the text area within the banner. |