Disable Auto Select Variant in Refresh Theme

Shopify Discussion
,
1

Hi!

I am using the Refresh theme for my webpage and I would like to disable the auto-selection of variants.

I have tried different Apps and also to change some part of code, but nothing seems to work. Does anybody know how to solve this issue?

Thank you in advance.

2

Hi @Innovamat
Can you share the store URL and password if the store is password protected?
In that way i can better understand the issue.

3

Hi @Huptech-Web

The store URL is the following: https://enigmath.innovamat.com/

Thanks.

4

Hello @Innovamat ,

Add the below code in the “product-variant-picker.liquid”.

image.png
image.png1326×641 33 KB

Remove the below code from “product-variant-options.liquid” file.

{% if option.selected_value == value %}
        selected="selected"
      {% endif %}

image.png
image.png1475×612 32.8 KB

5

Hi @Huptech-Web !

Thanks for providing a first attempt solution.

It now appears the Select Option as the preselected variant but when you try to add it to the basket it is linked with the first available variant, so the problem is not fixed yet.

I provide the preview URL so that you can understand the issue.

https://enigmath.innovamat.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=156227666267

Thanks!

6

Hi @Innovamat ,

Add the code below to the “theme.liquid” above the .

image.png
image.png1515×612 38.5 KB

Also, Add the below code in the “product-form.js”.

// Check for 'variant' parameter in the URL
    if (variant_size > 1) {
      let url = window.location.href; console.log('url', url);
      let params = new URLSearchParams(url.split('?')[1]); console.log('params', params);
      if (!params.has('variant')) {
          // If 'variant' parameter doesn't exist, show error and exit the handler
          alert('Please select the variant');
          return false; // Exit the handler
      }
    }

image.png
image.png1510×667 42.8 KB

7

Hi @Huptech-Web ,

Thanks for following this case. Your responses have solved my problem and the webpage now works as expected.

Thank you!

8

You are most welcome @Innovamat .

9

Hi @Huptech-Web ,

Do you know how could I change the function alert(‘Please select the variant’) depending on user’s browser default leanguage?

I mena I would like to display the message in Spanish, English, Catalan, etc., depending on the user’s preferred language.

Thanks in advance :slightly_smiling_face:

10

I’ve find a solution for the problem. Attach you will fins a picture in case someone is struggling with the same issue.

Hope this helps!

Innovamat_0-1702308535987.png
Innovamat_0-1702308535987.png622×338 25.5 KB

11

Hello there,
I also would like to thank you very much for your working solution!
But, I’m still facing two issues.

First, even if the variants are now saying “Select option”, the default thumbnail of the products remains the one assigned to the first listed option.
How can I change that and bring back my initial first image of the product as product cover?

And second, if a product has to different variants, let’s say color and size, if I pick a color, in order to show the corresponded picture, I also have to choose the size.
How can I fix that?

Thank you in advance!

12

I have the same issues. And the reason I want to disable the default variants is to show my initial first image of the product as product cover. How to fix it ?

Thank you in advance! @Huptech-Web

13

Hello Rishihuptech Can you tell me please how to do it on dawn theme old trick is not working..

product-templete.liquid is no more now on dawn latest version

and also {% if value.selected %} checked {% endif %} I remove this lines on product-variant-options.liquid this is not working in front no select the variant but backend the function is working.. how to fix it in dawn theme new version.. my dawn theme currently new version is 14 right now.. i Want to fix it please help me out