Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

315
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!