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

Solved

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

PRETTYFRIDAYS
Pathfinder
197 0 35

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
10096 2007 2058

This is an accepted solution.

Could you check again?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 20 (20)

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

Hi @PRETTYFRIDAYS 

Could you share your product page URL to check?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35
Dan-From-Ryviu
Shopify Partner
10096 2007 2058

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 and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

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
10096 2007 2058

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 and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

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
10096 2007 2058

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 and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

Yeah ofcourse!

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

I sent request, please approve it

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

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

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

Hi, I got it. Let me check

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

Hi, it's done. Please check now 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

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

PRETTYFRIDAYS
Pathfinder
197 0 35

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
10096 2007 2058

This is an accepted solution.

Could you check again?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PRETTYFRIDAYS
Pathfinder
197 0 35

Yes looks great! THANKS FOR YOUR HELP!

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

You are very welcome

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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.

Nasar1999
Tourist
18 0 1

Thank you so much! Your code was the key to helping me adjust it with ChatGPT. The code now works perfectly for me when scrolling 50%.

 

<!-- HTML -->
<button
id="ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit hidden"
>
<img src="https://www.svgrepo.com/show/61879/add-to-cart.svg" alt="Add to Cart Icon">
</button>

<!-- CSS -->
<style>
#ProductSubmitButton-Sticky {
position: fixed;
bottom: 320px; /* Adjust margin from the bottom */
right: 20px; /* Align to the right */
background: #edffa7; /* Background color with opacity */
z-index: 9999;
padding: 0; /* Remove padding, button size controlled by width/height */
border: 2px solid #000; /* Add border with desired color and thickness */
border-radius: 50%; /* Make the button circular */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhance shadow for better visibility */
width: 40px; /* Set width of the button */
height: 40px; /* Set height of the button */
display: flex; /* Align contents horizontally */
align-items: center; /* Vertically center contents */
justify-content: center; /* Horizontally center contents */
transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions for background and shadow */
cursor: pointer; /* Ensure the cursor shows as a pointer */
}

#ProductSubmitButton-Sticky img {
width: 21px; /* Set icon width */
}

#ProductSubmitButton-Sticky:hover {
background: #d4f6a5; /* Slightly darker background on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Ensure button is hidden initially */
.hidden {
display: none;
}
</style>

<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("ProductSubmitButton-Sticky");

function updateButtonVisibility() {
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
var documentHeight = document.documentElement.scrollHeight;
var windowHeight = window.innerHeight;
var scrollPercentage = (scrollPosition / (documentHeight - windowHeight)) * 100;

if (scrollPercentage > 50) {
button.classList.remove("hidden");
} else {
button.classList.add("hidden");
}
}

let isScrolling;
window.addEventListener('scroll', function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
requestAnimationFrame(updateButtonVisibility);
}, 66); // Roughly 15fps for smoother updates
});

// Check visibility on page load in case already scrolled
updateButtonVisibility();
});
</script>

Nasar1999_0-1722979938405.png