# 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](https://help.fluorescent.co/stiletto/sections/theme-sections/promotion-bar) section for a more compact promotional section. See the Sales banner for a similar section with a prominent sales price.
{% endhint %}

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-c28a44939563d0f8df7f5bb0c0accd311d90933f%2Fpromo-banner.jpeg?alt=media)

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add headings and text

***

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

<details>

<summary><mark style="color:blue;"><strong>STEPS</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>

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-e4fdb5f59154d9e809d17d3f15390c9b88705530%2Fpromo-banner-content.jpeg?alt=media)

## Add buttons

***

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

<details>

<summary><mark style="color:blue;"><strong>STEPS</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](https://help.fluorescent.co/stiletto/theme-styles/colors).
5. Click **Save**.

</details>

## **Add background image**

***

<details>

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

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

1. Click on the **Promotion banner** section to open the settings.
2. (*Optional*.) Under **Background image**, click **Select image** to upload a background image.

   > For optimal quality across all devices, we recommend images with a minimum width of `2500px`.
3. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
4. Use the color selector to change the **Text** and **Background** color.

   > The background color appears when there's no background image.
5. (*Optional*.) Change the **Overlay color** and **Overlay opacity** using the slider to increase the contrast between the text and background image (if used).

   > These settings help make your text clear and readable.
6. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

   > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
7. Click **Save**.

</details>

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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FnJe1wFY7p7106UjtgoaV%2Fpromo-banner-image.jpeg?alt=media\&token=be415a52-da2f-47bc-ad67-29e9e642939f)

## Section style

***

Adjust the section **Height**, choose whether to show the banner **Frame** (border), enable **Full width**, customize section colors, and adjust the **Padding** of the section.

<details>

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

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

1. Click on the **Promotion banner** section and scroll down to the **Section style** settings.
2. Use the **Height** and **Mobile Height** sliders to adjust the height of the entire banner.

   > Choose between **`200 - 800px`** on desktop and **`300 - 800px`** on mobile.
3. Under **Color** in the section settings, use the color selectors to customize the **Text**, **Buttons**, **Sold button text**, and **Background color**.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
4. Choose to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/stiletto/theme-styles/animation) in Stiletto.
5. Uncheck the **Show frame** option to hide the thin border line within the banner.
6. Check the **Enable full width** option to span the banner across the whole window or screen, removing the margins on either side.
7. Select a **Padding** option to change the spacing between sections. Choose between **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
8. Click **Save**.

</details>

## Settings reference

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

#### Banner

<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>

#### Left column

<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>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Mobile font size</td><td>Change the font size to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</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>

#### Right column

<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>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Text</td><td>Enter text to add additional information about the promotion.</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>

#### Background image

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><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="../../general/image-guide/theme-image-settings">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="../../general/image-guide/theme-image-settings">Image settings guide</a>.</td></tr></tbody></table>

#### Color and overlay

<table><thead><tr><th width="189">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Enter multiple lines of text.</td></tr><tr><td>Button</td><td>Select the color of the button background.</td></tr><tr><td>Solid button text</td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr><tr><td>Background color</td><td>Select the color of the banner background.</td></tr><tr><td>Overlay</td><td>Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td>Overlay gradient</td><td>Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td>Overlay opacity</td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr></tbody></table>

#### Section style

<table><thead><tr><th width="183">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable animation</td><td>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See the <a href="../../theme-styles/animation">Animation guide</a> to learn more.</td></tr><tr><td>Show frame</td><td>Display a thin border line within the section.</td></tr><tr><td>Padding</td><td>Add a margin of space around the section to either the <strong>Top and bottom</strong>, <strong>Top only</strong>, <strong>Bottom only</strong>, or set it to <strong>None</strong>.</td></tr><tr><td>Enable full width</td><td>Display the banner at the full width of the screen or window.</td></tr></tbody></table>

\\

***

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