Hello -
I am currently using studio theme and I would like to reduce the button size of add to cart / buy now as well as the Quantity buttons.
Topic summary
Goal: Reduce sizes of Add to Cart/Buy Now buttons and the quantity controls in the Shopify Studio theme.
-
Initial fix: A CSS snippet added in theme.liquid (above ) caps widths to shrink elements: .product-form__submit and .shopify-payment-button at 200px; .quantity at 80px; button.quantity__button.no-js-hidden and .quantity__input at 30px. Outcome: Confirmed as working by the requester.
-
Further tweak: To make product description text smaller than the theme’s minimum, CSS set .product__description.rte p { font-size: 14px !important; }. Outcome: Accepted.
-
Additional request: Reduce sizes for Product Information title and Collection banner title. CSS provided: h1.collection-hero__title and .product__title h1 set to 24px. Screenshots were central to clarifying the request.
-
Limitation noted: A separate ask to move the variant section isn’t feasible without changing the HTML layout; advised hiring a developer for that level of customization.
Status: Styling size adjustments for buttons, quantity, description, and titles are resolved via CSS. Variant repositioning remains unresolved and would require custom development.
share the store URL then we will able to help you.
site is currently locked but here’s the pw: Password1!
which size do you want? because we check on there have default size of both buttons.
Just enough to show the add to cart/buy now as well as the Quantity box to enough to show the number.
you can use below code above in theme.liquid
.product-form__submit, .shopify-payment-button{ max-width:200px!important; } .quantity{ max-width:80px!important; } button.quantity__button.no-js-hidden { max-width: 30px!important; } .quantity__input{ max-width: 30px!important; }after that
are you want to this?
if you have any questions or want help you can contact us
thankyou 
1 Like
YES! thank you so much
1 Like
Our pleasure.
if you want to discuss any further information then you can contact us.
And please don’t forget the like button.
Thankyou
1 Like
Hello -
I am back again haha. can you assist on how to reduce the font size on the product information - description? I already have it on the smallest font size scale but I wanted to reduce it more.
1 Like
haha, you always welcome we are here for help any time.
Please use below code in theme.liquid
.product__description.rte p { font-size: 14px!important; }
Please don’t forget accept and like!
You can also connect with our official whatsapp for any help related with store. just for fast communication.
Thankyou:)
1 Like
Sweet!
My apologies but can you also assist me on reducing the size for the Product Information - Title and Collection Banner?
I forgot to add this request previously.
sorry friend i don’t understand. can you give us the screenshots for understanding what you want?
Please add below code
h1.collection-hero__title { font-size: 24px!important; } .product__title h1 { font-size: 24px!important; }
Friend, the second thing[variant moving] is not possible without change the layout of html. if you want to do it then you need to hire a developer. Because that is not possible to give you the whole code here.
if you want to discuss further information then you can contact us.
Thankyou
1 Like
this is awesome. understood on the variant. appreciate the help!