> 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="/files/guMnEFLENCB9niB6kUGO" 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="/files/szgGL8E4uYdNyfSpZICQ" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/yuTygK6xuINfMRb8rLo8" 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="/files/FjaXBTRGhDK3b8dW5Oyj" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/tIma6sM4ipKc9Cf3lhJ2" 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