Ecomz – Discount Coupon

The Ecomz Discount Coupon snippet is designed to highlight special promotions and limited-time offers directly on the product page. It supports up to two deal banners with customizable titles, conditions, and promo codes. You can style the layout, enable gradients, and control the positioning of each element for full flexibility.

---

❗Custom Placement Instructions❗

To display the coupon banner on your product page:

1. Go to the Product Information section in your Shopify theme editor.

2. Add a Custom Liquid block.

3. Paste the following code:

htmlCopyEdit<div id='ecomz-coupon'></div>

1. Save and reposition the block as needed to control where the coupon appears on the product page.

---

Accessibility

• ARIA Label: Add a label for screen readers. Default: Promotional Discount Coupon

---

Section Layout & Styling

Background and Dimensions

• Background Color: Transparent

• Max Section Width (rem): 80 (desktop & mobile)

• Border Radius: 16 px

Spacing (Desktop)

• Padding Top: 2.5

• Padding Bottom: 1

• Margin Top: 0

• Margin Bottom: 2

• Left/Right Padding (px): 0

Spacing (Mobile)

• Max Width (rem): 80

• Left/Right Padding (px): 0

---

Coupon Gradient Options

• Enable Gradient: Toggle to enable

• Gradient Colors:

  • Color 1: #66BB6A

  • Color 2: #4CAF50

  • Color 3: #2E7D32

  • Color 4: #1B5E20

• Gradient Angle: 90°

---

Deal 1 Settings

• Title: Extra 10% Off

  • Size: 24px

  • Color: #FFFFFF

  • Position: Left / Center / Right

• Condition Text: On purchases over $100

  • Size: 16px

  • Color: #FFFFFF

  • Position: Left / Center / Right

• Promo Code: Promo Code: 10OFFTODAY

  • Size: 16px

  • Color: #FFFFFF

  • Position: Left / Center / Right

---

Deal 2 Settings

• Title: Extra 5% Off

  • Size: 20px

  • Color: #FFFFFF

  • Position: Left / Center / Right

• Condition Text: Available to first-time users

  • Size: 16px

  • Color: #FFFFFF

  • Position: Left / Center / Right

• Promo Code: Promo Code: FIRST5

  • Size: 16px

  • Color: #FFFFFF

  • Position: Left / Center / Right

• Hide Second Deal: Enable this toggle to display only one deal.

---

Layout Options

• Coupon Height (px): 0 (Set to 0 for auto height)

• Coupon Position: Left / Center / Right

• Border Radius (px): 16

---

This snippet is ideal for creating urgency and incentivizing purchases with limited-time coupon offers. With flexible styling and dual-deal capability, it can be tailored to match any product page layout or brand aesthetic.