Hi guys! What code can I add to make the Add to Cart button full width/centered on the desktop version of Ware house theme? Thanks in advance for the assistance!
Store: www.mochilo.co
Topic summary
Goal: make the desktop Add to Cart button in the Ware house theme full width/centered.
Proposed solution: apply the CSS property flex-grow: 1 to the button so it expands to fill available space within its flex container. An example was shown using an inline style on the submit button element.
Cleaner approach: add a component-specific CSS rule targeting the class .product-form__add-button with flex-grow: 1. A Shopify help link was provided to guide where and how to add CSS in a theme.
Implementation: the user added .product-form__add-button { flex-grow: 1; } to the bottom of theme.css. This change made the button full width as desired.
Outcome: confirmed working; the thread is resolved with no remaining questions or disagreements. No additional code changes or HTML edits were necessary beyond the CSS update; the screenshot was not essential to the solution.
flex-grow: 1;
you just need to add this property to that button.
Thank you! But exactly where do I add it?
<button type=“submit” class=“product-form__add-button button button–primary” data-action=“add-to-cart” style="
flex-grow: 1;
">COMPRAR
Like This
Great. And where do I add it? What file?
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
I guess this will help you to write the component specific CSS.
.product-form__add-button {
flex-grow: 1;
}
This particular is what you need to add
1 Like
Added that to the bottom of theme.css file and it worked. Thanks for the help!
1 Like