We Keep Coding

I want the product images on my shopify shop to pop out in the form of a modal for customers to view

Currently it only zooms on the product image when hovered over. I would like to keep this feature plus make the product image pop out.
I would like for when a customer clicks on a primary/thumbnail image it pops out and the customer can click an arrow to view more product images if there are multiple images attached to a product.
{% assign featured_media = product.images[1] | default: product.featured_image %}
{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div data-thumbnail-slider>
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="#"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>

Is there a way for me to adding link to an image on slide with luna template on bigcartel

I'm currently using a Luna theme from the big cartel website template. I am wondering if there is any way or coding I can use to make my image on the slide show clickable. I specially want it to lead my customers to certain product pages.

Yep! Hope this helps! :)
Copy and paste this into the custom code for your Home page. Change the links to your product pages that you'd like. Also, you can add more slides with links by repeating the code like I did.
{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider home-slideshow">
<ul class="slides">
{% for image in theme.image_sets.slideshow %}
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if theme.max_products_per_row == 4 %}
{% assign product_image_constrain_width = 255 %}
{% assign product_image_constrain_height = 255 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 3 %}
{% assign product_image_constrain_width = 346 %}
{% assign product_image_constrain_height = 346 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 2 %}
{% assign product_image_constrain_width = 526 %}
{% assign product_image_constrain_height = 526 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 1 %}
{% assign product_image_constrain_width = 1068 %}
{% assign product_image_constrain_height = 1068 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% endif %}
{% assign thumb_constrain_width = 30 %}
{% assign thumb_constrain_height = 30 %}
<h1 class="visually-hidden">Featured Products</h1>
{% if theme.featured_items > 0 %}
{% get products from products.all limit:theme.featured_items order:theme.featured_order %}
{% if products != blank %}
<div class="product-list-container">
<div class="product-list">
{% for product in products %}
{% assign product_status = '' %}
{% case product.status %}
{% when 'active' %}
{% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
{% when 'sold-out' %}
{% assign product_status = 'Sold out' %}
{% when 'coming-soon' %}
{% assign product_status = 'Coming soon' %}
{% endcase %}
{% capture image_class %}
{% if product.image.height > product.image.width %}
image-tall
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_height = '' %}
{% assign product_image_constrain_height_large = '' %}
{% assign thumb_constrain_height = '' %}
{% endif %}
{% elsif product.image.height < product.image.width %}
image-wide
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_width = '' %}
{% assign product_image_constrain_width_large = '' %}
{% assign thumb_constrain_width = '' %}
{% endif %}
{% else %}
image-square
{% endif %}
{% endcapture %}
<div class="product-list-thumb {{ theme.grid_image_style }} {{ theme.show_overlay }}">
<a class="product-list-link" href="{{ product.url }}" title="View {{ product.name | escape }}">
<div class="product-list-thumb-container">
<figure class="product-list-image-container">
<div class="image-wrapper">
<img alt="" class="lazy product-list-image {{ image_class }}" src="{{ product.image | product_image_url | constrain: thumb_constrain_width,thumb_constrain_height }}" data-src="{{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }}" data-srcset="{{ product.image | product_image_url | constrain: product_image_constrain_width_large, product_image_constrain_height_large }} 2x, {{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }} 1x">
</div>
</figure>
</div>
<div class="product-list-thumb-info">
<div class="product-list-item-background"></div>
<div class="product-list-thumb-info-headers">
<div class="product-list-thumb-name">{{ product.name }}</div>
<div class="product-list-thumb-price">
{% if product.variable_pricing %}
{{ product.min_price | money: theme.money_format }} - {{ product.max_price | money: theme.money_format }}
{% else %}
{{ product.default_price | money: theme.money_format }}
{% endif %}
{% if product_status != blank %}
<div class="product-list-thumb-status">{{ product_status }}</div>
{% endif %}
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="empty-products centered-message">No products found.</div>
{% endif %}
{% endget %}
{% endif %}

Trying to create slide show variants in shopify

