Show sticky add to cart button after scrolling past add to cart button

Store Design
, , , ,

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
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hey, I’ve just installed a sticky add to cart button with the code down below, but I only want it to show when the customer scrolls past the default one. Does anyone know how to do this? Thanks!

<button
id = "ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit button button--full-width button--primary"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
  disabled
{% endif %}
style="position: fixed;bottom: 0;left: 0;margin-bottom: 0;z-index: 999;"
>
	<span>
	  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
		{{ 'products.product.sold_out' | t }}
	  {%- else -%}
		{{ 'products.product.add_to_cart' | t }}
	  {%- endif -%}
	</span>
	<div class="loading-overlay__spinner hidden">
	  <svg
		aria-hidden="true"
		focusable="false"
		class="spinner"
		viewBox="0 0 66 66"
		xmlns="http://www.w3.org/2000/svg"
	  >
		<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
	  </svg>
	</div>
</button>
2

Hi @PRETTYFRIDAYS

Could you share your product page URL to check?

3

yeah sure; https://e8aaa0-3.myshopify.com/products/volumizing-shampoo

password is mohwhi

4

Please go to Online store > Themes > Edit cod > open theme.liquid file, add this code before tag and check if it work
5

Hey, does not exactly work as planned, on page load it is visible, but then when you scroll down it gets invisible for like 3 seconds, and then it appears very fast even before the add to cart button is out of sight. If you have another code can you implement that it slides up? Thanks!

6

You can try to update code like this and check again
7

Hey, now it does show after the customer scrolls past, but it still appears on page load, any way to fix that?

8

Code update and check
9

Could I send a collaborator request to access your store so I can add code and check directly?

10

Yeah ofcourse!

11

I sent request, please approve it

12

Hey, sorry for the late reply, I added you as collaborator

13

Hi, I got it. Let me check

14

Hi, it’s done. Please check now

15

Hey great! But can it also slide in up? Thanks for the help!

16

Oh yeah and one more question, when I open another mega menu/drawer menu, it still shows, can that be on the background? This is the problem:

Image 26-12-2023 at 11.53.jpeg
Image 26-12-2023 at 11.53.jpeg3420×2214 163 KB

17

Could you check again?

18

Yes looks great! THANKS FOR YOUR HELP!

1 Like
19

You are very welcome

20

Hey I’ve been following the whole thread. I’m glad you got it working. I’m trying to do the same can you please share the updated code with me here.