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

Store Design
, , , ,
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.