Product Page — Sticky Buy Bar

About this module

A Shopify sticky buy bar that stays fixed at the bottom of the viewport while browsing a product, with the product name, price and an add-to-cart button.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-sticky-buy, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-sticky-buy` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-sb" data-sticky-buy>
     <div class="mh-sb-inner">
       <div class="mh-sb-info">
         {% if product.featured_image %}<img src="{{ product.featured_image | image_url: width: 80 }}" alt="" width="40" height="40" />{% endif %}
         <span class="mh-sb-name">{{ product.title }}</span>
         {% if section.settings.show_price %}<span class="mh-sb-price">{{ product.price | money }}</span>{% endif %}
       </div>
       <form action="/cart/add" method="post" class="mh-sb-form">
         <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
         <input type="hidden" name="quantity" value="1" />
         <button type="submit" class="mh-sb-add">{{ section.settings.add_to_cart_label }}</button>
       </form>
     </div>
   </div>
   
   {% schema %}
   {
     "name": "MH Sticky Buy Bar",
     "tag": "div",
     "settings": [
       { "type": "text", "id": "add_to_cart_label", "label": "Add to cart label", "default": "Add to cart" },
       { "type": "checkbox", "id": "show_price", "label": "Show price", "default": true }
     ],
     "presets": [{ "name": "MH Sticky Buy Bar", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.