Increase ATC button font size

Store Design
1

Im using Stiletto theme and cannot work out how to increase the font size for our ATC button. Any insights greatly appreciated!

2

@glowable respect other peoples time we are not mind readers.
Always provide an inspectable url that’s publicly accessible when seeking website/theme help.

3
4

There’s multiple buttons to target.
Use the attribute selector

[data-add-to-cart-text] { font-size: 16px; }

To target just the main product form atc

.product__details .product-form__item .btn--primary [data-add-to-cart-text] { font-size: 16px; }

Otherwise you’d have to build specific selectors for specific buttons or some negation rules using :not pseudo selector.

Also be aware of a bunch of console errors from :
https://cdn.appsmav.com/sb/assets/js/widget-sdk.js?v=17.0 &
https://cdn.shopify.com/extensions/e87d1c2a-0681-4b32-be20-9805361cbd3c/progressify-multi-bar-upsells-449/assets/progressbar.js

5

Hi @glowable,

I inspected your product page and saw the issue. It’s a common situation where a theme’s HTML structure is a little unique.

You can fix it quickly on your Shopify Admin:

  1. Go to Online Store → Theme → Theme settings → Edit code

  2. Find base.css file, then paste this code:

.product-form__controls-group .product-form__controls-group--submit div button span:nth-child(1) { font-size: 16px; }

If the CSS doesn’t stick or you want an easier way to customize your Add to Cart button (sticky button, visual styling, icons…), Wi ATC can handle everything without touching code.

Hope this helps you get your button looking just the way you want!

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Hello @glowable ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
button.product-form__cart-submit.btn.btn--medium.btn--full.btn--primary span:nth-child(1) {
    font-size: 15px !important;
    letter-spacing: 1px !important;
    line-height:0 !important;
}

image
image1613×731 142 KB

Let me know if you need further assistance!

7

Hi @glowable,

This can be done via CSS, here is the code I attach below, and you can have a try by inserting it in theme.css file to see if it works or not.

<style>
.fs-accent, .btn, .btn span, .ff-body {
    font-size: large;
}
</style>

It shall look like this after adjusting:

image
image1901×880 183 KB

8

Thank you, this worked!