Display a coupon code with one-click copy and automatic application to the cart on the product page.
Coupon Code
The Coupon Code block displays a coupon directly on the product page. The customer can copy the code in one click, and optionally, the code is automatically applied when they reach checkout.
How to Add It
- Open the Shopify theme editor
- Navigate to a product page
- Click Add a block
- Select Coupon Code
ℹ️This block allows up to 3 instances per section. You can display multiple different coupon codes on the same product page.
How It Works
- The customer sees the coupon code displayed on the product page
- They click on the code or the copy button
- The code is copied to the clipboard
- A confirmation message appears ("Code copied!")
- If auto-apply is enabled, the code will be pre-filled at checkout
Normal coupon block, 2) Click on the code, 3) "Code copied!" message with check icon)
Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Label | Text | "Exclusive offer" | Text displayed above the code |
| Coupon code | Text | SAVE10 | The code to copy |
| Success message | Text | "Code copied!" | Message displayed after copying |
| Auto-apply | Checkbox | Yes | Automatically applies the code at checkout |
💡The Auto-apply option uses Shopify's
?discount=CODE URL parameter to pre-fill the code at checkout. It is transparent to the customer and eliminates the friction of having to paste the code manually.Design
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Style | Select | Solid / Dashed / Minimal / Inline | Dashed | Container appearance |
| Size | Select | Small / Medium / Large | Medium | Overall block size |
| Border radius | Range | 0-50px (step 2px) | 8px | Corner rounding |
4 Visual Styles
| Style | Description | Ideal For |
|---|---|---|
| Solid | Solid background fill | Premium style, highly visible |
| Dashed | Dashed border (cut-out coupon style) | Classic e-commerce, familiar |
| Minimal | Clean style without prominent background or border | Discreet integration into the flow |
| Inline | Compact single-line format | Tight spaces, subtle |
Colors
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Background color | Select | Background / Background secondary / Foreground / Accent 1 / Accent 2 | Background secondary | Block background |
| Text color | Select | Foreground / Background / Accent 1 / Accent 2 | Foreground | Code and label color |
| Border color | Select | Foreground / Background / Accent 1 / Accent 2 | Foreground | Border color (Dashed and Solid styles) |
Icon
| Setting | Type | Default | Description |
|---|---|---|---|
| Icon | Select | percent_discount | Icon displayed before the code |
| Custom icon | Image picker | - | Custom image as icon |
Alignment
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Desktop alignment | Select | Left / Center / Right | Left | Position on desktop |
| Mobile alignment | Select | Left / Center / Right | Left | Position on mobile |
User Interaction
The block uses an accessible button with aria-label for copying. On click:
- The code is copied via the browser's Clipboard API
- The copy icon transforms into a check icon
- The success message appears briefly
- After a few seconds, the interface returns to its normal state
ℹ️Copying works on all modern browsers via
navigator.clipboard.writeText(). On older browsers, a document.execCommand('copy') fallback is used.Use Cases
Sitewide promo
- Label: "Special offer: 10% off everything!"
- Code: WELCOME10
- Dashed style for the classic coupon look
- Auto-apply enabled for a frictionless experience
Product-specific offer
- Label: "Exclusive code for this product"
- Code: PRODUCT20
- Solid style with Accent 1 background to catch the eye
- Size: Large
Subtle complementary code
- Empty or short label ("Coupon code")
- Code: FREE_SHIP
- Inline or Minimal style
- Size: Small
- Left alignment
⚠️Make sure the displayed coupon code is actually active in Settings > Discounts in your Shopify admin. An expired or invalid code will frustrate the customer at checkout.