Impact theme Add to Cart Button

Store Design
, ,

Topic summary

A user seeks to make the “Add to Cart” button permanently stick to the bottom of the screen on mobile product pages for their Shopify Impact theme.

Problem:

  • The button currently behaves differently than desired on mobile view
  • User provided preview link and comparison images showing current vs. desired behavior

Solutions Provided:
Multiple respondents offered similar CSS fixes, all involving:

  • Navigating to theme files (Actions > Edit code > Assets > theme.css or theme.liquid)
  • Adding CSS code targeting .product-quick-add class
  • Key properties: opacity: 1, visibility: visible, transform: translateY(0)

Implementation Locations:

  • Most suggest adding code to end of theme.css file
  • One alternative suggests placing code in theme.liquid before </head> tag

All solutions use !important flags to ensure the styling overrides existing theme CSS. The discussion appears resolved with multiple working solutions provided, though no confirmation from the original poster indicates which (if any) was implemented successfully.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I want add to cart button to always stick at the bottom of the screen in mobile view in the product page

Here’s the link

mTekin_0-1726431081567.png
mTekin_0-1726431081567.png516×1090 82.4 KB

not like this

mTekin_1-1726431109139.png
mTekin_1-1726431109139.png515×1099 45.6 KB

more like this.

2

@mTekin Please add the below line of css code at the end of your theme.css file

body product-quick-add.product-quick-add{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
3

Hi @mTekin ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.shopify-section--main-product .product-quick-add {
    opacity: 1 !important;
    visibility: visible !important;
}
4

Hi @mTekin ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

5

Hello @mTekin
Go to online store ----> themes ----> actions ----> edit code---->theme.css
add this code at the end of the file.

product-quick-add.product-quick-add {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}

result

12.png
12.png445×843 70.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks