Cart icon vanishes from the "Add to cart" button when selecting alternative product variation - DAWN

Store Design

Topic summary

A user implemented a cart icon on the \

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I aim to include the cart icon alongside the “Add to cart” button. I implemented the solution provided in this guide. This solution works correctly when the product page loads initially. However, when I choose a different product variation after the page has already loaded, the cart icon disappears from the “Add to cart” button. Does anyone know why this is happening? - below I have attached two screenshot demonstrating this.

Please help. Thanks in advance!

After initial page load.
After initial page load.639×320 6.35 KB

After selecting a different product variant. PS: even if we re-select the initially selected varient, then cart icon does NOT reappear.
After selecting a different product variant. PS: even if we re-select the initially selected varient, then cart icon does NOT reappear.639×275 5.77 KB

2

Hi @Sindiso

Can you please provide your Store URL and Password too?

With Regards,
Dbuglab

3

Hey @Sindiso

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

4

Store link

There is no password.

5

Store link

There is no password.

6

Hi @Sindiso

While changing the variants button HTML changed

before

After

Please check the on change function.

Thanks
Dbuglab

7

Hi @dbuglab ,

Uhm, where do I find this function? - also, any specific details I should be looking for?

Thanks,

Sindiso.

8

HI,

We need to check your product.liquid code to fix the issue

9

Hi,

There is no file called product.liquid. There is card-product.liquid, main-product.liquid, featured-product.liquid, cart-notification-product.liquid. Which one exactly do you need to see?

Thanks,

Sindiso.

10

@Sindiso

product-form.liquid
prodcut-card.liquid
product-price.liquid

Please check code in these files.

11

Ok, so we both had the exact same problem. @Sindiso If you’re still alive and haven’t quit Shopify yet, then I’ve got the solution.

First, put the cart icon into it’s own snippet folder (if it’s not there already). Go into code editor, open snippets, and if ‘icon-cart’ doesn’t exist, just create it and do this:

<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>

Below is your own code. So now, instead of doing this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
<svg class="icon icon-cart" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"></path>
</svg>
<p>Add to cart</p>
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

You can do this:

<button id="ProductSubmitButton-template--20151423074588__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>
{%- render 'icon-cart' -%}
Add to cart
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>

Both have the exact same effect, but the second one is more efficient, as now you can use it in multiple instances, as I will later show you how to do.

From hereon we can expand: give both the text and the icon a class. Yes, I removed

, because it was useless. If you wanna know why, go search it up.

Change it from this:

<span>
{%- render 'icon-cart' -%}
Add to cart
</span>

To this:

<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now we can adjust the properties through CSS. You may have done this already, but since your button looks like this…
e37c108c-463f-4c03-832f-13d94c3b2715.png
You probably should make some adjustments?‍ :female_sign: Anyways, you add this into section-main-product.css:

.icon-class__container {
width: 40px;
height: 40px;
}

.product-form__submit--content {
justify-content: center;
align-items: center;
display: flex;
}

And now, it should look something like this:

Veluxe_1-1720739261513.png
The problem still remains though, and I have a solution. I’ll proceed to break it down.

First, add another button beforehand like this:

<span class="product-form__submit--content icon-class__container">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Adding the space in the middle for class=“product-form__submit–content icon-class__container” combines the properties of both classes for the icon (whereas before it would just be one). If you have braincells and an eyeball, you would probably think that something’s off. Because now, it looks like this:

Veluxe_2-1720739874147.png

And then, once you start selecting variants, now it looks like this:

Veluxe_3-1720739945368.png

You see, Shopify is very weird. It targets the first icon, but not the second. Even when it’s invisible. I don’t know why, but that’s how it works.
So knowing this, you can now simply make the first one invisible. Like this:

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

So now, it will permanently look wonky:

Veluxe_4-1720740562305.png

But remember, the cart-icon has a width of 40px. So all we need to do is to reverse that change, as it has pushed us 40px to the right. We do this by moving left.

<span class="product-form__submit--content icon-class__container" style="visibility: hidden;">
{%- render 'icon-cart' -%}
</span>
<span class="product-form__submit--content" style="margin-left: -40px;">
<span class="icon-class__container">
{%- render 'icon-cart' -%}
</span>
Add to Cart
</span>

Now, it should go back to permanantly looking like this. Hooray!

Veluxe_1-1720739261513.png

1 Like