Linked options helper methods for Shopify. See this: http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options

gistfile1.html

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
    
  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = jQuery('.single-option-selector:eq(0)');
      break;
    case 1:
      var key = jQuery('.single-option-selector:eq(0)').val();
      var selector = jQuery('.single-option-selector:eq(1)');
      break;
    case 2:
      var key = jQuery('.single-option-selector:eq(0)').val();  
      key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
      var selector = jQuery('.single-option-selector:eq(2)');
  }
  
  var initialValue = selector.val();
  selector.empty();    
  var availableOptions = Shopify.optionsMap[key];
  for (var i=0; i<availableOptions.length; i++) {
    var option = availableOptions[i];
    var newOption = jQuery('<option></option>').val(option).html(option);
    selector.append(newOption);
  }
  jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
    if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
      $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
    }
    else {
      $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
    }
  });
  if (jQuery.inArray(initialValue, availableOptions) !== -1) {
    selector.val(initialValue);
  }
  selector.trigger('change');  
  
};

Shopify.linkOptionSelectors = function(product) {
  // Building our mapping object.
  for (var i=0; i<product.variants.length; i++) {
    var variant = product.variants[i];
    if (variant.available) {
      // Gathering values for the 1st drop-down.
      Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
      Shopify.optionsMap['root'].push(variant.option1);
      Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
      // Gathering values for the 2nd drop-down.
      if (product.options.length > 1) {
        var key = variant.option1;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option2);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
      // Gathering values for the 3rd drop-down.
      if (product.options.length === 3) {
        var key = variant.option1 + ' / ' + variant.option2;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option3);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
    }
  }
  // Update options right away.
  Shopify.updateOptionsInSelector(0);
  if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
  if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
  // When there is an update in the first dropdown.
  jQuery(".single-option-selector:eq(0)").change(function() {
    Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });
  // When there is an update in the second dropdown.
  jQuery(".single-option-selector:eq(1)").change(function() {
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });  
};
 
{% if product.available and product.options.size > 1 %}
  var $addToCartForm = $('form[action="/cart/add"]');
  if (window.MutationObserver && $addToCartForm.length) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {      
      Shopify.linkOptionSelectors({{ product | json }});
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }
{% endif %}
  
</script>
  

Thanks for reaching out, you will have to edit the variables to match your theme and it should work! Thanks and Regards, Jim Cook /* Avid Brio / *Business Development Manager Call: +1-919-300-6224 / Skype: jim.avidbrio www.AvidBrio.com <http://avidbrio.com>

…

On Mon, Jan 17, 2022 at 2:04 AM YahyaYavuz61 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hello experts, this snippet doesnt works for Prestige OS2.0 Theme. Have anyone a snippet that works for this theme? Please help me :) — Reply to this email directly, view it on GitHub <https://gist.github.com/1083007#gistcomment-4030739>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASTUSG67YH63FITXXIVOQNLUWMTWXANCNFSM4H53ISUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

Hello @YahyaYavuz61

This tutorial does not work directly for Prestige theme. Not for old version of Prestige theme too.

You will have to update product-form.liquid file first. You will have to call product options in dropdown and have to keep them hide. You have to update Classes assign to Swatches.
Then You will have to update this snippet and then it will work. There are numerous steps to implement linked-options for Prestige theme in shopify.

@sanjay-makwana-avidbrio which variables i must change? Can you explain please?

Hello @aman-developer thank you!

Can you do that for me?
if it's chargeable, I can also pay you.

Any update on this for Dawn 3.0?

I recently did it for Dawn 3.0 and 4.0 both.

I recently did it for Dawn 3.0 and 4.0 both.

Dude, could you help me?

The code sort of works.
It works in cases when there are 10-15 variants with 3 variant options, but when the varaint quantity increases to 30+ it does not work properly.
Is there a way to solve this?

Edit:
With 2options it works perfectly, but when 3rd option is added the functionality breaks