Coupon cards

Copy-paste a theme-editor section for marketing - Ticket-style offer cards with tap-to-copy and a confirmation toast, driven by section blocks. Adapted from a real storefront build.

MarketingTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Welcome

Flat 10% off

For new customers

Exclusive

Extra 5% off

On prepaid orders

Special

Free shipping

On orders above $50

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.

coupon-cards.liquid

1{%- if section.blocks.size > 0 -%}2  <div class="gpl-coupons" style="--gpl-accent: {{ section.settings.accent }};" role="list">3    {%- for block in section.blocks -%}4      <div class="gpl-coupon" role="listitem" {{ block.shopify_attributes }}>5        <div class="gpl-coupon__info">6          {%- if block.settings.tag != blank -%}7            <span class="gpl-coupon__tag">{{ block.settings.tag | escape }}</span>8          {%- endif -%}9          <h3 class="gpl-coupon__title">{{ block.settings.title | escape }}</h3>10          {%- if block.settings.subtitle != blank -%}11            <p class="gpl-coupon__subtitle">{{ block.settings.subtitle | escape }}</p>12          {%- endif -%}13        </div>14        <div class="gpl-coupon__divider" aria-hidden="true"></div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

coupon-cards.liquid

1{%- if section.blocks.size > 0 -%}2  <div class="gpl-coupons" style="--gpl-accent: {{ section.settings.accent }};" role="list">3    {%- for block in section.blocks -%}4      <div class="gpl-coupon" role="listitem" {{ block.shopify_attributes }}>5        <div class="gpl-coupon__info">6          {%- if block.settings.tag != blank -%}7            <span class="gpl-coupon__tag">{{ block.settings.tag | escape }}</span>8          {%- endif -%}9          <h3 class="gpl-coupon__title">{{ block.settings.title | escape }}</h3>10          {%- if block.settings.subtitle != blank -%}11            <p class="gpl-coupon__subtitle">{{ block.settings.subtitle | escape }}</p>12          {%- endif -%}13        </div>14        <div class="gpl-coupon__divider" aria-hidden="true"></div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access