Scratch card popup

Copy-paste a theme-editor section for marketing - The viral gamified popup - shoppers scratch a foil layer on a real canvas to reveal their coupon code. Session-gated, dismissible, huge email-list and conversion numbers.

MarketingTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Scratch & win

LUCKY15

Click to simulate scratching

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.
6Create a real discount in Shopify admin first - the popup only reveals it, Shopify applies it at checkout.
7Add once per page. It remembers scratched visitors via localStorage.

scratch-card.liquid

1<gpl-scratch class="gpl-scratch" data-delay="{{ section.settings.delay }}" data-key="gpl-scratch-{{ section.id }}" data-foil="{{ section.settings.foil }}" hidden>2  <div class="gpl-scratch__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.title | escape }}">3    <button type="button" class="gpl-scratch__x" data-close aria-label="Close">&times;</button>4    <h2 class="gpl-scratch__title">{{ section.settings.title | default: 'Scratch & win' }}</h2>5    <div class="gpl-scratch__area">6      <code class="gpl-scratch__code">{{ section.settings.code | default: 'LUCKY15' }}</code>7      <canvas class="gpl-scratch__foil" data-foil></canvas>8    </div>9    <p class="gpl-scratch__hint" data-hint>Scratch the card to reveal your code</p>10  </div>11</gpl-scratch>12 13{% schema %}14{

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.

6Create a real discount in Shopify admin first - the popup only reveals it, Shopify applies it at checkout.

7Add once per page. It remembers scratched visitors via localStorage.

scratch-card.liquid

1<gpl-scratch class="gpl-scratch" data-delay="{{ section.settings.delay }}" data-key="gpl-scratch-{{ section.id }}" data-foil="{{ section.settings.foil }}" hidden>2  <div class="gpl-scratch__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.title | escape }}">3    <button type="button" class="gpl-scratch__x" data-close aria-label="Close">&times;</button>4    <h2 class="gpl-scratch__title">{{ section.settings.title | default: 'Scratch & win' }}</h2>5    <div class="gpl-scratch__area">6      <code class="gpl-scratch__code">{{ section.settings.code | default: 'LUCKY15' }}</code>7      <canvas class="gpl-scratch__foil" data-foil></canvas>8    </div>9    <p class="gpl-scratch__hint" data-hint>Scratch the card to reveal your code</p>10  </div>11</gpl-scratch>12 13{% schema %}14{

Full source is for members

One payment - every snippet, guide and bundle

Get all-access