How to make add to cart button wider

Store Design
,
1

Hi, I’m experimenting some troubles at the time of matching the add to cart button with the rest of the widgets in the product page, if anyone can help me please. Thewebsite isn’t live yet so i can’t share

Maquina de Contenido.png
Maquina de Contenido.png1920×1080 222 KB

1 Like
2

Hi @DaniCollantes , Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

3

Hello @DaniCollantes
as i can see, the button seems to be perfectly aligned., let me know you are checking on which screen.

4.png
4.png1920×770 121 KB

Thanks

4

Hey @DaniCollantes

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

Yes, in this website yes is for the new website that i’m creating that isn’t live yet.
How can I share to you?

6

My problem is that my new store isnt live yet, i need to fix it before publishing it

7

Yes, in this website yes is for the new website that i’m creating that isn’t live yet.
How can I share to you?

8

provide me the url of your new store.

9

https://srpk8ycoyimau18d-52766113982.shopifypreview.com

10

Hi @DaniCollantes Please add the code to solve the issue.

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above tag

Result:

sahilsharma9515_0-1720694644823.png
sahilsharma9515_0-1720694644823.png1876×406 360 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

11

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

@media (min-width: 1024px) {
.lg\:w-3\/4 {
width: 100% !important;
}
}

and the result will be

9.png
9.png1920×768 158 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

12

Hey @DaniCollantes

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-1720694901439.png
Moeed_0-1720694901439.png1889×865 102 KB

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

Best Regards,
Moeed

13

It’s working!!! Thank you so mutch

14

always there to help you.
please hit the like button also.