# 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


---

# 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://docs.smind.io/in-app/library/product-blocks/coupon-code.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.