Color swatch Variant Picker not working?! HELP!

Hi guys,

Our website is https://pronecushion.com/products/prone-cushion-1

We sell the world’s first ergonomic cushion designed for lying on your stomach.

Originally we have been using the color swatch for the variant picker (see figure below)

Fig.1

but for some reason, suddenly we have received feedback from our customers saying that none of the other colors are “clickable”.

Upon checking the website, it was discovered that although you can clearly SEE the 3 available colors, they were not “clickable” - as in, you could not select a different color. It was fixed at the default color (blue).

We have tried other color selector types like “block” or “variant image”, but they all had the same issue.

The only choice that worked was the "dropdown" - which is what we are using temporarily for now.

We reached out to the creators of the theme, and they said this may be due to a recent change on Shopify’s end but did not provide any specific details regarding what the changes were.

Is anybody else experiencing this issue?

Please help us resolve this issue!

Thank you.

Best,

Comfort Space Co.

Hi @comfortspaceco

It is possible that this issue could be due to a recent change on Shopify’s end or a conflict with your theme or an app.

I suggest following these steps:

  1. Update or revert to a previous version of the theme.
  2. One by one, deactivate newly installed or updated apps.
  3. Examine any custom code within your theme files.

Hi @okur90 !

Thank you so much for the fast reply!

Is there any way for us to know exactly what change was implemented on Shopify’s end?

To answer your suggestions:

  1. We have tried to revert to a previous version of the theme, but were still experiencing the same issues. However, when visiting the theme’s demo store:

https://themes.shopify.com/themes/impact/styles/shape/preview

The demo store seems to be running fine, free of our issues.

Thus, perhaps it may be any installed/updated apps.

  1. How would I deactivate the apps for me to find out which app is causing the conflict?

  2. Unfortunately, we are not too familiar with the coding for us to examine where the issue may lie

:(((

If you have any other suggestions to solving this issue, please let us know!

And thanks so much for your time.

Best,

Comfort Space Co.

@comfortspaceco Can you create a copy of your theme and enable the colour swatch for the variant picker on this duplicated theme? Then, share the URL with me, so I can take a look and provide further assistance. This way, we can isolate the issue without affecting your live store.

@okur90 I’m sorry - I’m not sure if we can live a draft/duplicate website with our current plan.

Upon checking, the accessory page of our website is still using the color swatch variant picker so please check the URL below:

https://pronecushion.com/products/extra-cover

This page is currently live, and shares the same problems with our main product page.

Please feel free to let me know if you need anything else!

@okur90 I’m sorry - I’m not sure if we can live a draft/duplicate website with our current plan.

Upon checking, the accessory page of our website is still using the color swatch variant picker so please check the URL below:

https://pronecushion.com/products/extra-cover

This page is currently live, and shares the same problems with our main product page.

Please feel free to let me know if you need anything else!

@comfortspaceco

The issue seems to be that all three input elements have the same ID (“swatch-093957795”).

In the theme files, you will need to find the appropriate file where the colour swatch picker is located. It could be in a product template file, such as product-template.liquid, a section file like product-section.liquid, or another related file.

Once you locate the correct file, please share it here, and I can assist you further.

I’m having same issue, it is happening for everyone using this theme. It’s no app related. I have 2 stores with this theme and both have same issue. Any solutions yet? Losing quite a money on fb ads, but don’t want to turn them off to lose optimization.

I have the same theme and same problem. I noticed that your store is working now, how did you fix this? Please share thanks :slightly_smiling_face:

Hi @comfortspaceco ,

Thanks for reaching out about this and I’m sorry to hear about the issue.

If you are using the Impact theme, we are aware of this issue at the moment. If you are comfortable editing code you can follow steps below as a workaround: Open the “swatch.liquid” snippet. Edit line 36, changing this:

{%- capture id -%}swatch-{{ 'now' | date: '%N' }}{%- endcapture -%}

To this instead:

{%- capture id -%}swatch-{{ 'now' | date: '%N' }}-{{ value | handleize }}{%- endcapture -%}

Save the changes and refresh the storefront a few times, then test again.

If you are still experiencing issues, please reach out to theme developers again as they have been contacted about the issue as of now.

2 Likes

Thank you, this works.

Hi @comfortspaceco

Eduardo, from Maestrooo (the theme developers) here.

We were alerted this Friday that basic features of our theme Impact stopped working, such as selecting variants on the product page.

This issue is, unfortunately, a consequence of a change that Shopify rolled out this Friday and on which the theme depending to.

We are currently in discussion with Shopify, but their technical team is not working during the weekend, so we have tried to find a fix on our end to remove the problem.

If you have not already reached us at support, please fill out our contact form here: https://support.maestrooo.com/article/203-contact-us and indicate your store URL.

If you have already reached us and we have already patched your theme, please refrain from sending another email to avoid support congestion on our end.

Our support team is on call the whole weekend to fix as many stores as possible, but please note that due to a very high demand, we may take a few hours to answer and fix your issue.

If you have basic technical knowledge, you can also fix your theme directly by following the steps indicated here: https://gist.github.com/bakura10/d52b0491ff17ecf5d01cb5c0cc5214b2
We would be very grateful for people with coding knowledge to do that, as it helps our support team to prioritize non-technical merchants.

We are really sorry about the inconvenience this issue is causing to your business, but it’s honestly completely out of our control. It’s been 10 years since we operate and have never encountered such a problem. We hope that Shopify will take measures in the future to avoid such breakage.

Have a nice day.

Thank you so much! Its working.

The theme have another big bug also, it appeared at the same time as this
swatch error.

When clicking the quick add button it adds all the products (whole
collection) to the cart and everything gets stuck with errors.