Spin to win wheel

Copy-paste a theme-editor section for marketing - The classic gamified popup - a canvas prize wheel with configurable prizes, spins to a random slice and reveals the code. Proven email-list and conversion builder.

MarketingTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Spin to win

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.
6Add 'Prize slice' blocks (2-8). The code field is optional - leave blank for 'no win' slices.
7Create matching discounts in Shopify admin so revealed codes actually work.

spin-wheel.liquid

1<gpl-wheel class="gpl-wheel" data-delay="{{ section.settings.delay }}" data-key="gpl-wheel-{{ section.id }}" hidden>2  <div class="gpl-wheel__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.title | escape }}">3    <button type="button" class="gpl-wheel__x" data-close aria-label="Close">&times;</button>4    <h2 class="gpl-wheel__title">{{ section.settings.title | default: 'Spin to win' }}</h2>5    <div class="gpl-wheel__stage">6      <canvas class="gpl-wheel__canvas" data-canvas width="280" height="280"></canvas>7      <div class="gpl-wheel__pin"></div>8    </div>9    <button type="button" class="gpl-wheel__spin" data-spin>{{ section.settings.spin_text | default: 'Spin the wheel' }}</button>10    <div class="gpl-wheel__win" data-win hidden>11      <p data-win-text></p>12      <code class="gpl-wheel__code" data-win-code></code>13    </div>14    {%- for block in section.blocks -%}

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.

6Add 'Prize slice' blocks (2-8). The code field is optional - leave blank for 'no win' slices.

7Create matching discounts in Shopify admin so revealed codes actually work.

spin-wheel.liquid

1<gpl-wheel class="gpl-wheel" data-delay="{{ section.settings.delay }}" data-key="gpl-wheel-{{ section.id }}" hidden>2  <div class="gpl-wheel__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.title | escape }}">3    <button type="button" class="gpl-wheel__x" data-close aria-label="Close">&times;</button>4    <h2 class="gpl-wheel__title">{{ section.settings.title | default: 'Spin to win' }}</h2>5    <div class="gpl-wheel__stage">6      <canvas class="gpl-wheel__canvas" data-canvas width="280" height="280"></canvas>7      <div class="gpl-wheel__pin"></div>8    </div>9    <button type="button" class="gpl-wheel__spin" data-spin>{{ section.settings.spin_text | default: 'Spin the wheel' }}</button>10    <div class="gpl-wheel__win" data-win hidden>11      <p data-win-text></p>12      <code class="gpl-wheel__code" data-win-code></code>13    </div>14    {%- for block in section.blocks -%}

Full source is for members

One payment - every snippet, guide and bundle

Get all-access