Hey Alok,
Just one problem with this code. “Buy Now” sticky button is on the entire website including homepage, blog pages and not just on product page. Is there any way it can only be present on product page only.
Topic summary
A user seeks to implement a sticky “Buy Now” button on product pages for their Shopify store using the Dawn theme. The site uses a direct checkout button instead of a standard “Add to Cart” option.
Initial Solution:
- Custom CSS code added to
theme.liquidfile to make the payment button fixed at the bottom of the screen - Alternative version provided that activates the sticky button only after scrolling 500px down the page using jQuery
Implementation Issues & Fixes:
- Initial code didn’t work due to missing jQuery library; resolved by adding jQuery CDN link
- Button appeared site-wide instead of only on product pages; fixed by wrapping code in Shopify’s
{% if template.name == 'product' %}conditional tag
Alternative Recommendations:
- Third-party app suggested (Pasilobus Sticky Cart) as a code-free solution that maintains theme upgrade compatibility
- Note that jQuery may negatively impact site speed scores
Current Status:
- Original poster successfully implemented the custom code solution
- One user reported the code didn’t work for their Dawn store
- Another user has a related question about redirecting to cart after adding items