Add To Cart button smaller width

Sproud · ‎10-01-2024

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

Tech_Coding · ‎10-01-2024

Hello @Sproud

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
#shopify-section-template--16691831898320__e8bad23e-9086-460f-bcba-4d2022a7ddd3 .quick-add__submit {
max-width: 77% !important;
margin: 0 auto;
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee☕ Tips adds a little sweetness to my day.

Dan-From-Ryviu · ‎10-01-2024

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;
}

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sproud · ‎10-01-2024

I get this error when trying to save?

Dan-From-Ryviu · ‎10-01-2024

So please add this code to theme.liquid file after <head> in Online store > Themes > Edit code

<style>
.quick-add__submit {
min-width: 60% !important;
with: auto !important;
}
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GTLOfficial · ‎10-01-2024

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

ZestardTech · ‎10-01-2024

Hi @Sproud

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.quick-add__submit {
min-width: 70% !important;
width: auto !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Add To Cart button smaller width

Add To Cart button smaller width

Community Blog Articles