I have a custom block where I display all the products. I need to add a selection of product options by color, size, etc. on each card. I took the code from product-variant-options.liquid and product-variant-picker.liquid to the product page and inserted it into a card that I display in the list. Now the problem is that when I click on some options, they do not switch and there is an error in the console - Uncaught TypeError: Cannot read properties of undefined (reading 'value'). Error in global.js file: updateOptions() { const fieldsets = Array.from(this.querySelectorAll('fieldset')); this.options = fieldsets.map((fieldset) => { return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value; }); } Is there a way to add option pickers to a product list page where each one has a picker? My code: //product-variant-picker {%- unless product.has_only_default_variant -%} <variant-radios id="variant-radios-{{ section.id }}" class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {% if update_url == false %} data-update-url="false" {% endif %} > {%- for option in product.options_with_values -%} <fieldset class="js product-form__input"> {% render 'custom-product-variant-options', product: product, option: option %} </fieldset> {%- endfor -%} <script type="application/json"> {{ product.variants | json }} </script> </variant-radios> {%- endunless -%} //product-variant-options {%- liquid assign variants_available_arr = product.variants | map: 'available' assign variants_option1_arr = product.variants | map: 'option1' assign variants_option2_arr = product.variants | map: 'option2' assign variants_option3_arr = product.variants | map: 'option3' assign product_form_id = 'product-form-' | append: section.id -%} {%- for value in option.values -%} {%- liquid assign option_disabled = true for option1_name in variants_option1_arr case option.position when 1 if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif when 2 if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif when 3 if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif endcase endfor -%} {% liquid assign variant_needed = null for variant in product.variants if variant.options contains value assign variant_needed = variant endif endfor %} <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="{{ product_form_id }}" {% if option.selected_value == value %} checked {% endif %} {% if option_disabled %} class="disabled" {% endif %} > {% if option.name == 'Color' %} <label class="color-swatch" style="background-color: {{ variant_needed.metafields.custom.color }}" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" > </label> {% else %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value }} </label> {% endif %} {%- endfor -%} //product list {%- assign product_form_id = 'product-form-' | append: section.id -%} <ul class="products-with-filter__content-products grid product-grid grid--3-col-desktop" data-id="{{ section.id }}" > {%- paginate collections.all.products by section.settings.products_per_page -%} {% for product in collections.all.products %} <li> ... <div class="variants-picker__list"> {% render 'custom-product-variant-picker', product: product, product_form_id: product_form_id %} </div> </li> {%- endpaginate -%} </ul> Run code snippetExpand snippet