> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/in-app/library/product-blocks/coupon-code.md).

# Coupon Code

This block allow you drop into your product page to highlight a promotional code and its deal. Each code is presented in a styled “pill” that shoppers can click to copy, plus a short message explaining the discount threshold.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FEHQcr4XQX9KHyAZmjIpe%2FCouponcode1.jpg?alt=media&amp;token=f280abd7-b4b1-4e5a-9b6f-c3a02311c471" alt=""><figcaption></figcaption></figure>

## **Key Features**

* Rich-Text Descriptions: Edit the label text  with bold, italics, links or emojis to match your brand voice.
* Customizable Code “Pill” Styling: Control background color, text color, padding, border radius and font size of the code badge
* Copy-to-Clipboard Button: A one-click/tap “copy” icon next to each code eliminates typos and friction at checkout.

## Benefits

* Instant Visibility of Savings: The customers see exactly what code to use and how much they’ll save, in short, that no hunting around for promotions.
* Boosts Conversion & Urgency: When combined with a live timer or limited-time banner, coupon codes create FOMO, encouraging shoppers to act fast.

## How To Use?

1. After installing the **Coupon Code** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab.
2. Choose the **Coupon Code** block

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FRxAaMou1nBv94JC97VbX%2FCoupon%20Code%201.jpg?alt=media&amp;token=a3474855-c369-40dd-a42e-4d6538a4eed5" alt=""><figcaption></figcaption></figure>

3. Copy the block ID. For example: **smi-block-coupon-code-1**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F7JYh63DRyamSEHXGQ3iK%2FCoupon%20Code%202.jpg?alt=media&amp;token=edf1da05-0bb4-4dfb-8501-973d8b6c495d" alt=""><figcaption></figcaption></figure>

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKuBq5JVRTT2pZYuTeVZj%2FCountdown%20Timer%20Blocks%203.jpg?alt=media&amp;token=ffae71ba-6b1f-49ae-9a44-111fae623629" alt=""><figcaption></figcaption></figure>

5. On the **Smind Block**, insert the block ID of coupon code which is **smi-block-coupon-code-1** to the Section ID and change the block name if you want.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F1pSHwJCo9ObbhjmNzmio%2FCoupon%20Code%203.jpg?alt=media&amp;token=02e02dae-ab69-4dd6-8f27-ba6a97a2b163" alt=""><figcaption></figcaption></figure>

6. Next, you can rearrange the relevant blocks within the product detail sections

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FMQizveRX7SyUB16NBQvM%2FCoupon%20Code%204.jpg?alt=media&amp;token=8a4f600c-e3c6-48d7-a6da-d79d13300a81" alt=""><figcaption></figcaption></figure>

7. Finally, let's start to customize the **Coupon Code** block

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FNLpCos0p7mCKwXHHmeBw%2FCoupon%20Code%205.jpg?alt=media&amp;token=c30e249d-b9f2-4af3-9e9a-a123fd07167f" alt=""><figcaption></figcaption></figure>

* Block ID: The unique ID of coupon code block
* Content Max Width: Set the maximum width of the timer’s content area can stretch to.
* Coupon code 1 / Coupon code 2: Put the actual code in square brackets \[ ]. To create a discount code, you can learn more about it from the [link](https://help.shopify.com/en/manual/discounts/discount-types/percentage-fixed-amount#create-a-fixed-value-or-percentage-discount)
* Card style (1 | 2): Two preset layouts for how each code and its description appear
* Text size: Controls the font-size of the entire coupon message (both code pill and description).
* Content alignment: Aligns each voucher entry within its container.
* Animation: When enabled, applies a subtle entrance animation
* Color Scheme: Picks one of your color scheme to instantly change the style backgrounds and text.
* Coupon code: Change the code-pill’s background color—use this to draw extra attention.
* Top margin: Space above the entire coupon block.
* Bottom margin: Space below the coupon block.
* Icon style: Select from several preset copy-icon designs