How to Decrease Button Width on Product Listings

Store Design
,

Topic summary

Goal: Make the “Add to Cart” buttons on product listing pages narrower to better align with product display; a reference screenshot was attached.

Context:

  • Store URL: carcleansweden.se. Theme: Dawn.
  • User couldn’t find theme.scss.liquid or theme.css.liquid and tried edits in base.css without success.

Info requested and provided:

  • Support members asked for the store URL and theme name; the user supplied both.

Proposed solution:

  • Guidance to add custom CSS at the very end of base.css (path: Admin > Online Store > Theme > Edit code > base.css):
    product-form .quick-add__submit { min-height: calc(3rem); }
  • This targets the quick-add submit button’s min-height (affects height, not width).

Status and next steps:

  • No confirmation yet that the change worked; outcome unresolved/ongoing.
  • If the goal is strictly width reduction, further CSS (e.g., max-width/width and alignment rules) may be needed, but no such code has been provided in the thread.

Notes:

  • The attached image helps visualize the desired compact button style.
Summarized with AI on December 15. AI used: gpt-5.
1

Hi Shopify Community,

I’m looking to make the “Add to Cart” buttons on my product listing pages narrower, similar to the examples shown in the attached screenshot. Currently, the buttons are too wide, and I’d like to adjust their width to make them more compact and aligned with the product display.

Could someone guide me on how to reduce the button width in my theme’s code or through custom CSS? Any specific steps or code snippets would be greatly appreciated!

Thank you in advance for your assistance!

CarCleanCC_0-1731031947995.png
CarCleanCC_0-1731031947995.png1884×944 219 KB

2

@CarCleanCC - can you please share your website link?

3

Hi @CarCleanCC

Can you share your store URL with me?

Also, may I ask for your Theme’s name?

Look forward to your response.

Best regards,

Avada Support Team

4

Yes sorry, my URL is carcleansweden.se and I use the dawn theme

5

Yes sorry, my URL is carcleansweden.se and I use the dawn theme

6

Didnt find theme.scss.liquid or theme.css.liquid so I tried in base.css but don’t know if that was right. Well, it didn’t work for me and sorry for not providing my URL and theme. My URL is carcleansweden.se and I use the dawn theme.

7

@CarCleanCC - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

product-form .quick-add__submit{min-height: calc(3rem);}
1 Like