# Discount code bar

{% columns %}
{% column width="58.333333333333336%" %}
Promote discounts with a special 'copy discount' code that customers can add at checkout.

<figure><img src="/files/nAOiUWyeu1E8SmF3kKvW" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7Tfi92qJYfTyRA0NzLW5" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Key features**

Copy discount code button

Color or media background

Custom discount button icons
{% endhint %}

{% hint style="info" %}
**Blocks**

[Heading](#heading-block)

[Text](#text-block)

[Discount](#discount-code-button)
{% endhint %}

{% endcolumn %}
{% endcolumns %}

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

***

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Vertical padding</mark></td><td valign="top"><mark style="color:$info;">0 - 20</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile vertical padding</mark></td><td valign="top"><mark style="color:$info;">0 - 20</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Horizontal gap</mark></td><td valign="top"><mark style="color:$info;">Global</mark><br><mark style="color:$info;">Custom (0 - 10)</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile vertical gap</mark></td><td valign="top"><mark style="color:$info;">0 - 10</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Center /</mark> <mark style="color:$info;">Right</mark></td></tr></tbody></table>

<h2 align="center">Discount code button</h2>

***

Enter your discount code and choose how to display the "copy code" button. Customize the size, style, color, and icon.

Use your discount code generated in your [Shopify Discounts page](https://admin.shopify.com/discounts). Read Shopify's help guide to learn [how to create discount codes](https://help.shopify.com/en/manual/discounts/discount-types/percentage-fixed-amount).

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Display</mark></td><td valign="top"><mark style="color:$info;">Code button</mark><br><mark style="color:$info;">Code with copy button</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Code</mark></td><td valign="top">Enter your discount code as set up in the Shopify admin.</td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top">X / <mark style="color:$info;">S / M / L</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Style</mark></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Dashed</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Max width</mark></td><td valign="top"><mark style="color:$info;">150 - 225px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icon</mark></td><td valign="top"></td></tr></tbody></table>

<h2 align="center">Background media</h2>

***

Display an image, solid color, or autoplay video (without sound) as the section background.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media type</mark></td><td valign="top"><mark style="color:$info;">Color</mark><br><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr></tbody></table>

<details>

<summary>Image</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Color</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Background color</mark></td><td valign="top"><mark style="color:$info;">Color scheme</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top">Match section<br><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom</mark></td><td valign="top"><mark style="color:$info;">Background</mark><br><mark style="color:$info;">Text</mark></td></tr></tbody></table>

</details>

<details>

<summary>Video</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile video focal point</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Overlay colors</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overlay opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr></tbody></table>

</details>

<h2 align="center">Content blocks</h2>

***

Add heading and text content in the nested block settings.

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

<sub><mark style="color:$info;">Click Heading block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Enter text to display heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Heading size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr></tbody></table>

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

<sub><mark style="color:$info;">Click Text block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Enter text to display next to heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Heading size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

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

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><mark style="color:blue;">Set content to page width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="/pages/XSI0ASdBWe3CkRGeWchj">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](/section-studio/sections/global-styles/borders-and-styles.md#large-elements)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/section-studio/sections/sections-overview/discount-code-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.