Add to Cart Button - Smaller Width

Shopify Discussion

Topic summary

A Shopify store owner seeks help reducing the width of “Add to Cart” buttons on their shop/collection page to approximately 80% of the current size.

Solutions Provided:

Two CSS-based solutions were offered:

  1. Button-focused approach: Modify .button--full-width class by setting min-width: 80% and adding flexbox centering properties. Code should be added to theme.liquid file within <style> tags.

  2. Card padding approach: Adjust .card--standard>.card__content padding to 0px 32px in the base.css file, which indirectly reduces button width by constraining the container.

Both respondents provided screenshots demonstrating their solutions and included step-by-step instructions for accessing the theme code editor. The issue appears solvable through custom CSS modifications, though no confirmation of implementation or preferred solution has been posted yet.

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

Hello,

Is anyone able to assist me in making my add to card button smaller width on my “shop” page. maybe 80% of what it is now?

Thank you,

Ella.

URL: https://www.livwithin.com.au/collections/all

PW: pewpog

Screenshot 2025-03-25 at 13.15.07.png
Screenshot 2025-03-25 at 13.15.07.png3280×1836 859 KB

2 
.button--full-width {
    min-width: 80% !important;
    display: flex !important;
    justify-content: center;
    justify-self: center;
}

MustafA16_0-1742876497855.png
MustafA16_0-1742876497855.png1246×515 522 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

Hello @ellacoker
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.card--standard>.card__content {
padding: 0px 32px !important;
}

result

61.png
61.png1551×337 317 KB

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