Need Help Adjusting "Add to Cart" Button Placement on Home and Collection Pages

Store Design
,
1

I’m facing an issue with the placement of the “Add to Cart” button on my Shopify store. Currently, the button is not aligning properly under the product images on both the home page and the collection pages. I would like to adjust its position so that it appears neatly below each product, maintaining a clean and consistent layout.

I’ve tried modifying the theme’s CSS but haven’t been able to achieve the desired alignment. Could someone guide me on how to adjust the button placement properly? Any help or code suggestions would be greatly appreciated.

issue.JPG
issue.JPG1339×587 113 KB

2

Good day @littlemaster , Could you please share your store URL for better understanding?

3

hi, you have to add max-width and proper flex styles. Anyway, we need the URL to check the problem.

1 Like
4

Little Master
www.lillmaster.com
here’s the URL.

5

Hello @littlemaster , to get proper placement for add to cart button, please follow this simple steps:-

  1. Go to online store
  2. Select your theme and open code editor and then find your CSS file or paste the below code inside tag in theme.liquid file

Here is the CSS for the same along with screenshot.

.button--full-width {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/*or*/

.card-wrapper .card .card__content .button--full-width {
    margin-top: 0;
    margin-left: 0;
}

button-alignments.png
button-alignments.png1170×367 249 KB

If you found this response helpful, please do like and accept the solution, and also if you have any questions please don’t hesitate to ask.
(S.P)

1 Like
6

not working

7

how about this one? Place it at the bottom of base.css file.

.button--full-width {
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
8

button.png
button.png1896×407 215 KB

Hello @littlemaster , Please try with this code.

.product-grid .card-wrapper .card .quick-add__submit.button--full-width {
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

button-placement.png
button-placement.png1248×385 189 KB

1 Like
9

Still not working

10

here is the Collaborator Request Code. Can you please look into this. It will highly appreciated.

2994

11

Hello @littlemaster ,

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

1 Like