How can I set different second options based on the first choice for free?

[Danielyzas]

Hello, maybe you know how to make the first option different from the second option, for example: the first option (Android, iPhone). Second depending on the first choice, if iPhone, then in the second choice iPhone models, if Android then in the second option would be Android models, for example Samsung. There should be a free way, I know there are paid apps that do it, but I would like it for free.

[LibertySafesFL]

if you don't mind rolling up your sleeves https://shopify.dev/docs/themes/product-merchandising/variants     

also https://shopify.dev/docs/themes/architecture/templates/product#line-item-properties

[Danielyzas]

I can't find the code or the part what I need, could you send it here?

[EasifyApps]

Hi @Danielyzas,

You don't need to use an app to hide irrelevant variants; just add some custom code to the Custom Liquid of your theme.

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];

variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

// gather a list of valid combinations of options, check to see if the input passed to it matches in a chain of valid options.
function validCombo(inputValue, optionLevel) {
  for(let i = 0; i < productJson.length; i++) {
    if(optionLevel == 1){
      if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) { return true; }
    } else {
      if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) { return true; }
    }
  }
  return false;
}

function rebuildOptions() {
  selectedOptions = fieldsets.map((fieldset) => {
    return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
  });
  //loop through the option sets starting from the 2nd set and disable any invalid options
  for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
    const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');

    inputs.forEach(input => {
      input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
      if(pickerType == 'radios'){
        //get the label for the current input (this is what the user clicks, the "pill")
        const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);

        label.style.display = (input.disabled) ? "none" : ""; //Hide the option, or comment this line out and use the following lines to style it..
        //label.style.opacity = (input.disabled) ? 0.5 : 1;
        //label.style.borderStyle = (input.disabled) ? "dashed" : "solid";
        //label.style.textDecoration = (input.disabled) ? "none" : "";
      } else {
        input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
      }
    });
  }

  //if the default selected option is disabled with the function above, select the first available option instead
  for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
    if(pickerType == 'radios'){
      if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
        change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
      }
    } else {
      if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
        change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
      }
    }
    //if a new option has been selected, restart the whole process
    if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
  }
}
</script>

[Danielyzas]

I putted the liquid code into the product information and it doesin't work, can you help?

[EasifyApps]

It's worth noting that after adding the custom code, immediate updates may not reflect on the preview panel. To view the changes, simply save your work and refresh the page.

I've retested the code, and it continues to function effectively.

[Danielyzas]

What theme are you using? I did even publish the store it still didn't work.

[EasifyApps]

I've got it working with Dawn, Refresh, and Sense themes. Which theme are you using?

[Danielyzas]

I use studio theme