# Promotion grid

Use the **Promotion banner** section to feature discounted products and collections in multiple rows and columns.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F6Z1h30SWfihi4y7E9cCv%2Fpromotion-grid-2-barista.jpg?alt=media&#x26;token=c33acf6a-4253-462d-af2e-1762b7062f2b" alt=""><figcaption><p>2 column promotion grid</p></figcaption></figure>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FPoThrFtdkI4uUyhWQ8WH%2Fpromotion-grid-barista.jpg?alt=media&#x26;token=6314f7bb-d18b-474b-92aa-16a2f9b2b187" alt=""><figcaption><p>3 column promotion grid</p></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Promotion grid**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Settings reference

### Block settings

Click a **Promotion grid** block to find the following settings.

<table><thead><tr><th width="182">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text width</td><td>Set the maximum width of heading text as a percentage of the window width on a desktop.</td></tr><tr><td>Accent</td><td>Add text to show a small heading above the main heading.</td></tr><tr><td>Heading</td><td>Add text for the row item heading. We recommend using a short title or question that is answered in the row item text.</td></tr><tr><td>Heading size</td><td>Change the font size of the heading from small (1) to large (8).</td></tr><tr><td>Text</td><td>Add text to show beneath the heading.</td></tr><tr><td>Text size</td><td>Change the font size of the text from small (1) to large (8).</td></tr><tr><td>Button link</td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td>Button label</td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td>Button style</td><td>Change the style of the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.</td></tr></tbody></table>

### Section settings

Click the **Promotion grid** section to find the following settings.

<table><thead><tr><th width="206">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Center header content</td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td>Accent</td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td>Heading</td><td>Add text to show a main heading above the section.</td></tr><tr><td>Subheading</td><td>Add text to show a subheading below the main heading.</td></tr><tr><td>Maximum text width</td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr><tr><td>Button link</td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td>Button label</td><td>Enter call-to-action text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td>Button style</td><td>Change the style of the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.</td></tr><tr><td>Buttons position</td><td>Choose to show the buttons either in the Header (below the headings) or in the Footer (below the product rows).<br><br>In the footer position, the button is always centered.</td></tr></tbody></table>

#### **Section layout**

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Number of columns on desktop</td><td>Choose how many promotion blocks to display in each row: between 2 and 4 columns.</td></tr><tr><td>Enable slider on mobile</td><td>Display promotion blocks in a single-row carousel that visitors can swipe left and right view more.</td></tr><tr><td>Text position</td><td>Choose the placement of the block text: either Over image, Left of image, or Right of image.</td></tr><tr><td>Image aspect ratio</td><td>Choose to crop the primary image to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).<br><br>Learn more about aspect ratios in our <a href="../../../general/image-guide/theme-image-settings#image-aspect-ratio">Image settings guide</a>.</td></tr><tr><td>Image spacing</td><td>Increase or decrease the spacing around the images: between 0px and 20px.</td></tr><tr><td>Desktop image size</td><td>Set the pixel width of images for desktop screens: between 50 and 80 pixels.</td></tr><tr><td>Mobile image size</td><td>Set the pixel width of images for mobile screens: between 40 and 80 pixels.</td></tr><tr><td>Title font</td><td>Set the title font to the Body or Heading font selected in your theme settings.</td></tr></tbody></table>

#### **Promotion items**

<table><thead><tr><th width="225">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show border</td><td>Choose to show a border around the section content.</td></tr><tr><td>Bold discount text</td><td>Display the discount text with a bold style.</td></tr><tr><td>Color scheme</td><td>Change the color scheme applied to the text block.<br><br>Select the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default colors: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You may also select one of the two custom color schemas. Learn more about <a href="../../../theme-styles/colors#color-schemes">Color schemes</a>.</td></tr><tr><td>Override with custom colors</td><td>Check this option to apply custom colors to the text box. These colors will override the color scheme.</td></tr><tr><td>Text color</td><td>Select a custom color for all text in the text box. This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td>Background color</td><td>Select a custom color for background of text box. This setting applies only if the Override with custom colors option is enabled.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Countdown banner](https://help.fluorescent.co/cornerstone/pages/theme-sections/countdown-banner)\
> [Countdown bar](https://help.fluorescent.co/cornerstone/pages/theme-sections/countdown-bar)\
> [Sales banner](https://help.fluorescent.co/cornerstone/pages/theme-sections/sales-banner)