I am new to shopify I am trying to create a website with a slide show variant. I have manage to write this code but I get the following error
Line 247 — Liquid syntax error: 'schema' tag must not be nested inside other tags.
The code is meant to create the variant into a slide show using the app flex app.
Does anyone know were i am going wrong ?
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-cart-enable-ajax="{{ settings.cart_enable_ajax }}" data-enable-history-state="true">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% comment %}
Get first variant in stock, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
<div class="grid product-single">
<div class="grid__item medium-up--one-half">
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
<div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
src="{{ image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% if product.compare_at_price_max > product.price %}
<span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
{% endif %}
</div>
{% endfor %}
<noscript>
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% if product.images.size > 1 %}
<ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">
{% case product.images.size %}
{% when 2 %}
{% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
{% when 4 %}
{% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
{% else %}
{% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
{% endcase %}
{% for image in product.images %}
<li class="grid__item {{ thumbnail_width }}">
<a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if section.settings.product_image_zoom_type == 'lightbox' %}
<ul class="gallery hidden">
{% for image in product.images %}
<li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="grid__item medium-up--one-half{% if product.images.size == 0%} medium-up--push-one-half{% endif %}">
<div class="product-single__meta small--text-center">
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% if section.settings.vendor_show %}
<p class="product-single__vendor" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
<p class="product-single__prices">
{% if product.compare_at_price_max > product.price %}
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-single__price--compare" id="ComparePrice">
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}
{% include 'product-unit-price', variant: current_variant, available: true %}
</p>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-single__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- assign productClasses = 'product-form' -%}
{%- if product.has_only_default_variant -%}
{%- assign productClasses = productClasses | append: ' product-form--default-variant-only' -%}
{%- endif -%}
{% form 'product', product, class: productClasses %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.product_quantity_enable %}
<div class="product-single__quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>
{% endif %}
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>
{% if section.settings.product_description_position == 'right' %}
{%- assign position = 'right' -%}
{% include 'product-description' %}
{% endif %}
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if section.settings.product_description_position == 'below' %}
{%- assign position = 'below' -%}
{% include 'product-description' %}
{% endif %}
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
{% if product.variants.size > 1 %}
<script>
(function($) {
var variantImages = {},
thumbnails,
variant,
variantImage,
variantImage_count = 0;
//produce mapping between variant image and options
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
variantImage_count++;
}
{% endfor %}
$(function() {
if (variantImage_count > 0) {
$('select.single-option-selector').change(function() {
var selected_color = $(this).val();
thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
if (typeof variantImages<div class="full"></div> !== 'undefined') {
if(selected_color == variantImages<div class="full"></div>['option-0']) {
//only check against the first option ['option-0'], which is Color (in my case)
$('.flexslider').flexslider(index);
}
}
});
});
}
});
})(jQuery);
</script>
}

The {% schema %} tag was introduced with Shopify's "sectioned themes". I can see that your shopify theme is using "Sections", because of all the reference to the section variable in your code!
Since searching for {% schema %} within your question code doesn't return any results, I have to conclude the syntax error is originating in a different file. (Probably one including your product.liquid file with a {% section 'product' %} directive.
In the Shopify theme docs about "Using theme sections", we see that the {% schema %} tag lives in templates that are inside of the sections/ folder in your theme's directory structure. In this case, I'd expect to find the nested tag causing the syntax error within sections/product.liquid.

How do I add links to variants of products in a product card (displayed on landing page and collections page) on Shopify?

