Button changes when clicking on it (dawn)

Store Design

Topic summary

Main issue: On a Dawn theme product page, the “Add to Cart” button’s design shifts when clicked or when a variant changes, and size option tags display in uneven sizes. Screenshots show the desired vs. undesired button state; a product URL is provided.

Proposed fix (button): Add CSS to hide span.svg-wrapper.add-to-cart-icon in theme.liquid. Outcome: this hid elements in the button (cart icon/text), which is not desired; the button should retain its icon and consistent styling.

Proposed fix (variant sizes): Remove custom CSS that targets a specific label ID so all size tags render uniformly. The referenced selector is label[for=“template–26410928243036__main-1-0”]. The original poster couldn’t find where it was added; another reply suggested placing that CSS in base.css (the main stylesheet), which conflicts with the earlier advice to remove it.

Technical notes: CSS (Cascading Style Sheets) controls styling; theme.liquid is the layout file; base.css is the global stylesheet.

Status: Unresolved. Needs a CSS approach that prevents the button’s layout shift while keeping the cart icon, and clarity on removing (not adding) the label-specific CSS to standardize size tags.

Summarized with AI on December 11. AI used: gpt-5.
1

I need some help. When I click the “Add to Cart” button or change the variant, the Add to Cart button changes and its internal design shifts. How can I prevent this so the button always keeps the same design?
Also, I noticed that the size tags appear uneven, and I want them all to be the same size as the size XS example.

Captura de pantalla 2025-11-19 a las 22.47.18
Captura de pantalla 2025-11-19 a las 22.47.181920×1041 351 KB

**
Can you help me with this? Thank you.**

Image 1: This is how I want the button to remain.

Captura de pantalla 2025-11-20 a las 12.30.10
Captura de pantalla 2025-11-20 a las 12.30.101920×987 247 KB

Image 2: I want to prevent it from changing to this.

Captura de pantalla 2025-11-20 a las 12.30.20
Captura de pantalla 2025-11-20 a las 12.30.201920×1097 248 KB

URL: https://voodoo-warehouse.com/products/diesel-denim-cargo-mini-skirt-xs-s?variant=54715004977500

Thank you!

4 Likes
3

@tim_1 do you know why that happens and how can I fix this? Thanks

4

Hey @voodoowww123

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
span.svg-wrapper.add-to-cart-icon {
    display: none !important;
}
</style>

RESULT:

image
image1906×915 278 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

Hey, thank you for your help. This only hid the add to cart text, but the icon that has the button inside is missing + the variant size tags are still in 2 different sizes.

6

For the variants size tags that are in two different sizes, you just need to remove the code which you added in Main Product Information custom css. Below is the code, just simply remove this and your variants will be the same size.

label[for="template--26410928243036__main-1-0"] {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

RESULT:

image
image460×215 5.58 KB

Best,
Moeed

7

Hey sorry for the late reply but I can’t find it. Is it located in the main-product.liquid? Thanks

8

When I add the code the cart icon of the button is removed, how can I mantain that icon? Thanks

9

Hey @voodoowww123,

Actually Moeed provide you the solution code. And in order to add the code in the exact file, you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code that shared below.

label[for="template--26410928243036__main-1-0"] {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

Hope this helps.

1 Like