In this blog, you’ll learn how to add a sticky “Add to Cart” bar to your Shopify product pages. This smart UI feature keeps the product title, image, variant selector, quantity input, and add-to-cart button always visible, even when the user scrolls down. It’s a powerful way to improve user experience and boost conversions on your Shopify store.
What is a Sticky Add to Cart Bar?
A sticky add to cart bar is a floating panel that appears at the bottom of the screen as the user scrolls past the initial product section. It ensures that key purchase options stay visible and accessible without needing to scroll back up.
Why Use a Sticky Add to Cart Bar?
- Improves Conversion Rates
Customers often scroll through product details, reviews, or images — and forget where the add to cart button is. This sticky bar keeps it always accessible, reducing friction in the buying journey. - Perfect for Mobile & Long Pages
On mobile or content-heavy product pages, having the purchase options always visible makes the user experience much smoother and increases the chances of a purchase.
Step 1: Duplicate Your Live Theme (Safety First)
If you’re working with your live theme, duplicate it before editing:
- Go to Online Store > Themes
- Click the three dots (⋮) beside your theme > Select Duplicate
- Work on the duplicated theme to avoid affecting your live store
Step 2: Create a Snippet File
- Go to Online Store > Edit Code
- In the Snippets folder, click “Add a new snippet”
- Name it something like:
ecom-bar - Paste the full HTML, CSS, and JavaScript code for the sticky bar into this file and Save it
<div id=”sticky-product-bar” class=”sticky-product-bar”>
<div class=”sticky-content”>
<img src=”{{ product.featured_image | image_url: width: 64 }}” alt=”{{ product.title }}” class=”sticky-thumb” />
<div class=”sticky-details”>
<div class=”sticky-title”>{{ product.title }}</div>
{% if product.variants.size > 1 %}
<select name=”id” class=”sticky-variant-selector”>
{% for variant in product.variants %}
<option value=”{{ variant.id }}”>{{ variant.title }}</option>
{% endfor %}
</select>
{% else %}
<input type=”hidden” name=”id” value=”{{ product.variants.first.id }}” class=”sticky-variant-selector”>
{% endif %}
</div>
<div class=”sticky-qty”>
<button type=”button” class=”qty-btn minus”>–</button>
<input type=”number” name=”quantity” value=”1″ min=”1″ class=”qty-input” />
<button type=”button” class=”qty-btn plus”>+</button>
</div>
<button type=”submit” form=”sticky-add-to-cart-form” class=”sticky-add-btn”>Add to Cart</button>
<form id=”sticky-add-to-cart-form” method=”post” action=”/cart/add” style=”display:none;”>
<input type=”hidden” name=”id” class=”form-variant-id” value=”{{ product.variants.first.id }}”>
<input type=”hidden” name=”quantity” class=”form-quantity” value=”1″>
</form>
</div>
</div>
<style>
.sticky-product-bar {
position: fixed;
bottom: -100px; /* Start hidden */
left: 0;
width: 100%;
background: #ffffff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
border-top: 1px solid #eee;
z-index: 9999;
transition: bottom 0.3s ease-in-out;
padding: 12px 20px;
font-family: Arial, sans-serif;
}
.sticky-product-bar.show {
bottom: 0;
}
.sticky-content {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: auto;
}
.sticky-thumb {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #ddd;
}
.sticky-details {
flex: 1;
min-width: 200px;
}
.sticky-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: #222;
}
.sticky-variant-selector {
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
width: 100%;
max-width: 180px;
}
.sticky-qty {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
height: 40px;
}
.qty-btn {
background: #f4f4f4;
border: none;
padding: 0 12px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s ease;
border-radius: 0;
}
.qty-btn:hover {
background: #ddd;
}
.qty-input {
width: 50px;
border: none;
text-align: center;
font-size: 16px;
outline: none;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sticky-add-btn {
background-color: #000;
color: #fff;
padding: 10px 20px;
font-size: 15px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s ease;
}
.sticky-add-btn:hover {
background-color: #222;
}
</style>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const bar = document.getElementById(‘sticky-product-bar’);
const variantSelector = document.querySelector(‘.sticky-variant-selector’);
const qtyInput = document.querySelector(‘.qty-input’);
const minusBtn = document.querySelector(‘.qty-btn.minus’);
const plusBtn = document.querySelector(‘.qty-btn.plus’);
const formIdInput = document.querySelector(‘.form-variant-id’);
const formQtyInput = document.querySelector(‘.form-quantity’);
const form = document.getElementById(‘sticky-add-to-cart-form’);
// Toggle visibility with animation
window.addEventListener(‘scroll’, function () {
if (window.scrollY > 800) {
bar.classList.add(‘show’);
} else {
bar.classList.remove(‘show’);
}
});
// Variant sync
if (variantSelector) {
variantSelector.addEventListener(‘change’, function () {
formIdInput.value = this.value;
});
}
// Quantity button controls
minusBtn.addEventListener(‘click’, () => {
qtyInput.value = Math.max(1, parseInt(qtyInput.value) – 1);
formQtyInput.value = qtyInput.value;
});
plusBtn.addEventListener(‘click’, () => {
qtyInput.value = parseInt(qtyInput.value) + 1;
formQtyInput.value = qtyInput.value;
});
qtyInput.addEventListener(‘change’, () => {
const val = parseInt(qtyInput.value);
qtyInput.value = (isNaN(val) || val < 1) ? 1 : val;
formQtyInput.value = qtyInput.value;
});
// Add to Cart button click triggers form
document.querySelector(‘.sticky-add-btn’).addEventListener(‘click’, function () {
form.submit();
});
});
</script>
Step 3: Render the Snippet in Main Product Template
Now, include your snippet in the product page:
- Search for and open:
main-product.liquidormain-product.liquidunder Sections - At the bottom of the file, add this line:
{% render ‘ecom-bar’ %}
Save your changes.
Step 4: Test Your Feature
- Open your store preview
- Go to any product page
- Scroll down the page
- ✅ You should now see the sticky add to cart bar slide up at the bottom!
Have questions or facing issues with the Horizon theme? Drop a comment or reach out — we’re here to help!
