Where you can achieve what your competitors can’t

Volume Discount Widget in Shopify

Widget on all products :

{%- assign pbw_heading  = 'Buy 5, get 10% off' -%}
{%- assign pbw_subtext  = 'Discount applied automatically at checkout' -%}
{%- assign pbw_icon     = 'tag' -%}{%- comment -%} tag | percent | gift | spark | none {%- endcomment -%}
{%- assign pbw_variant  = 'filled' -%}{%- comment -%} filled | outlined | minimal {%- endcomment -%}
{%- assign pbw_align    = 'left' -%}{%- comment -%} left | center {%- endcomment -%}
{%- assign pbw_accent   = '#1a1a1a' -%}
{%- assign pbw_mobile   = true -%}

<aside
  class="pbw pbw--{{ pbw_variant }} pbw--align-{{ pbw_align }}{% unless pbw_mobile %} pbw--desktop-only{% endunless %}"
  role="note"
  aria-label="Promotional offer"
>
  {%- if pbw_icon != 'none' -%}
    <span class="pbw__icon" aria-hidden="true">
      {%- case pbw_icon -%}
        {%- when 'tag' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
            <line x1="7" y1="7" x2="7.01" y2="7"/>
          </svg>
        {%- when 'percent' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="5" x2="5" y2="19"/>
            <circle cx="6.5" cy="6.5" r="2.5"/>
            <circle cx="17.5" cy="17.5" r="2.5"/>
          </svg>
        {%- when 'gift' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 12 20 22 4 22 4 12"/>
            <rect x="2" y="7" width="20" height="5"/>
            <line x1="12" y1="22" x2="12" y2="7"/>
            <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/>
            <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
          </svg>
        {%- when 'spark' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
          </svg>
      {%- endcase -%}
    </span>
  {%- endif -%}

  <div class="pbw__content">
    <p class="pbw__heading">{{ pbw_heading }}</p>
    {%- if pbw_subtext != blank -%}
      <p class="pbw__subtext">{{ pbw_subtext }}</p>
    {%- endif -%}
  </div>
</aside>

<style>
  .pbw {
    --pbw-accent: {{ pbw_accent }};
    --pbw-bg: color-mix(in srgb, var(--pbw-accent) 6%, transparent);
    --pbw-border: color-mix(in srgb, var(--pbw-accent) 22%, transparent);
    --pbw-radius: 8px;
    --pbw-pad-block: 14px;
    --pbw-pad-inline: 16px;
    --pbw-gap: 12px;

    display: flex;
    align-items: center;
    gap: var(--pbw-gap);
    padding-block: var(--pbw-pad-block);
    padding-inline: var(--pbw-pad-inline);
    margin-block: 16px 0;
    border-radius: var(--pbw-radius);
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.4;
    color: inherit;
    box-sizing: border-box;
  }

  .pbw.pbw--filled {
    background: var(--pbw-bg);
  }

  .pbw.pbw--outlined {
    background: transparent;
    border-color: var(--pbw-border);
  }

  .pbw.pbw--minimal {
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--pbw-border);
    border-radius: 0;
    padding-inline: 0;
  }

  .pbw.pbw--align-center {
    justify-content: center;
    text-align: center;
  }

  .pbw .pbw__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pbw-accent);
  }

  .pbw .pbw__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pbw .pbw__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pbw .pbw__heading {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: inherit;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pbw .pbw__subtext {
    margin: 2px 0 0;
    font-size: 0.875em;
    font-weight: 400;
    opacity: 0.7;
    color: inherit;
  }

  @media (max-width: 480px) {
    .pbw {
      --pbw-pad-block: 12px;
      --pbw-pad-inline: 14px;
      --pbw-gap: 10px;
    }

    .pbw.pbw--desktop-only {
      display: none;
    }
  }
</style>

Widget on specific products only :



{%- if product.tags contains 'discounted' -%}

{%- assign pbw_heading  = 'Buy 5, get 10% off' -%}
{%- assign pbw_subtext  = 'Discount applied automatically at checkout' -%}
{%- assign pbw_icon     = 'tag' -%}{%- comment -%} tag | percent | gift | spark | none {%- endcomment -%}
{%- assign pbw_variant  = 'filled' -%}{%- comment -%} filled | outlined | minimal {%- endcomment -%}
{%- assign pbw_align    = 'left' -%}{%- comment -%} left | center {%- endcomment -%}
{%- assign pbw_accent   = '#1a1a1a' -%}
{%- assign pbw_mobile   = true -%}

<aside
  class="pbw pbw--{{ pbw_variant }} pbw--align-{{ pbw_align }}{% unless pbw_mobile %} pbw--desktop-only{% endunless %}"
  role="note"
  aria-label="Promotional offer"
>
  {%- if pbw_icon != 'none' -%}
    <span class="pbw__icon" aria-hidden="true">
      {%- case pbw_icon -%}
        {%- when 'tag' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
            <line x1="7" y1="7" x2="7.01" y2="7"/>
          </svg>
        {%- when 'percent' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="5" x2="5" y2="19"/>
            <circle cx="6.5" cy="6.5" r="2.5"/>
            <circle cx="17.5" cy="17.5" r="2.5"/>
          </svg>
        {%- when 'gift' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 12 20 22 4 22 4 12"/>
            <rect x="2" y="7" width="20" height="5"/>
            <line x1="12" y1="22" x2="12" y2="7"/>
            <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/>
            <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
          </svg>
        {%- when 'spark' -%}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
          </svg>
      {%- endcase -%}
    </span>
  {%- endif -%}

  <div class="pbw__content">
    <p class="pbw__heading">{{ pbw_heading }}</p>
    {%- if pbw_subtext != blank -%}
      <p class="pbw__subtext">{{ pbw_subtext }}</p>
    {%- endif -%}
  </div>
</aside>

<style>
  .pbw {
    --pbw-accent: {{ pbw_accent }};
    --pbw-bg: color-mix(in srgb, var(--pbw-accent) 6%, transparent);
    --pbw-border: color-mix(in srgb, var(--pbw-accent) 22%, transparent);
    --pbw-radius: 8px;
    --pbw-pad-block: 14px;
    --pbw-pad-inline: 16px;
    --pbw-gap: 12px;

    display: flex;
    align-items: center;
    gap: var(--pbw-gap);
    padding-block: var(--pbw-pad-block);
    padding-inline: var(--pbw-pad-inline);
    margin-block: 16px 0;
    border-radius: var(--pbw-radius);
    border: 1px solid transparent;
    font-family: inherit;
    line-height: 1.4;
    color: inherit;
    box-sizing: border-box;
  }

  .pbw.pbw--filled {
    background: var(--pbw-bg);
  }

  .pbw.pbw--outlined {
    background: transparent;
    border-color: var(--pbw-border);
  }

  .pbw.pbw--minimal {
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--pbw-border);
    border-radius: 0;
    padding-inline: 0;
  }

  .pbw.pbw--align-center {
    justify-content: center;
    text-align: center;
  }

  .pbw .pbw__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pbw-accent);
  }

  .pbw .pbw__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pbw .pbw__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pbw .pbw__heading {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: inherit;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pbw .pbw__subtext {
    margin: 2px 0 0;
    font-size: 0.875em;
    font-weight: 400;
    opacity: 0.7;
    color: inherit;
  }

  @media (max-width: 480px) {
    .pbw {
      --pbw-pad-block: 12px;
      --pbw-pad-inline: 14px;
      --pbw-gap: 10px;
    }

    .pbw.pbw--desktop-only {
      display: none;
    }
  }
</style>

{%- endif -%}