How to change size of add to cart button?

Store Design
, , , ,

Topic summary

Goal: Make the mobile Add to cart button span full width; desktop layout is fine.

What happened:

  • OP wanted the mobile button to be full width instead of left-aligned, shared a product link and screenshot.
  • Solution that worked: adding CSS targeting the specific submit button ID (e.g., button#ProductSubmitButton-template–19142479642958__main) via Online Store > Edit code > theme.liquid (above ). Result screenshot showed a full-width button on mobile.
  • Alternative that did not work: adding a custom class (.a2cknop { width: 100%; }) in base.css. OP had already tried this; it didn’t override theme styles.

Outcome:

  • Issue resolved for the original poster after targeting the button by its specific ID in theme.liquid.

Open question:

  • Another user (Dawn theme) asked how to make the button truly full screen with no left/right gaps. They tried adjusting .product__info-wrapper, .product-form, and .product-form__buttons (even with !important) without success. No solution provided yet.

Notes:

  • Screenshots were used to illustrate the initial issue and the successful result.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi dear folks, i’m trying to resize this add to cart button to full width of the page, it doesn’t look professional if it’s aligned to left side and now full width to the right side.

How could i do this?

I think it’s a simple fix by adding some css anywhere but i can’t seem to figure it out.

in case u wanna check urself: https://lushloots.com/products/emilie

add to cart button size.png
add to cart button size.png509×568 9.13 KB

1 Like
2

To be clear: This is mobile version, desktop version is alright.

3

Hey @MGNetworks

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1695905820535.png
Moeed_0-1695905820535.png373×690 40.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > base.css and paste this at the bottom of the file:
.a2cknop {
width: 100%;
}
1 Like
5

I tried this one also before, because i made the a2cknop class myself.

But this doesn’t work unfortunately.

6

Thanks alot, this one worked!

I knew it was something with button#ProductSubmitButton-template–19142479642958__main !! But i couldn’t figure out for sure.

Thanks a lot.

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

8

but what if i want to size it on full screen? so there is no gap on the left and right hand side. im using the dawn theme and tried to change the css of . product__info-wrapper, . product-form, . product-form__buttons… nothing worked even with !important. I need your help haha