Improve Your Shopify Store with a "Sticky Add to Cart" Feature

In this ever-changing fast-paced world of e-commerce where the increase of competitors gives buyers an advantage of choice over different brands, it becomes seamlessly important to grab and retain their attention towards what we offer. This is where the importance of an eye-catching UI plays a vital role. A “Sticky Add to Cart” feature becomes one such tool of your arsenal that might help you not only to enhance UI but also to boost up the conversion rate.      

With this comprehensive guide, we'll explore what a sticky add-to-cart feature is, why is it vital for your Shopify store, and provide a step-by-step guide so that you can implement it manually on your store.

Understanding the "Sticky Add to Cart" Feature

From a buyer’s perspective, whenever I visit any site to purchase some products. Rather than scrolling here and there I want my experience to be efficient and convenient, a sticky add to cart ensures that the “Add to Cart” button is visible and accessible as the buyer scrolls through the product page hence eliminating the wearisome need of scrolling back to add the item to the shopping cart. This improves the experience and overall chances of conversion from a user.

Importance of a Sticky Add-to-Cart Feature

Enhanced User Experience: Keeping the add-to-cart button readily available makes it simple for the buyers to add that product to their cart, leading to higher customer satisfaction.

Increased Conversions: Buyers are more likely to add items to their carts impulsively as long as the option of “Adding Item to Cart” is available right on their screens, this results in higher conversion rates which ultimately improves sales.

Mobile Optimization: When it comes to smaller screens, sticky add to cart ensures it sticks right bottom of their phone screen and is accessible at any point in time.

Below are before and after screenshots showcasing the improved accessibility and user-friendliness:

Steps to Implement a Sticky Add-to-Cart Feature Manually

Step 1: Navigate to Shopify Theme Files

Log in to your Shopify admin dashboard and navigate to "Online Store" > "Themes."

Click on the "Actions" menu next to your active theme and select "Edit code."

Step 2: Modify the “main-product.liquid” Section

a) Copy and paste the code given below, into your schema

{
  "type": "checkbox",
  "id": "enable_sticky_bar",
  "default": true,
  "label": "Enable Sticky Bar"
 },

b) Copy and paste the following code inside main-product.liquid, below modal-dialog

<!-- code for sticky bar -->
<div class="sticky-bar-form" style="{% if section.settings.enable_sticky_bar %}display:block;{% else %}display:none;{% endif %}">
  {% form 'product', product, id: 'addToCartForm', class: product_form_class %}
  <div class="sticky-bar" style="display:none;">
    <div class="product-title-sticky">
      <div class="sticky-bar-thumb-img">
        <img class="sticky-bar-thumb-thumb" src="{{ product.featured_media | image_url }}" width="60" height="60">
      </div>
      <div class="sticky-bar-title">
        <span class="sticky-title">{{ product.title }}</span>
      </div>
    </div>
    <div class="product-form__item">
      <label for="Quantity-{{ section.id }}" class="quantity-label">	Quantity</label>
      <div class="custom-dropdown">
        <select id="Quantity-{{ section.id }}" name="quantity" class="quantity__input" data-quantity-input>
          {% assign maxQuantity = 10 %}
          {% for quantity in (1..maxQuantity) %}
            <option value="{{ quantity }}">{{ quantity }}</option>
          {% endfor %}
        </select>
      </div>
      {% if product.has_only_default_variant %}
        <span class="sticky-bar-price">
          {%- render 'price', product: product, use_variant: true -%}
        </span>
      {% endif %}
 
      <select class="for_width" name="id" style="border: 1px solid #ccc; height: 3rem;{% if product.has_only_default_variant %}display:none;{% endif %}">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
          {% else %}
            <option disabled="disabled">{{ variant.title }} (Sold Out)</option>
          {% endif %}
        {% endfor %}
      </select>
      <input type="submit" value="Add To Cart" class="variant-button" />
    </div>
  </div>
  {% endform %}
</div>
<!-- code for sticky bar -->

c) Make a script tag and add the following script

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer"></script>
<script>
$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).width() > 1024) {
      if ($(window).scrollTop() >= 180) {
        $('.sticky-bar').css('display', 'flex');
      } else {
        $('.sticky-bar').css('display', 'none');
      }
    }
  });
});
</script>

Step 3: Apply Sticky Positioning CSS

Open the CSS file associated with your theme (e.g., "theme.css or base.css") in the code editor.

Add the following CSS code:

.sticky-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  align-items: center;
  background: #fff;
  height: auto;
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  z-index: 3;
  box-shadow: #000000 0 6px 12px -2px, #0000004d 0 3px 7px -3px;
}
 
.sticky-bar {
display:none;
}
 
.product-details-sticky,.product-title-sticky{
  display: flex;
  align-items: center;
}
 
.sticky-bar-price .variant-drop-down, .variant-drop-down .product-form__item{
  display: flex;
  align-items:center;
  justify-content: end;
}
.variant-drop-down input[type=number] {
    width: 50px;
    border: black 1px solid;
    margin: 5px; }
 
.variant-button {
  background-color: black;
  color: white;
  width: 150px;
  height: 3rem;
  margin-left: 5px;
}
 
.sticky-bar-thumb-thumb {
margin:10px;
vertical-align:middle;  
}
 
.sticky-bar-price .price--on-sale .price-item--regular {
display:none;
}
 
 .sticky-bar-price .price:not(.price--show-badge) .price-item--last:last-of-type{
      margin-top: 6px;
    font-size: 15px; }
.custom-dropdown {
  position: relative;
  display: inline-block;
}
 
.custom-dropdown select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 24px 8px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}
 
.custom-dropdown::before {
  content: '\25BC';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}

Step 4: Enable the Sticky Bar from Theme Customisation

Select the “Enable Sticky Bar” option, and that’s it!!!

Conclusion

As I said, adding a sticky add-to-cart feature becomes one such tool of your arsenal that might help you not only to enhance UI but also to boost the conversion rate. By following the step-by-step tutorial provided in this guide, you can integrate this feature into your Shopify store and make the most of its benefits.