> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/promotion-banner.md).

# Promotion banner

Use the **Promotion banner** section to announce a campaign, event, or other promotion. Choose between **two column** or **one column** layout, then add custom promo text, images, buttons, and colors.

{% hint style="info" %}
See the [Promotion bar](/stiletto/sections/theme-sections/promotion-bar.md) section for a more compact promotional section. See the Sales banner for a similar section with a prominent sales price.
{% endhint %}

![](/files/CWovtBOauHiXxxop916s)

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

<h2 align="center">Banner content</h2>

***

### <mark style="color:$primary;">Add headings and buttons</mark>

{% columns %}
{% column %}
The **Promotion banner** has two columns for promotional headings and text. Customize the text content alignment and font size.

Add a **Button** to link to your collections or products or any other page with a custom label.
{% endcolumn %}

{% column %}
![](/files/JSyP8WBzrWRfEsCgIl6i)
{% endcolumn %}
{% endcolumns %}

<details>

<summary><mark style="color:blue;"><strong>STEPS: Headings and text</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Promotion banner** section to open the settings.
2. Enter **Big text** to display in the **Left Column** as a section title.

   > We recommend a short title of 1 to 3 words.

   > Adjust the **Font size** (**`40px - 100px`**) and **Text alignment** (**`Left, Center, or Right`**) of the big text.
3. Enter **Heading** text to display in the **Right column**.

   > we recommend one to three words.

   > Set the **Heading size** from **`Small`**, **`Medium`**, or **`Large`**.
4. Use the **Column width** slider to set how wide the **Left column** should span within the section. The **Right column** will span the remaining width of the section.
5. Enter **Text** to display beneath the heading.

   > We recommend two to three short sentences. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).

   > Set the **Text alignment** to **`Left`**, **`Center`**, or **`Right`**.
6. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;"><strong>STEPS: Buttons</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Promotion banner** section to open the settings.
2. Select or paste a URL for the **Button link**.
3. Enter text for the **Button label**.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > The button uses the theme-wide button color set in the [Theme settings](/stiletto/theme-styles/colors-1.md).
5. Click **Save**.

</details>

#### <mark style="color:$primary;">Left column</mark>

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Column width</td><td>Set how wide the column should span within the section. The right column will adapt to fill the remaining area.</td></tr><tr><td>Big text</td><td>Enter text to display a large title.</td></tr><tr><td>Font size</td><td>Change the font size to <strong>40 - 150px</strong></td></tr><tr><td>Mobile font size</td><td>Change the font size to <strong>40 - 120px</strong></td></tr><tr><td>Text alignment</td><td>Position the 'Big text' to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr><tr><td>Mobile text alignment</td><td>Position the text and headings to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr></tbody></table>

#### <mark style="color:$primary;">Right column</mark>

<table><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to show a heading.</td></tr><tr><td>Heading size</td><td>Change the font size of the heading to <strong>XX-small</strong> to <strong>Display x-large</strong>.</td></tr><tr><td>Text</td><td>Enter text to add additional information about the promotion.</td></tr><tr><td>Text size</td><td>Change the font size of the text to <strong>XX-small</strong> to <strong>5x-large</strong>.</td></tr><tr><td>Text alignment</td><td>Position the text and headings to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr><tr><td>Mobile text alignment</td><td>Position the text and headings to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr><tr><td>Button link</td><td>Select or paste a URL for the button.</td></tr><tr><td>Button label</td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr><tr><td>Button style</td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

<h2 align="center">Banner background</h2>

***

Choose to display a background image that spans the entire banner instead of a background color.

![](/files/gJIShOUsUdL6z8DXdep0)

### <mark style="color:$primary;">Background</mark>

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>If not using an image, select a color scheme to apply a <strong>Background color</strong>.</td></tr><tr><td>Image</td><td>Select or upload an image to display as the background. There are no required image dimensions. We recommend a minimum width of 2500px.</td></tr><tr><td>Mobile image</td><td>Select or upload an image to display as the background of the banner on mobile devices. There are no required image dimensions. We recommend a minimum width of 1200px.</td></tr><tr><td>Image focal point</td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns">Image settings guide</a>.</td></tr><tr><td>Mobile Image focal point</td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns">Image settings guide</a>.</td></tr></tbody></table>

### <mark style="color:$primary;">Background image overlay</mark>

The color **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability. If not using an image, select a color scheme to apply a **Background color**.

<sub>Click section to find settings</sub>

<table><thead><tr><th width="190">Setting</th><th width="569">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select color scheme to apply 'Background' or 'Gradient' colors.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).</td></tr></tbody></table>

### <mark style="color:$primary;">Banner height and frame</mark>

Adjust the section **Height**, choose whether to show the banner **Frame** (border).

<sub>Click section to find settings</sub>

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Height</td><td>Change the height of the banner for desktop screens: between <strong>200</strong> and <strong>800</strong> pixels.</td></tr><tr><td>Mobile height</td><td>Change the height of the banner for mobile screens: between <strong>300</strong> and <strong>800</strong> pixels.</td></tr></tbody></table>

***

> **Related links**
>
> [Countdown banner](/stiletto/sections/theme-sections/countdown-banner.md)\
> [Countdown bar](/stiletto/sections/theme-sections/countdown-bar.md)\
> [Promotion bar](/stiletto/sections/theme-sections/promotion-bar.md)\
> [Sales banner](/stiletto/sections/theme-sections/sales-banner.md)