Center add to cart and quantity and make them on same line

Store Design
1

Hello

I would like to center the add to cart, and make the quantity box and the add to cart box same size.

Make it centered not stuck to the picture on the bottom? Picture attached and this is the link to my website www.mylittleworld.shop

Thanks a for the help!

2 Likes
2

@mylittleworld

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.product-card + form {
    text-align: center;
    margin-bottom: 30px;
}

.product-card + form input.btn {
    width: 97%;
    margin-top: 10px;
}
3

@mylittleworld

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.product-card + form {
    text-align: center;
    margin-bottom: 30px;
}

.product-card + form input.btn {
    width: 97%;
    margin-top: 10px;
}

Thanks!

4

It doesn’t change anything :disappointed_face:

5

@dmwwebartisan @KetanKumar it doesn’t change anything.

also how can I align all the quantities no matter how long the product name is?

Thanks for the help!

1 Like
6

@mylittleworld

sorry i can’t see code where did you add this code?

7

@mylittleworld
Kindly provide us collaboration access. so that we can help you to fix it.

8

there

Screen Shot 2022-01-31 at 11.17.17 AM.png
Screen Shot 2022-01-31 at 11.17.17 AM.png1536×1066 143 KB

@KetanKumar

9

Can you ask for a collaboration request via your Shopify partner account?

10

yes,

11

@mylittleworld
provide Collaborator request code

12

you can request access

13

@mylittleworld
Yes, I need collaboration code to request access.

14

Screenshot (19).png
Screenshot (19).png1078×400 16.6 KB

15

Please open theme.css and find below class.

.btn {

Width: auto;

}

Instead of auto with set the it with below.

.btn {

Width: 241px;

}

16

@mylittleworld

Open the theme.css and find this class .btn

Change with from

width:auto;

to

width: 240px;

17

Hi, I want to make quantity and add to cart on the same line @DelightCart

18

Ok, Go to theme.css

You have to add the width as below.

input, textarea, select, .disclosure__toggle {

Width:80px;
}
19

nop still nothing @DelightCart

20

It should work. See attachment.