Hello! We would like to make the width of our add to cart buttons smaller, there is currently too much white space between the text and the boarder.
How do I do this?
Theme: Origin
Preview: https://pg7vhe5h6xc4t4nz-58489143504.shopifypreview.com
Topic summary
A user seeks to reduce the width of “Add to Cart” buttons on their Shopify store (Origin theme) due to excessive white space between text and borders.
Multiple solutions provided:
- Custom CSS approach: Add code to Custom CSS via Online Store > Themes > Customize > Theme settings:
.quick-add__submit {
min-width: auto !important;
max-width: 60-80% !important;
}
- Direct file editing: Insert similar CSS into
base.cssortheme.liquidfiles through the code editor (Online Store > Themes > Edit code).
Issue encountered:
The original poster reported an error when attempting to save changes, though the specific error details are unclear from the conversation.
Key technical detail:
All solutions target the .quick-add__submit class and adjust min-width and max-width properties to reduce button dimensions. The discussion remains open regarding which method successfully resolved the save error.
1 Like
Hello @Sproud
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @Sproud
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.quick-add__submit {
min-width: 60% !important;
with: auto !important;
}
Hello @Sproud
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.
.quick-add__submit {
min-width: 0;
}
.button--full-width {
width: 80%;
left: 30px;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
So please add this code to theme.liquid file after in Online store > Themes > Edit code
Hi @Sproud
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.quick-add__submit {
min-width: 70% !important;
width: auto !important;
}
