How can I properly format a sticky add to cart on my product page?

Store Design
1

Hello,

I’m very new to anything coding related and have been searching online to find a way to add a sticky add to cart to the bottom of my product page. I’ve managed to add one to my product page, but I’m having some trouble with formatting issues.

If possible I’d like for it to sit just above the bottom of the page, just like this example site - https://www.magnitone.co.uk/collections/cleansing/products/lift-off-full-launch-starter-kit

As well as the example site, I’d like to add the price of the product next to the ‘ADD TO CART’ text.

There is also a large gap below the ‘ADD TO CART’ text which I can’t seem to fix.

Most importantly, I’d like to remove the black outline on the sticky add to cart box.

Here is my site - https://lavishlab.co.uk/products/lavishlab-facial-toning-device

How it looks -

Screenshot 2022-06-13 at 11.33.07.png
Screenshot 2022-06-13 at 11.33.07.png1653×917 129 KB

I’d be super greatful for any help provided, thank you.

2

@SlickTok

You can add it features by the custom code,

For that you can hire a developer,

thank you

3

From my little experience I believe these are pretty simple changes. Is there no way someone can help me on this board without having added developer costs?

4

Hi,

We need to customize the product.liquid code to add the price and then we can align the section using CSS. Kindly let me know if you need help in fixing this issue

5

I’ve been working on some of the issues I was having and have managed to fix a few! I just need help with adding the price to the ‘ADD TO CART’ button.

Also, would you know how to change the background colour of the non-sticky add to cart button on my product page?

Thanks

6

You can add this to call the price {{ product.price }} near the add to cart button.

You can add this code in theme.css or custom.css

#sticky-atc { background: #000; }
7

Sorry, can you provide a bit more instruction on this. I’m unsure how to do this exactly.

8

@SlickTok You can use Pasilobus Sticky Cart app that works on any theme and the app also comes with a free plan.