How can I make my 'Add to Cart' button sticky on a mobile screen?

Store Design
,

AI-generated summary

Goal: make the Add to Cart button sticky at the bottom on mobile (keep desktop as-is), optionally include the price on the button, and move the product title above the image on mobile.

Key proposals:

  • Two approaches for sticky button: use a Shopify app (quick, may impact performance) or custom code (no monthly fee, better for speed). Including the price on the button is feasible with custom code.
  • For moving the title: edit the product template (product.liquid or main-product.liquid). Insert {{ product.title }} above the div with class “grid__item product__media-wrapper”. Then hide this new title on desktop and show it on mobile, and hide the existing title below the image.

Latest updates:

  • The requester prefers custom code and asked where to paste it. They tried theme customizer but the title still appears under the image on mobile.
  • The helper provided where to insert the new title but the visibility code snippet (to hide/show on desktop vs mobile) was not included in the message.

Status:

  • Sticky Add to Cart: acknowledged as doable; no code shared yet.
  • Title reposition: partial instructions given; missing CSS/JS details. Discussion remains open.

Notes: Attached images show the desired sticky button style and the current mobile title placement.

1

Hi,

Can anyone help me fix my ‘Add to cart’ button, to stay at the lowest part of the screen on mobile, but to be where it is on desktop - If it is possible of course. And is it ‘easy’ to include the price on the button. If the price next to it, is too complicated, I just wish to have the button ‘sticky’ at the bottom of the product page.

And one quick thing, how do I put the Title above the image.

I’m really not good with coding, css, or anything like that - I tried to watch a bunch of videos on youtube, but I just couldn’t understand all the steps :slightly_smiling_face:

my URL is: https://kalinuevo.com/en

And I attached an image of the style I was hoping for.

kalinuevo-shop-button.jpg
kalinuevo-shop-button.jpg1440×2890 144 KB

Thank you in advance :slightly_smiling_face:

2

Hello @kalinuevo , Yes we can add sticky add to cart button on bottom of screen for Mobile and keep the button where it is for desktop.

There are two ways to achieve this. One way is using the app and one way is custom coding.

If you like to use an app, simply open Shopify store and search for app on top search bar to add an app. Then search for sticky add to cart and there will be bunch of apps showed up. You can simply choose whatever you like.

For the custom code, if you don’t want to pay monthly subscription fees and want to keep your store optimize for speed, it’s recommend. As Shopify apps may contained external sources that could increase your store load time.

This could include coding part. So, if you’re a developer please let me know then I could share the code and guidelines to add this, if not hiring a developer is recommended.

With custom coding, Yes we can also add the price in front of add to cart button.

For the title adjustment, you can do this by simply going to Online Store > Themes > Customizer. Then select product template and simply drag the title where you want to show from left side of customizer.

Regards,

Osama Farooqi

3

Thank you so much for your answer.

I was hoping for some coding, because alot of apps would slow down my store, like you said.

Im not a developer, but I would love if you would send me some coding and where to paste it.

And for the title part, I did exactly what you said, but the title is still under the image, on mobile.

Capture.JPG
Capture.JPG324×514 17.9 KB

4

Hello @kalinuevo , for the product title your will need to update your product template. Please find something like div with class “grid__item product__media-wrapper” and above this Simply past the following code.

# {{product.title}}

and to hide this title on desktop and show on mobile please add this following code on top of product.liquid template or main-product.liquid (name could vary from theme to theme). The following script will also hide the current product title which is shown below the product image.

Please try the above solution and do let me know if you need further assistance with that.

Regards,

Osama Farooqi