Hey great! But can it also slide in up? Thanks for the help!
Topic summary
A user seeks to implement a sticky “Add to Cart” button on their Shopify product page that only appears after scrolling past the default button.
Initial Problem:
- The sticky button was visible on page load instead of appearing only after scrolling past the original button
- Button behavior was inconsistent with unwanted visibility delays and premature appearance
Solution Process:
- Dan-From-Ryviu provided iterative code updates through the theme.liquid file
- Multiple refinements addressed timing issues and visibility triggers
- Final adjustments ensured the button didn’t interfere with mega menus/drawer menus
Resolution:
- The issue was successfully resolved through collaborative debugging
- Dan-From-Ryviu gained collaborator access to implement the final working code
- Another user (Nasar1999) later shared their own implementation using ChatGPT, triggering the sticky button at 50% scroll with custom styling (circular button, positioned right side, with icon)
Key Technical Elements:
- JavaScript scroll detection and visibility control
- CSS positioning and z-index management
- Integration with Shopify’s product form structure