Shopify themes, liquid, logos, and UX
Hello!
I would like to add a sticky add to cart buttons at the bottom of the page such that when visitors scroll past the add to cart button, it still shows at the bottom and give them the option to add to cart. I am using the prestige theme and my website is
Any help is appreciated!
Thanks,
Trivin
@Trivin to add a sticky Add to Cart button in the Prestige theme on Shopify, edit your theme's CSS and JavaScript files. In the CSS file, add styles to make the Add to Cart button fixed at the bottom of the viewport. Then, adjust the JavaScript to display this button when users scroll past the original Add to Cart button on the product page. Ensure to test the changes on various devices for compatibility. Here's an example of JavaScript code:
$(window).scroll(function() {
var originalButton = $('#original-add-to-cart-button');
var stickyButton = $('#sticky-add-to-cart-button');
if ($(window).scrollTop() > originalButton.offset().top) {
stickyButton.show();
} else {
stickyButton.hide();
}
});
In this code, replace #original-add-to-cart-button with the ID of your original 'Add to Cart' button and #sticky-add-to-cart-button with the ID of your sticky button.
Hi Kabir,
Thank you so much for your response.
I do not know how to code myself but will be able to follow instructions if you can help me with the steps please.
Thanks in advance!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025