Slide-out cart drawer

Copy-paste a theme-editor section for cart & checkout - The flagship replacement for paid cart-drawer apps - free-shipping bar, qty controls, remove, subtotal and an optional upsell card. Intercepts the add-to-cart form and opens automatically.

Cart & checkoutTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Your cart 2

Rs 901 away from free shipping

Merino cardigan

Rs 49.00

SubtotalRs 98.00

Checkout

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.
6Best placement: add the section to the Header group or every template so the drawer is available site-wide.
7To trigger it from your theme's own cart icon instead of the floating button, turn off the floating button and add data-gpl-cart-open to your header cart link.

cart-drawer.liquid

1<gpl-cart class="gpl-cart" data-threshold="{{ section.settings.threshold | times: 100 }}" data-hijack="{{ section.settings.hijack }}">2  {%- if section.settings.floating -%}3    <button type="button" class="gpl-cart__trigger" data-open aria-label="Open cart">4      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>5      <span class="gpl-cart__count" data-count>0</span>6    </button>7  {%- endif -%}8  <div class="gpl-cart__overlay" data-close hidden></div>9  <aside class="gpl-cart__drawer" data-drawer aria-hidden="true" aria-label="{{ section.settings.heading | escape }}">10    <header class="gpl-cart__head">11      <p class="gpl-cart__title">{{ section.settings.heading | default: 'Your cart' }} <span data-count>0</span></p>12      <button type="button" class="gpl-cart__x" data-close aria-label="Close">&times;</button>13    </header>14    <div class="gpl-cart__ship" data-ship hidden>

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.

6Best placement: add the section to the Header group or every template so the drawer is available site-wide.

7To trigger it from your theme's own cart icon instead of the floating button, turn off the floating button and add data-gpl-cart-open to your header cart link.

cart-drawer.liquid

1<gpl-cart class="gpl-cart" data-threshold="{{ section.settings.threshold | times: 100 }}" data-hijack="{{ section.settings.hijack }}">2  {%- if section.settings.floating -%}3    <button type="button" class="gpl-cart__trigger" data-open aria-label="Open cart">4      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>5      <span class="gpl-cart__count" data-count>0</span>6    </button>7  {%- endif -%}8  <div class="gpl-cart__overlay" data-close hidden></div>9  <aside class="gpl-cart__drawer" data-drawer aria-hidden="true" aria-label="{{ section.settings.heading | escape }}">10    <header class="gpl-cart__head">11      <p class="gpl-cart__title">{{ section.settings.heading | default: 'Your cart' }} <span data-count>0</span></p>12      <button type="button" class="gpl-cart__x" data-close aria-label="Close">&times;</button>13    </header>14    <div class="gpl-cart__ship" data-ship hidden>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access