Under featured product, I successfully used images for the variant thumbnails, now I would like to know how to add a captions to each of these image swatches. I.e 431 Baby Blue, so customer knows the name of the colour they selected. I’m using Dawn theme.
www.craftco.co.nz
nocturnal2024
You can use variant.title’s as caption in label.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!
How do I do that please?
@sammykennedy202
In the variant loop with which you are displaying the variant images, add the below code in Label tag
{{variant.title}}
You can update the styling as per your requirement.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!
Sorry, I just need some more info please. Is this to be inserted in the product-variant-options.liquid file?
Here it is below for reference;
{% comment %}
Renders product variant options
Accepts:
Usage:
{% render ‘product-variant-options’,
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: ‘available’
assign variants_option1_arr = product.variants | map: ‘option1’
assign variants_option2_arr = product.variants | map: ‘option2’
assign variants_option3_arr = product.variants | map: ‘option3’
assign product_form_id = ‘product-form-’ | append: section.id
-%}
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = ‘url(’ | append: image_url | append: ‘)’
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = ‘rgb(’ | append: value.swatch.color.rgb | append: ‘)’
else
assign swatch_value = null
endif
-%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture label_unavailable -%}
{{- ‘products.product.variant_sold_out_or_unavailable’ | t -}}
{%- endcapture -%}
{%- if picker_type == ‘swatch’ -%}
{% liquid
assign checked = false
if option.selected_value == value
assign checked = true
endif
%}
{%- capture help_text -%}
{{ value | escape }}
{{ label_unavailable }}
{%- endcapture -%}
{%
render ‘swatch-input’,
id: input_id,
name: option.name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: checked,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text
%}
{%- elsif picker_type == ‘button’ -%}
<input
type=“radio”
id=“{{ input_id }}”
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled”
{% endif %}
{% if product.variants[forloop.index0].image != blank and option.name == ‘Color’ %}
<label
for=“{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}”
style=“background-image: url({{ product.variants[forloop.index0].image | img_url: ‘’ }});height:60px;width:60px;background-size: cover;”
{% else %}
{{ value -}}
{{ ‘products.product.variant_sold_out_or_unavailable’ | t }}
{% endif %}
{%- elsif picker_type == ‘dropdown’ or picker_type == ‘swatch_dropdown’ -%}
Hi @sammykennedy202
Here’s the updated code for you
% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
- picker_type: {String} type of picker to dispay
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
-%}
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = null
endif
-%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture label_unavailable -%}
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
{%- endcapture -%}
{%- if picker_type == 'swatch' -%}
{% liquid
assign checked = false
if option.selected_value == value
assign checked = true
endif
%}
{%- capture help_text -%}
{{ value | escape }}
{{ label_unavailable }}
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: option.name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: checked,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text
%}
{%- elsif picker_type == 'button' -%}
{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %}
{% else %}
{% endif %}
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
{%- endif -%}
{%- endfor -%}
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!