Solved

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

PRETTYFRIDAYS
Pathfinder
197 0 34

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>
Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7697 1496 1500

This is an accepted solution.

Could you check again?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 19 (19)

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

Hi @PRETTYFRIDAYS 

Could you share your product page URL to check?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34
Dan-From-Ryviu
Shopify Partner
7697 1496 1500

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

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductSubmitButton-template--15921813061769__main");
    window.addEventListener("scroll", function() {
        if (window.scrollY > originalAddToCart.getBoundingClientRect().bottom) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

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!

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

You can try to update code like this and check again

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductSubmitButton-template--15921813061769__main");
    window.addEventListener("scroll", function() {
        var rect = originalAddToCart.getBoundingClientRect();
        if (rect.bottom <= 0) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

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

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

Code update and check

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductInfo-template--15921813029001__main");
    window.addEventListener("scroll", function() {
        if (window.scrollY > originalAddToCart.getBoundingClientRect().bottom) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

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

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

Yeah ofcourse!

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

I sent request, please approve it

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

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

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

Hi, I got it. Let me check

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

Hi, it's done. Please check now 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

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

PRETTYFRIDAYS
Pathfinder
197 0 34

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

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

This is an accepted solution.

Could you check again?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PRETTYFRIDAYS
Pathfinder
197 0 34

Yes looks great! THANKS FOR YOUR HELP!

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

You are very welcome

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Meet_M
Visitor
1 0 0

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.