Are you looking to boost your Shopify store’s conversion rates? A sticky ‘Add to Cart’ button might be just the ticket. This nifty feature keeps the all-important purchase button visible as customers scroll through your product pages, making it easier than ever for them to buy.
Adding the sticky button with our guide
Follow this guide to get the job done.
- Head to your Shopify admin panel, click on ‘Online Store’, then ‘Themes’, and finally ‘Edit code’.
- Look for a file called ‘main-product.liquid’ in the ‘Sections’ folder. Some themes might use ‘product-template.liquid’ or simply ‘product.liquid’.
- Find the ‘Add to Cart’ button in the file (it should be in a form with the class ‘product-form’) and wrap it in a new div. It’ll look something like this:
<div class="sticky-add-to-cart">
<!-- Your existing 'Add to Cart' button code -->
</div>
- Create a new CSS file called ‘sticky-add-to-cart.css’ in your ‘Assets’ folder. This is where we’ll make your button stick:
.sticky-add-to-cart {
position: sticky;
bottom: 0;
background-color: #ffffff;
padding: 15px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
}
@media screen and (max-width: 749px) {
.sticky-add-to-cart {
position: fixed;
left: 0;
right: 0;
}
}
- Back in ‘main-product.liquid’, add this line at the top to include your new CSS
{{ 'sticky-add-to-cart.css' | asset_url | stylesheet_tag }}
- For a smoother user experience, let’s hide the sticky button when the original is in view. Add this script to your ‘theme.liquid’ file just before the closing tag.
<script>
document.addEventListener('DOMContentLoaded', function() {
var stickyBar = document.querySelector('.sticky-add-to-cart');
var originalButton = document.querySelector('.product-form__submit');
window.addEventListener('scroll', function() {
var rect = originalButton.getBoundingClientRect();
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
stickyBar.style.display = 'none';
} else {
stickyBar.style.display = 'block';
}
});
});
</script>
- Don’t forget to save all your changes and preview your theme to make sure everything’s working as it should.
Note for Shopify owners: When modifying the code of your site, it’s recommended to consult with your developer or an expert to avoid damaging the site. We advise against making changes on your own if you don’t have a strong understanding of coding techniques.
Altenative method
If all this code talk has your head spinning, there are Shopify apps that can do the heavy lifting for you. Some good ones are:
These apps offer easy setup and lots of customisation options. However, they might slow your store down, so the DIY method is usually best for performance.
Final thought
Adding a sticky ‘Add to Cart’ button to your Shopify store can be a game-changer for your conversion rates. Whether you choose to code it yourself or use an app, this feature can make shopping on your store a breeze for your customers. Remember to always back up your theme before making changes, and don’t hesitate to reach out to Shopify support or a Shopify Expert if you need a helping hand.