Bundle & save table

Copy-paste a Liquid snippet for product page - Tiered 'buy more, save more' pricing rows. Clicking a tier sets the quantity and highlights the deal - pushes average order value up.

Product pageTheme snippetFree to copyOS 2.0 themes

Live previewCustomize in playground

Bundle & save

On the store it also sets the quantity field - and the discount must exist in Shopify too.

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Create snippets/quantity-breaks.liquid, paste the complete file - styles and script are already inside it.
3Render it above the add-to-cart button inside your product form (usage tag in the Usage tab).
4IMPORTANT: the discounts shown must also exist in Shopify - create matching automatic discounts or bundle pricing, otherwise customers see a saving that the cart never applies.

quantity-breaks.liquid

Complete source

1{%- comment -%}2  Shows a per-unit price so shoppers understand the saving. The numbers are3  only accurate if matching Shopify discounts exist - keep them in sync.4{%- endcomment -%}5{%- assign p = product.selected_or_first_available_variant.price | default: product.price -%}6<div class="gpl-qty" data-gpl-qty style="--gpl-accent: {{ accent | default: 'rgb(var(--color-button, 200 245 66))' }};">7  <p class="gpl-qty__head">Bundle &amp; save</p>8  <button type="button" class="gpl-qty__tier is-active" data-qty="1">9    <span class="gpl-qty__label">Buy 1</span>10    <span class="gpl-qty__price">{{ p | money }}</span>11  </button>12  <button type="button" class="gpl-qty__tier" data-qty="2">13    <span class="gpl-qty__label">Buy 2 <em class="gpl-qty__save">save 10%</em></span>14    <span class="gpl-qty__price">{{ p | times: 2 | times: 90 | divided_by: 100 | money }}</span>15  </button>16  <button type="button" class="gpl-qty__tier gpl-qty__tier--best" data-qty="3">17    <span class="gpl-qty__label">Buy 3 <em class="gpl-qty__save">save 20%</em> <span class="gpl-qty__tag">best value</span></span>18    <span class="gpl-qty__price">{{ p | times: 3 | times: 80 | divided_by: 100 | money }}</span>19  </button>20</div>21 22{% stylesheet %}23.gpl-qty { display: grid; gap: 0.5rem; margin: 1rem 0; }24.gpl-qty__head { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }25.gpl-qty__tier {26  display: flex;27  align-items: center;28  justify-content: space-between;29  gap: 0.75rem;30  width: 100%;31  padding: 0.7rem 0.9rem;32  border: 1px solid rgb(var(--color-foreground, 148 163 184) / 0.2);33  border-radius: 0.75rem;34  background: rgb(var(--color-foreground, 148 163 184) / 0.05);35  color: inherit;36  font: inherit;37  cursor: pointer;38  text-align: left;39  transition: border-color 0.15s ease, background 0.15s ease;40}41.gpl-qty__tier.is-active {42  border-color: var(--gpl-accent);43  background: rgb(var(--color-foreground, 148 163 184) / 0.1);44  box-shadow: 0 0 0 1px var(--gpl-accent);45}46.gpl-qty__label { font-weight: 600; font-size: 0.9rem; }47.gpl-qty__save {48  font-style: normal;49  font-size: 0.7rem;50  font-weight: 700;51  color: var(--gpl-accent);52  margin-left: 0.35rem;53}54.gpl-qty__tag {55  font-size: 0.6rem;56  font-weight: 700;57  letter-spacing: 0.06em;58  text-transform: uppercase;59  background: var(--gpl-accent);60  color: #0b1220;61  padding: 0.15rem 0.45rem;62  border-radius: 999px;63  margin-left: 0.4rem;64}65.gpl-qty__price { font-weight: 700; font-size: 0.95rem; }66{% endstylesheet %}67 68{% javascript %}69document.querySelectorAll('[data-gpl-qty]').forEach((wrap) => {70  const tiers = wrap.querySelectorAll('[data-qty]');71  tiers.forEach((btn) => {72    btn.addEventListener('click', () => {73      tiers.forEach((t) => t.classList.remove('is-active'));74      btn.classList.add('is-active');75      const qty = btn.getAttribute('data-qty');76      const input = wrap.closest('form')?.querySelector('input[name="quantity"]')77        || document.querySelector('input[name="quantity"]');78      if (input) input.value = qty;79    });80  });81});82{% endjavascript %}83

Usage

{% render 'quantity-breaks' %}

How to install on your store

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

2Create snippets/quantity-breaks.liquid, paste the complete file - styles and script are already inside it.

3Render it above the add-to-cart button inside your product form (usage tag in the Usage tab).

4IMPORTANT: the discounts shown must also exist in Shopify - create matching automatic discounts or bundle pricing, otherwise customers see a saving that the cart never applies.

quantity-breaks.liquid

Complete source

1{%- comment -%}2  Shows a per-unit price so shoppers understand the saving. The numbers are3  only accurate if matching Shopify discounts exist - keep them in sync.4{%- endcomment -%}5{%- assign p = product.selected_or_first_available_variant.price | default: product.price -%}6<div class="gpl-qty" data-gpl-qty style="--gpl-accent: {{ accent | default: 'rgb(var(--color-button, 200 245 66))' }};">7  <p class="gpl-qty__head">Bundle &amp; save</p>8  <button type="button" class="gpl-qty__tier is-active" data-qty="1">9    <span class="gpl-qty__label">Buy 1</span>10    <span class="gpl-qty__price">{{ p | money }}</span>11  </button>12  <button type="button" class="gpl-qty__tier" data-qty="2">13    <span class="gpl-qty__label">Buy 2 <em class="gpl-qty__save">save 10%</em></span>14    <span class="gpl-qty__price">{{ p | times: 2 | times: 90 | divided_by: 100 | money }}</span>15  </button>16  <button type="button" class="gpl-qty__tier gpl-qty__tier--best" data-qty="3">17    <span class="gpl-qty__label">Buy 3 <em class="gpl-qty__save">save 20%</em> <span class="gpl-qty__tag">best value</span></span>18    <span class="gpl-qty__price">{{ p | times: 3 | times: 80 | divided_by: 100 | money }}</span>19  </button>20</div>21 22{% stylesheet %}23.gpl-qty { display: grid; gap: 0.5rem; margin: 1rem 0; }24.gpl-qty__head { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }25.gpl-qty__tier {26  display: flex;27  align-items: center;28  justify-content: space-between;29  gap: 0.75rem;30  width: 100%;31  padding: 0.7rem 0.9rem;32  border: 1px solid rgb(var(--color-foreground, 148 163 184) / 0.2);33  border-radius: 0.75rem;34  background: rgb(var(--color-foreground, 148 163 184) / 0.05);35  color: inherit;36  font: inherit;37  cursor: pointer;38  text-align: left;39  transition: border-color 0.15s ease, background 0.15s ease;40}41.gpl-qty__tier.is-active {42  border-color: var(--gpl-accent);43  background: rgb(var(--color-foreground, 148 163 184) / 0.1);44  box-shadow: 0 0 0 1px var(--gpl-accent);45}46.gpl-qty__label { font-weight: 600; font-size: 0.9rem; }47.gpl-qty__save {48  font-style: normal;49  font-size: 0.7rem;50  font-weight: 700;51  color: var(--gpl-accent);52  margin-left: 0.35rem;53}54.gpl-qty__tag {55  font-size: 0.6rem;56  font-weight: 700;57  letter-spacing: 0.06em;58  text-transform: uppercase;59  background: var(--gpl-accent);60  color: #0b1220;61  padding: 0.15rem 0.45rem;62  border-radius: 999px;63  margin-left: 0.4rem;64}65.gpl-qty__price { font-weight: 700; font-size: 0.95rem; }66{% endstylesheet %}67 68{% javascript %}69document.querySelectorAll('[data-gpl-qty]').forEach((wrap) => {70  const tiers = wrap.querySelectorAll('[data-qty]');71  tiers.forEach((btn) => {72    btn.addEventListener('click', () => {73      tiers.forEach((t) => t.classList.remove('is-active'));74      btn.classList.add('is-active');75      const qty = btn.getAttribute('data-qty');76      const input = wrap.closest('form')?.querySelector('input[name="quantity"]')77        || document.querySelector('input[name="quantity"]');78      if (input) input.value = qty;79    });80  });81});82{% endjavascript %}83

Usage

{% render 'quantity-breaks' %}