Post-add-to-cart upsell

Copy-paste a theme-editor section for cart & checkout - Shows a one-click 'add this too' offer the moment a shopper adds to cart - intercepts the form, offers the upsell, then continues to the cart. Post-purchase upsell apps charge $20+/mo for this.

Cart & checkoutTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Add to cart

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 once to your product template. It wakes up when any add-to-cart form on the page submits.
7Safe alongside the cart drawer - they share a lock so an item never gets added twice.

upsell-modal.liquid

1{%- assign u = section.settings.product -%}2{%- if u != blank -%}3<gpl-upsell class="gpl-usmodal" hidden>4  <div class="gpl-usmodal__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.heading | escape }}">5    <button type="button" class="gpl-usmodal__x" data-close aria-label="Close">&times;</button>6    <p class="gpl-usmodal__heading">{{ section.settings.heading | default: 'Complete your order' }}</p>7    <div class="gpl-usmodal__prod">8      {%- if u.featured_image -%}9        <img class="gpl-usmodal__img" src="{{ u.featured_image | image_url: width: 160 }}" alt="{{ u.title | escape }}" width="160" height="160">10      {%- endif -%}11      <div>12        <p class="gpl-usmodal__name">{{ u.title | escape }}</p>13        <p class="gpl-usmodal__price">{{ u.price | money }}</p>14      </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.

6Add once to your product template. It wakes up when any add-to-cart form on the page submits.

7Safe alongside the cart drawer - they share a lock so an item never gets added twice.

upsell-modal.liquid

1{%- assign u = section.settings.product -%}2{%- if u != blank -%}3<gpl-upsell class="gpl-usmodal" hidden>4  <div class="gpl-usmodal__box" role="dialog" aria-modal="true" aria-label="{{ section.settings.heading | escape }}">5    <button type="button" class="gpl-usmodal__x" data-close aria-label="Close">&times;</button>6    <p class="gpl-usmodal__heading">{{ section.settings.heading | default: 'Complete your order' }}</p>7    <div class="gpl-usmodal__prod">8      {%- if u.featured_image -%}9        <img class="gpl-usmodal__img" src="{{ u.featured_image | image_url: width: 160 }}" alt="{{ u.title | escape }}" width="160" height="160">10      {%- endif -%}11      <div>12        <p class="gpl-usmodal__name">{{ u.title | escape }}</p>13        <p class="gpl-usmodal__price">{{ u.price | money }}</p>14      </div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access