Re: How to add a sticky add to cart button for mobile/ desktop view - Prestige theme

How to add a sticky add to cart button for mobile/ desktop view - Prestige theme

Trivin
Tourist
27 0 2

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

 

www.gemopticians.com

 

Any help is appreciated!

 

Thanks,

Trivin

Replies 3 (3)

KabirDev
Shopify Partner
248 61 75

@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.

 

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
Trivin
Tourist
27 0 2

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!

 

 

 

erik_lindberg_s
Shopify Partner
20 3 7