Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

322
Visualizações
Shopify Liquid, loop through variants, onclick any variants image to show larger img in card

I'm on Shopify creating a page for the user to select a product variant, and have that variant selected to display on a larger featured_image to the left of the list of variants.

{% 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>

Thank you in advance!

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda