How to remove the add to cart button icon

Shopify Discussion

Topic summary

A user seeks to remove the cart icon from the “Add to Cart” button and adjust its font size on the Fabric theme’s product page.

Solutions Provided:

Multiple approaches were suggested:

  • CSS Method (Recommended): Add CSS code to hide the icon using .add-to-cart-text .add-to-cart-icon { display: none; } and adjust font size with custom values (e.g., 18px)
  • Placement Options: Code can be added to the Product Information section’s Custom CSS field (affects only that section) or to base.css (requires more specific targeting like .product-information)
  • Direct Code Edit: Alternatively, remove the SVG/icon code directly from main-product.liquid or product-form.liquid files

Issue Encountered:

The user reported that applying the CSS globally caused the quick add to cart feature to stop displaying. This was resolved by using more specific CSS selectors targeting only the .product-information section.

Additional Request:

The user also asked to resize the “BUY IT NOW” button text, which was addressed by adding .shopify-payment-button__button to the CSS selector to maintain consistent styling across both buttons.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

How to remove the add to cart button icon (Product page)? And i also want to change the font size. I am using fabric theme.

2

@NotYourBeast ,

Please follow this steps :

Click on edit code → find base.css file.

image
image2190Ă—928 162 KB

Put this css in base.css at the bottom of the file.

.product-details add-to-cart-component span.svg-wrapper.add-to-cart-icon {
    display: none;
}
1 Like
3

Hi @NotYourBeast

You can try theme customizer, on the Product page, under Product information section settings, to add the following CSS code. In Custom CSS field.

.add-to-cart-text .add-to-cart-icon {
  display: none;
}
.button[id^="BuyButtons-ProductSubmitButton-"] {
  font-size: 18px;
  text-transform: uppercase;
}

I have for example, set font-size to 18px but you choose value that suits you.
Also, the extra uppercase line, remove if not needed.

1 Like
6

Hey this worked but quick add to cart is nnot showing now

7

Well if you add CSS, like I mention to Product information section Custom CSS, it should not influence other sections. But if you add it to global CSS style like base.css you need to be more specific and target that section/block. For example :slight_smile:

.product-information .add-to-cart-text .add-to-cart-icon {
  display: none;
}
.product-information .button[id^="BuyButtons-ProductSubmitButton-"] {
  font-size: 18px;
  text-transform: uppercase;
}

It should be working not just for that button only.

1 Like
8

Oh, btw can u pls help me how can i aslo resize the BUY IT NOW button text?

9

Adjust to

.product-information .add-to-cart-text .add-to-cart-icon {
  display: none;
}
.product-information .button[id^="BuyButtons-ProductSubmitButton-"] ,
.product-information .shopify-payment-button__button {
  font-size: 18px;
  text-transform: uppercase;
}

[/quote]

So they have the same style. I added
, .product-information .shopify-payment-button__button

1 Like
10

In your Fabric theme go to Online Store > Themes > Edit code then add the following code in main-product. liquid or product-form. liquid. To get rid of the Add to Cart icon, remove the SVG/icon code which is included inside the button. For font size, you can write custom css in base. css, targeting. product-form__submit with your desired font-size.

11

Hi,

Hope this will help

-Theme Code Editor>Find Add to Cart Button Code
Something like this

<button type="submit" class="product-form__submit">
  <span class="icon-cart"></span>
  Add to cart
</button>

Remove the Cart Icon

  • Change Font Size of the Button by using css
1 Like