Mobile sticky buy bar

Copy-paste a Liquid snippet for product page - A mobile-only sticky bar with the live price that taps through to your theme's real add-to-cart button. Adapted from a real storefront build.

Product pageTheme snippet Members sourceOS 2.0 themes

Live previewCustomize in playground

Everyday Crew

Scroll the product page and this bar stays pinned on mobile.

₹499~~₹799~~38% off

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Create snippets/sticky-buy-bar.liquid, paste the complete file - styles and script are already inside it.
3Render it inside your product form area with the usage tag shown in the Usage tab.
4On mobile, the bar clicks your theme's own add-to-cart button, so drawer carts and validation still work.
5Check it does not cover your footer content - some themes need a little bottom padding on the page.

sticky-buy-bar.liquid

1{%- assign v = product.selected_or_first_available_variant -%}2{%- if v -%}3  <div class="gpl-buybar" data-gpl-buybar>4    <div class="gpl-buybar__price">5      <strong>{{ v.price | money }}</strong>6      {%- if v.compare_at_price > v.price -%}7        <s>{{ v.compare_at_price | money }}</s>8        {%- assign save_pct = v.compare_at_price | minus: v.price | times: 100 | divided_by: v.compare_at_price -%}9        <span class="gpl-buybar__off">{{ save_pct }}% off</span>10      {%- endif -%}11    </div>12    <button type="button" class="gpl-buybar__cta" data-gpl-buy>13      <span class="gpl-buybar__shine" aria-hidden="true"></span>14      Add to cart

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.

2Create snippets/sticky-buy-bar.liquid, paste the complete file - styles and script are already inside it.

3Render it inside your product form area with the usage tag shown in the Usage tab.

4On mobile, the bar clicks your theme's own add-to-cart button, so drawer carts and validation still work.

5Check it does not cover your footer content - some themes need a little bottom padding on the page.

sticky-buy-bar.liquid

1{%- assign v = product.selected_or_first_available_variant -%}2{%- if v -%}3  <div class="gpl-buybar" data-gpl-buybar>4    <div class="gpl-buybar__price">5      <strong>{{ v.price | money }}</strong>6      {%- if v.compare_at_price > v.price -%}7        <s>{{ v.compare_at_price | money }}</s>8        {%- assign save_pct = v.compare_at_price | minus: v.price | times: 100 | divided_by: v.compare_at_price -%}9        <span class="gpl-buybar__off">{{ save_pct }}% off</span>10      {%- endif -%}11    </div>12    <button type="button" class="gpl-buybar__cta" data-gpl-buy>13      <span class="gpl-buybar__shine" aria-hidden="true"></span>14      Add to cart

Full source is for members

One payment - every snippet, guide and bundle

Get all-access