Shopify themes, liquid, logos, and UX
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>
Solved! Go to the solution
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.
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.
yeah sure; https://e8aaa0-3.myshopify.com/products/volumizing-shampoo
password is mohwhi
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.
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!
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.
Hey, now it does show after the customer scrolls past, but it still appears on page load, any way to fix that?
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.
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.
Yeah ofcourse!
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.
Hey, sorry for the late reply, I added you as collaborator
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.
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.
Hey great! But can it also slide in up? Thanks for the help!
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:
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.
Yes looks great! THANKS FOR YOUR HELP!
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.
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.
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>
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024