Sticky add to cart with expansive menu (copy/paste code for any Shopify theme)

A sticky add to cart bar stays on screen while people scroll the product page. Dawn and most themes hide the button once you pass the form. This snippet puts it back without an app. It loads after the page, so it should not wreck LCP. Works on any theme I have tried (Dawn, paid, custom).

Copy the gist below into a new section named ezfy-sticky-atc, then add that section on the Default product template.

Step 1: adding the code to your theme

1. From your Shopify admin, go to Online Store > Themes >...> Edit Code.
   
   
2. Open the sections folder to the left and click the Add a new section option at the top. On the popup window that opens, make sure the liquid option is selected, name the file exactly ezfy-sticky-atc, then click on Done.
   
3. Copy all the code from the gist in this tutorial, paste it in this new file, and click Save in the top right corner.
   
   That is it for the code - now let's customize the sticky add to cart.
   
   
   

Step 2: customizing the sticky add to cart code snippet

1. On the top left, click on ... > Customize
   
   
   
2. Open your product page by clicking Home page > Products > Default product at the top of the page.
   
   
   
3. On the sidebar to the left, click on the Add section button. Search for "ezfy sticky" and it should show up. Click on it.
   
   
4. That is it! If the button is not immediately visible, just click on the "save" button, scroll down past the original "add to cart" button and it should pop up.
   
   

Implementing a sticky add-to-cart bar on your Shopify store has never been easier! We hope this DIY tutorial was helpful to you. By following the steps outlined in this guide and using the provided code snippet, you can improve your store’s UX without relying on third-party apps or complex solutions.

If you found this tutorial useful, be sure to explore our other DIY guides tailored specifically for Shopify. While HTML, CSS, JavaScript, and Liquid are universal coding languages, we go the extra mile to ensure our solutions are as Shopify-friendly as possible, ensuring anyone can implement them - from merchants who have no coding interest or experience, to seasoned developers. 

By leveraging Shopify’s APIs and best practices where appropriate, we help you make your customizations faster, more efficient, and fully optimized for your store. Whether you’re looking to improve performance, enhance design, or add new features, our resources are here to help you get the most out of your Shopify experience. Happy customizing! 

If the product page still shows color as pills or a dropdown, this is the no-app swatch setup I use: add color swatches to the Shopify product page without apps.