On the landing page and collections page, below each product, I want the color variants to link to the variant with the color selected e.g. if I click on the red color, it takes me to the product page with the red variant selected. I managed to add the color variants but I don't know how to link them to the variants. The products also have sizes as they are clothes, so I want the XS size to be selected by default.
When the red variant is clicked, takes to the product page with variants with XS and Red selected.
When the black variant is clicked, takes to the product page with variants XS and Black selected.
When the black variant is clicked, takes to the product page with variants XS and White selected.
How do I dynamically add a link that redirects to the product page with XS + color clicked?
Source: https://cropshopboutique.com/
The code I have for the colors so far are:
color-option-row.liquid
<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
<div class="option-values">
{% for value in option.values %}
{% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
<a href="{{ product.url }}?variant={{ variant.id }}">
<label for="{{ radio_id }}">
{% if force_colors == true %}
{% include 'option-color' with color: value %}
{% else %}
{{ value }}
{% endif %}
</label>
</a>
{% endfor %}
</div>
</div>
color-variant-hover.liquid
{% assign has_multiple_variants = false %}
{% if product.variants.size > 1 %}
{% assign has_multiple_variants = true %}
{% endif %}
{% assign has_multiple_options = false %}
{% if product.options.size > 1 %}
{% assign has_multiple_options = true %}
{% endif %}
{% assign has_selected_variant = false %}
{% if product.selected_variant != nil %}
{% assign has_selected_variant = true %}
{% endif %}
{% if has_multiple_variants %}
{% include 'get-variants-with-quantity-json' with product: product %}
{% endif %}
{% assign can_add_to_cart = false %}
{% if has_selected_variant and product.selected_variant.available %}
{% assign can_add_to_cart = true %}
{% elsif has_multiple_variants == false and product.available %}
{% assign can_add_to_cart = true %}
{% endif %}
{% if has_multiple_options or has_multiple_variants %}
{% for option in product.options_with_values %}
{% assign option_name = 'option' | append: option.position %}
{% assign selected = false %}
{% if has_selected_variant %}
{% assign selected = product.selected_variant[option_name] %}
{% endif %}
{% assign default_variant = product.selected_or_first_available_variant %}
{% if option.name == 'Color' %}
<div class="option-colors">
{% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
</div>
{% elsif option.name == 'Pattern' %}
<div class="option-patterns">
{% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
</div>
{% else %}
<div class="dn">
{% include 'color-option-row' with option: option, option_name: option_name, type: 'select', selected: selected %}
</div>
{% endif %}
{% endfor %}
{% endif %}
<input class="js-variant-id" type="hidden" name="id" value="{{ default_variant.id }}">
featured-products.liquid
<div class="product-card fl w-50 w-25-l mb3 ph1 ph3-m ph3-l">
{% include 'product-card' %}
{% include 'color-variant-hover' %}
</div>

Try to update your color-option-row.liquid to the following:
<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
<div class="option-values">
{% for value in option.values %}
{% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
{%- for variant in product.variants -%}
{%- if variant.title contains value -%}
{%- assign productColorOptionURL = product.url | append: "?variant=" | append: variant.id -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<a href="{{ productColorOptionURL }}">
<label for="{{ radio_id }}">
{% if force_colors == true %}
{% include 'option-color' with color: value %}
{% else %}
{{ value }}
{% endif %}
</label>
</a>
{% endfor %}
</div>
</div>

Shopify - Change opacity sold out product's thumbnail

I would like to have an opacity applied to the thumbnail when an article is sold out, is it possible?
<div class="product-details">
{% if settings.display_vendor %}
<span itemprop="brand" class="brand">{{ product.vendor }}</span>
{% endif %}
<span class="title" itemprop="name">{{ product.title }}</span>
{% if collection_handles contains 'coming-soon' %}
<span class="modal_price">{{ 'collections.general.coming_soon' | t }}</span>
{% else %}
<span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
{% if product.available %}
{% if product.price_varies and product.price_min > 0 %}
<small><em>{{ 'products.general.from' | t }}</em></small>
{% endif %}
{% if product.price_min > 0 %}
<span class="money">{{ product.price_min | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
{% else %}
<span class="sold_out">UH OH, WE’RE OUT</span>
{% endif %}
{% if product.compare_at_price_max > product.price %}
<span class="was_price">
<span class="money">{{ product.compare_at_price_max | money }}</span>
</span>
{% endif %}
</span>
{% endif %}
{% if settings.enable_shopify_collection_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
</div>
Thank you so much for your help.