How can I make add to cart button thinner (Atelier theme)

Store Design
1

How can I make add to cart button thinner (Atelier theme)

2

@PM999 can you please share your page link?

3

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

4

Thinner – less tall?
try adding this code to the “Theme settings”=>Custom CSS:

body {
  --height-buy-buttons:  48px; /* default is calculated as 52px */
}

This is how default is calculated, so do not change it much without also fixing padding …

5

Hi @PM999,

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

6

Adjusting the value of height can make add to cart button thinner, but I have to see your code details so that locate the correct class name or ID. You can share me website here if willing to proceed.

7

@PM999 Got it You’re using the Atelier theme, and you want the Add to Cart button thinner. That’s a simple CSS override.

By default, Atelier sets fairly large padding for buttons, making them tall. To make it thinner, you just need to adjust the padding or height for the add-to-cart button.

:white_check_mark: Quick CSS Fix

Go to your Shopify Admin → Online Store → Themes → Customize → Theme Settings → Custom CSS (or Edit Code → base.css / theme.css).
Then add this snippet:

/* Make add-to-cart button thinner */
.product-form__submit,
button[name="add"],
button.add-to-cart {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: auto; /* removes forced tall height */
  font-size: 14px;  /* optional, adjust text size */
}

If you want it extra slim:

.product-form__submit {
  padding: 4px 12px;  /* vertical horizontal */
  font-size: 13px;
}

:magnifying_glass_tilted_left: Notes

  • .product-form__submit is the main Add to Cart button class in Atelier.

  • If you want only product page button thinner but keep cart drawer buttons the same, scope it like this:

.product .product-form__submit {
  padding: 6px 14px;
}
8

Can I just say it’s nice to see that there are at least SOME folks who are willing to help out without importuning for work. This question was pretty much a simple fix (and hats off to @pere01 for the extensive answer) and doesn’t require anyone to give a URL or password to their site.

I swear, any simple question that’s asked here gets attacked by job-hungry pirhana, just trying to get a piece of the OP.