How to shorten add to cart and payment buttons on Flow Theme

Store Design

Topic summary

Goal: Shorten “Add to Cart” and payment buttons in the Shopify Flow theme to match the “Notify me” button. A screenshot illustrates the mismatch.

Update: A helper requested the store URL to provide theme-specific code; the site is isopoddepot.com.

Solution provided: Edit Online Store > Themes > Edit code > Assets > theme.min.css and add a CSS rule targeting the Add to Cart button: #AddToCartForm button#AddToCart { max-width: 300px !important; }. This sets a maximum width so the button matches the desired size.

Outcome: The requester confirmed with a thank you, indicating the Add to Cart button fix worked. The screenshot was central to identifying the issue.

Status: Partially resolved. The solution specifically targets the Add to Cart button; payment buttons (“Buy now,” etc.) were not explicitly addressed. If needed, similar CSS selectors should be applied to those buttons to achieve consistent sizing. No further action items or disagreements noted.

Summarized with AI on January 25. AI used: gpt-5.
1

Hello,

How do I shorten the add the cart, payment buttons, etc to match the Notify me button. I am using the Flow theme. Thank you!

Screenshot (2).png
Screenshot (2).png1011Ă—402 4.41 KB

1 Like
2

Hi @djnbob

Do you mind providing your website so we can provide a code appropriate for you?

3

The website is http://www.isopoddepot.com

Thank you!!

4

Hi @djnbob

Thank you. Please add the following code below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the theme.min.css file
  3. At very end of the code, add the code below
#AddToCartForm button#AddToCart {
    max-width: 300px!important;
}
1 Like
5

Thank you!

1 Like