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!