> 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/sales-banner.md).

# Sales banner

Use the **Sales banner** section to announce a sale with a prominent discount, promotional headings and content, and optional buttons.

![](/files/p8npTfmL6nB8rnUYla5w)

***

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

#### Set up section

In the editor side panel, click **(+) Add section** and select **Sales 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">Add content</h2>

***

### <mark style="color:$primary;">Add sale details</mark>

Add details about your sale, including the **Sale type**, **Sale amount**, **Sale unit**, and **Terms and conditions**. Adjust the **Font size** and the **Currency symbol position**.

<details>

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

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

1. Click on the **Sales banner** section to open the settings.
2. Enter text for the **Sale type**. The default text sets the sale to be "up to" a certain percentage.

   > Delete the text in this field for sales with a single percentage or dollar amount off on all sale products.
3. Enter the **Sale amount**: either a dollar value or percentage number.
4. Select the **Sale unit**: **% off**, **$ per month**, **$ per year**, **$**, **%**, or set it to **None**.

   > You can change the default text for **Per Month** ("/mo") and **Per year** ("/yr") in the **Default theme content editor**. Learn more about [Changing the wording in your theme](/stiletto/general/adapting-your-theme/edit-default-theme-content.md).
5. Enter text for any **Terms and conditions** that might apply to the sale.
6. Click **Save**.

</details>

<table><thead><tr><th width="175.45172119140625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Sale type</td><td>Enter text to describe the sale amount. The default text sets the sale to be "up to" a certain percentage. Delete the text in this field for sales with a single percentage or dollar amount off on all sale products.</td></tr><tr><td>Sale amount</td><td>Enter the dollar value or percentage amount for the sale.</td></tr><tr><td>Sale unit</td><td>Select the unit of the sale amout: <strong>% off</strong>, <strong>$ per month</strong>, <strong>$ per year</strong>, <strong>$</strong>, <strong>%</strong>, or set it to <strong>None</strong>.</td></tr><tr><td>Terms and conditions</td><td>Add text to state any terms and conditions that might apply to the sale.</td></tr><tr><td>Terms vertical offset</td><td>Use the slider to increase or decrease the amount of space above the terms and conditions text.</td></tr><tr><td>Sale font size</td><td>Change the font size of the sale text between <strong>80</strong> to <strong>200</strong> pixels.</td></tr><tr><td>Mobile sale font size</td><td>For mobile devices, change the font size of the sale text between <strong>80</strong> to <strong>200</strong> pixels.</td></tr><tr><td>Currency symbol position</td><td>Display the currency symbol <strong>Before ($100)</strong> or <strong>After (100$)</strong> the amount.</td></tr></tbody></table>

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

Change the **Heading**, **Subheading**, and **Text** that displays in the right column of the banner. Add a **Button** to link to your sale collections or products or any other page with a custom text.

<details>

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

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

1. Click on the **Sales banner** section to open the settings.
2. Enter **Heading** text to display as a title at the top of the banner.

   > we recommend one to three words.

   > Delete the text in this field to remove the heading.
3. Enter **Subheading** text to display beneath the heading.

   > We recommend two to three short sentences.
4. (*Optional*.) Enter additional **Text** beneath the headings to provide more information about the sale.
5. Click **Save**.

</details>

<details>

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

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

1. Click on the **Sales 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#button-colors).
5. Click **Save**.

</details>

<table><thead><tr><th width="176">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 multiple lines of text.</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.

<details>

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

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

1. Click on the **Sales 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 width or height 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](/stiletto/general/image-guide/theme-image-settings.md) 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>

### <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</mark>

<table><thead><tr><th width="192">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Height</td><td>Change the height of the banner for desktop screens: between <strong><code>200 - 800px</code></strong>.</td></tr><tr><td>Mobile height</td><td>Change the height of the banner for desktop screens: between <strong><code>300 - 800px</code></strong></td></tr></tbody></table>

<h2 align="center">Section layout</h2>

***

Set the layout to one or two columns. Choose whether to show the banner **Frame** (border).

<details>

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

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

1. Click on the **Sales banner** section to open the 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 use the **Two columns** or **One column** layout.
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 add space around the section to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
8. Click **Save**.

</details>

<table><thead><tr><th width="168.07672119140625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td>Display the content of the sales banner in <strong>Two columns</strong> or <strong>One column</strong>.</td></tr><tr><td>Show frame</td><td>Display a thin border line within the section.</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 banner](/stiletto/sections/theme-sections/promotion-banner.md)\
> [Promotion bar](/stiletto/sections/theme-sections/promotion-bar.md)