This is website https://malakaithelabel.com/ and on collection page or featured collection I want to keep selected first variant so that my website can show only gold color images by default using first variant selected if it is soldout only on collection page or featured colleciton section.
adding card-product.liquid code there
{% comment %}
Renders a product card
Accepts:
- product_ref: {Object} Product Liquid object
- collection_ref: {Object} Collection Liquid object
- class: {String} CSS class to apply to the card
- hide_actions: {Boolean} Hides tags, sizes and color swatches
- section_id: {String} Section id used to make the product id attribute unique
- card_index: {Number} Loop index
Usage:
{%- render ‘card-product’, product_ref: product_ref -%}
{% endcomment %}
{%- assign hide_actions = hide_actions | default: false -%}
{%- capture card_id -%}
{{- product_ref.id -}}-{{- section_id -}}-{{- card_index -}}
{%- endcapture -%}
{%- unless hide_actions -%}
{%- liquid
capture color_codes
render ‘color-codes-to-check’
endcapture
assign size_option_values = product_ref.options_by_name[settings.sizes_option].values
assign color_option_values = product_ref.options_by_name[settings.swatches_option].values
assign selected_variant = product_ref.selected_or_first_available_variant
assign quick_add_to_cart_button_html = ‘’
-%}
{%- if size_option_values != blank or color_option_values != blank -%}
{%- liquid
assign selected_variant_color = blank
assign looped_sizes = blank
assign looped_sizes_check = blank
assign looped_swatches = blank
assign size_items_html = ‘’
assign swatch_items_html = ‘’
assign variants_media = ‘’
assign variant_media_counter = 0
assign swatches_number = 0
assign swatches_limit = 4
for option_value in selected_variant.options
if color_option_values contains option_value
assign selected_variant_color = option_value
endif
if size_option_values contains option_value
assign selected_variant_size = option_value
endif
endfor
-%}
{%- for variant in product_ref.variants -%}
{%- comment -%} Wholesale_Club_Product_Visibility_For_Loop Start {%- endcomment -%}
{%- capture hide_resource -%}{% render “wc_product_visibility”, resource: variant %}{%- endcapture -%}
{%- if hide_resource == “true” -%}
{% continue %}
{%- endif -%}
{%- comment -%} Wholesale_Club_Product_Visibility_For_Loop End {%- endcomment -%}
{%- capture aria_disabled -%}
{%- if variant.available -%}false{%- else -%}true{%- endif -%}
{%- endcapture -%}
{%- assign forloop_index = forloop.index -%}
{%- for option_value in variant.options -%}
{%- comment -%} Wholesale_Club_Product_Visibility_For_Loop Start {%- endcomment -%}
{%- capture hide_resource -%}{% render “wc_product_visibility”, resource: option_value %}{%- endcapture -%}
{%- if hide_resource == “true” -%}
{% continue %}
{%- endif -%}
{%- comment -%} Wholesale_Club_Product_Visibility_For_Loop End {%- endcomment -%}
{%- if size_option_values contains option_value -%}
{%- liquid
if selected_variant_color != blank
unless variant.options contains selected_variant_color
continue
endunless
endif
assign option_value_check = ‘#’ | append: option_value | append: ‘#’
if looped_sizes_check contains option_value_check
continue
endif
assignment just for checking
assign looped_sizes_check = looped_sizes_check | append: option_value_check
assign looped_sizes = looped_sizes | append: option_value
-%}
{% if settings.quick_add_to_cart != ‘no_button’ %}
{%- capture size_item_html -%}
{% if settings.quick_add_to_cart == ‘basic_button’ %}
{%- assign size_items_html = size_item_html -%}
{% else %}
{%- assign size_items_html = size_items_html | append: size_item_html -%}
{% endif %}
{% endif %}
{%- elsif color_option_values contains option_value -%}
{%- liquid
if selected_variant_size != blank
unless variant.options contains selected_variant_size
continue
endunless
endif
if looped_swatches contains option_value
continue
endif
assign looped_swatches = looped_swatches | append: option_value
assign swatches_number = swatches_number | plus: 1
if swatches_number > swatches_limit
continue
endif
if variant.featured_media != blank
assign variant_media_counter = variant_media_counter | plus: 1
endif
if variant.featured_image != blank
capture variant_media
assign image_src=variant.featured_image | image_url: width: 660
assign image_alt = variant.featured_image.alt | escape
assign class = ‘js-media-’ | append: option_value | handleize
assign hide_noscript = true
if variant.id == selected_variant.id
assign class = class | append: ’ js-media-default is-visible’
endif
if forloop_index == 1
assign class = class | append: ’ is-first’
endif
render ‘image’, src: image_src, sizes: ‘auto’, alt: image_alt, width: variant.featured_image.width, height: variant.featured_image.height, class: class, hide_noscript: hide_noscript
if settings.card_product_image_hover and forloop_index == 1 and product_ref.media.size > 1
assign variant_hover_media = product_ref.media[1]
if variant_hover_media.media_type == ‘video’ or variant_hover_media.media_type == ‘external_video’
assign variant_hover_media = product_ref.media[2]
endif
if variant_hover_media != nil
assign hover_image_src=variant_hover_media | image_url: width: 660
assign hover_image_alt = variant_hover_media.alt | default: product_ref.title | escape
assign hover_class = ‘js-media-’ | append: option_value | handleize
assign hover_class = hover_class | append: ’ hover-img’
assign hide_noscript = true
render ‘image’, src: hover_image_src, sizes: ‘auto’, alt: hover_image_alt, width: variant_hover_media.width, height: variant_hover_media.height, class: hover_class, hide_noscript: hide_noscript
endif
endif
endcapture
if settings.product_swatches_on_card == false and variant_media_counter > 1
assign variants_media = variants_media
else
assign variants_media = variants_media | append: variant_media
endif
endif
-%}
{%- capture swatch_item_html -%}
render ‘product-swatch’, value: option_value, colors_for_check: color_codes, class: ‘swatch–sm swatch–hide-line card-product__swatch’, id: id, name: name, input_class: swatch_input_class
-%}
{%- assign swatch_items_html = swatch_items_html | append: swatch_item_html -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- if size_option_values != blank and settings.quick_add_to_cart != ‘no_button’ -%}
{%- capture quick_add_to_cart_button_html -%}
{{- 'products.card-product.add_to_cart_success' | t -}}
{{- 'products.card-product.add_to_cart_error' | t -}}
{% if settings.quick_add_to_cart != ‘no_button’ %}
-
{{ size_items_html }}
{%- if color_option_values != blank -%}
{%- capture swatch_number_item_html -%}
{%- if swatches_number > swatches_limit -%}
{%- assign hidden_swatches_number = swatches_number | minus: swatches_limit -%}
{%- capture product_swatches_html -%}
-
{{ swatch_items_html | append: swatch_number_item_html }}
{%- if quick_add_to_cart_button_html == blank and settings.quick_add_to_cart != ‘no_button’ -%}
{%- capture quick_add_to_cart_button_html -%}
{{- 'products.card-product.add_to_cart_success' | t -}}
{{- 'products.card-product.add_to_cart_error' | t -}}
{% if settings.quick_add_to_cart != ‘no_button’ %}
-
{%- assign first_available_variant = product_ref.selected_or_first_available_variant -%}
- {% if settings.quick_add_to_cart == 'basic_button' %} {{- 'products.card-product.add_to_cart' | t -}} {% else %} {{- 'products.card-product.add_to_cart' | t -}} {% endif %} {%- endcapture -%} {% if settings.quick_add_to_cart == 'basic_button' %} {%- assign quick_add_to_cart_button_html = quick_add_to_cart_button_item -%} {% else %} {%- assign quick_add_to_cart_button_html = quick_add_to_cart_button_html | append: quick_add_to_cart_button_item -%} {% endif %}
{%- capture quick_add_to_cart_button_item -%}
{{ quick_add_to_cart_button_html }}
{%- endif -%}
{%- endunless -%}
<card-product
class=“card-product {{ class }}{% if hide_actions %} disabled{% endif %} {{ card_product_layout }}”
data-handle=“{{- product_ref.handle -}}”
data-id=“{{- card_id -}}”
{% liquid
assign hover_media = product_ref.media[1]
if hover_media.media_type == ‘video’ or hover_media.media_type == ‘external_video’
assign hover_media = product_ref.media[2]
endif
%}
{% liquid
if product_ref.featured_image
assign image_src=product_ref.featured_image | image_url: width: 660
assign image_alt = product_ref.featured_image.alt | escape
comment
unless hide_actions
assign class = ‘hidden’
unless selected_variant.featured_image and color_option_values
assign class = ‘js-media-default is-visible’
endunless
endunless
endcomment
if hide_actions
assign class = ‘js-media-default is-visible’
else
if selected_variant.featured_image and color_option_values
assign class = ‘hidden’
else
assign class = ’ js-media-default is-visible’
endif
endif
render ‘image’, src: image_src, sizes: ‘auto’, alt: image_alt, width: product_ref.featured_image.width, height: product_ref.featured_image.height, class: class
if variants_media == blank
if settings.card_product_image_hover and product_ref.media.size > 1 and hover_media != nil
assign image_src=hover_media | image_url: width: 660
assign image_alt = hover_media.alt | default: product_ref.title | escape
assign class = ’ hover-img’
render ‘image’, src: image_src, sizes: ‘auto’, alt: image_alt, width: hover_media.width, height: hover_media.height, class: class
endif
endif
else
echo ‘image’ | placeholder_svg_tag
endif
%}
{% liquid
if variants_media contains ‘is-visible’
else
add ‘is-visible’ to the first variant image
assign variants_media = variants_media | replace: ‘is-first’, ‘is-visible is-first’
endif
%}
{{ variants_media }}
{%- if product_ref and product_ref != empty -%} {{- product_ref.title | escape -}} {%- else -%} {{- 'products.product.title' | t -}} {%- endif -%}
{%- render ‘price’, product_ref: product_ref, price_class: ‘card-product__price’ -%}
{%- unless hide_actions -%}
{%- unless hide_actions -%}
{%- if card_product_layout == ‘card-product__layout–standard’ -%}
{%- if settings.product_swatches_on_card -%}
{{ product_swatches_html }}
{%- endif -%}
{%- endif -%}
{%- endunless -%}