Add a floating Add To Cart button/widget on mobile view

Store Design
1

Hi

Not sure if the title of this query correctly explains what I’d like to do, I may have used the wrong terminology.

I have see a website where on mobile view only, once the user has scrolled passed the Add To Cart button on the product page, a floating button or widget appears at the bottom of the screen, with a ± quantity selector and Add to Cart button.

I would like to add something similar, but at the top of the screen not the bottom, so that it isn’t obscured by a chat widget.

Is anyone able to explain how I might achieve this please - my theme is Impulse if that is relevant.

I’ve attached a screenshot that shows the Add to Cart button, and another that shows the “floating widget” that has appeared after scrolling.

Screenshot_20230828-133239 1.png
Screenshot_20230828-133239 1.png864×1920 140 KB

Screenshot_20230828-133248.png
Screenshot_20230828-133248.png864×1920 145 KB

2

Hi @BonzaDogTreats

Could you share your store URL to check?

3

Hi @BonzaDogTreats

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the styles.css file:
.smile-launcher-frame-container {bottom: 85px !important;left: 10px !important;}

Regards,

San

4

Sure, the website is www.bonzadogtreats.com.au

5

Thanks, but Impulse 2.0 theme doesn’t have a styles.css file

6

Refer this video which is useful and functional. https://www.youtube.com/watch?v=loRbZ2hOzhY. for your requirement, you like to change the code slightly to display the form at top. All the best…