Estoy en Shopify creando una página para que el usuario seleccione una variante del producto y seleccione esa variante para mostrarla en una imagen destacada más grande a la izquierda de la lista de variantes.

 {% assign productsCollection = collections['include-in-gl-ss-bundle'] %} {% for p in productsCollection.products %} {% if p.available %} {% if p.type == "Stainless" %} {% assign first_available_ss = p %} {% break %} {% assign ss_collection = p %} {% endif %} {% endif %} {% endfor %} <!-- {% assign current = product.selected_or_first_available_variant %} --> <div class="custom-container"> <div class="customImg" > <img src="{{ first_available_ss.featured_image | product_img_url: 'large' }}" alt="{{ product.title }}" /> <div class="customDesign"> <img class="designImg" src="https://i.ibb.co/pZ9dtwL/imgbin-iron-man-logo-thanos-captain-america-superhero-png.png" alt="customDesign" /> </div> </div> <div class="custom-navigation"> <h4 class="headerTitle">Stainless Customizer</h4> <p class="subTitle">Customize Your Stainless with Lazer Etching</p> <ul class="accordion helpUl" style="list-style: none;"> <li class="step1 stepLi" onclick="showEl(1)"> <a href='javascript:void(0);' class='toggle'> <hr class="hrBorder"> <p class="stepSpan"> STEP 1: PICK YOUR JUG </p> <p id="step-show1" class="step-show" style="display: none">+</p> <p id="step-hide1" class="step-hide" style="display: inline-flex;">-</p> <hr class="hrBorder"> </a> <ul class="jugSelection inner"> {% for product in productsCollection.products %} {% if product.available %} {% if product.type == "Stainless" %} {% for variant in product.variants %} <img class="ssImg" src="{{ variant.featured_image | product_img_url: 'small' }}" alt="{{ product.title }}" /> {% endfor %} {% endif %} {% endif %} {% endfor %} </ul> </li> </ul> </div>

¡Gracias de antemano!