Hi, there I need help anyone can let me know what is wrong in my code, I added code to show variant images as swatches instead of colors in Prestige theme but, when I try to preview it shows url of image in assets but I added filter product.URL as well can you please help me that would be great.
I actually want to show color swatches images of product variant without uploading in files or assets like others theme has options as well.
I replace original code from this one background-image: url({{ variant.image.src | product_img_url: ‘24x’ }});
{
{%- comment -%}
Those are the option names for which we automatically detect swatch. For the color, we use them to display a swatch, while
for size, we use it to display a size chart (if applicable)
{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- assign size_label = 'size,taille,größe,tamanho,tamaño,koko,サイズ' | split: ',' -%}
{%- assign size_chart_page = '' -%}
{%- assign product_popovers = '' -%}
{%- assign show_option_label = false -%}
{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- form 'product', product, class: 'ProductForm' -%}
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- if section.settings.selector_mode == 'block' or color_label contains downcase_option and section.settings.show_color_swatch -%}
{%- assign show_option_label = true -%}
{%- endif -%}
{%- endfor -%}
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- capture popover_id -%}popover-{{ product.id }}-{{ section.id }}-{{ option.name | handle }}{%- endcapture -%}
{%- if show_option_label -%}
{%- assign size_chart_page = pages['size-chart'] -%}
{{ option.name }}:
{% if color_label contains downcase_option and section.settings.show_color_swatch %}
{{ option.selected_value }}
{% endif %}
{%- if size_label contains downcase_option and size_chart_page != empty -%}
{%- endif -%}
{%- endif -%}
{%- if color_label contains downcase_option and section.settings.show_color_swatch -%}
{%- for value in option.values -%}
{%- assign downcase_value = value | downcase -%}
- {%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
{%- endfor -%}
{%- elsif section.settings.selector_mode == 'block' -%}
{%- for value in option.values -%}
-
{%- endfor -%}
{%- else -%}
{%- capture popover_html -%}
{%- if color_label contains downcase_option and section.settings.show_color_carousel -%}
{%- for value in option.values -%}
{%- if value == option.selected_value -%}
{%- assign initial_image_index = forloop.index0 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- capture flickity_options -%}
{
"prevNextButtons": true,
"pageDots": true,
"initialIndex": {{ initial_image_index }},
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}
{%- capture option_index -%}option{{ option.position }}{%- endcapture -%}
{%- for value in option.values -%}
{%- for variant in product.variants -%}
{%- if variant[option_index] == value -%}
{%- assign variant_image = variant.image | default: product.featured_image -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,800', image: variant_image -%}{%- endcapture -%}
{%- assign image_url = variant_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endfor -%}
{%- for value in option.values -%}
{%- assign min_price_for_variant = product.price_max -%}
{%- for variant in product.variants -%}
{%- if variant[option_index] == value -%}
{%- assign min_price_for_variant = min_price_for_variant | at_most: variant.price -%}
{%- endif -%}
{%- endfor -%}
{%- assign downcase_value = value | downcase -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
{{ value }}
{%- if available_prices_for_option_value.size > 1 -%}
{%- capture formatted_min_price -%}{{ min_price_for_variant | money_without_trailing_zeros }}{%- endcapture -%}
{{ 'product.form.from_price_html' | t: min_price: formatted_min_price }}
{%- else -%}
{{ min_price_for_variant | money_without_trailing_zeros }}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for value in option.values -%}
{%- endfor -%}
{%- assign size_chart_page = pages['size-chart'] -%}
{%- if show_option_label == false and size_label contains downcase_option and size_chart_page != empty -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{%- assign product_popovers = product_popovers | append: popover_html -%}
{%- endif -%}
{%- endfor -%}
{%- render 'icon' with 'select-arrow' -%}
{%- else -%}
{%- endunless -%}
{%- if section.settings.show_quantity_selector -%}
{%- if show_option_label -%}
{{ 'product.form.quantity' | t }}:
{%- endif -%}
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}
{% render 'icon' with 'minus' %}
{% render 'icon' with 'plus' %}
{%- else -%}
{%- endif -%}
{%- if section.settings.show_inventory_quantity -%}
{%- assign hide_inventory_quantity_by_default = false -%}
{%- if selected_variant.inventory_management == blank or selected_variant.inventory_quantity <= 0 -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
{%- if section.settings.inventory_quantity_threshold != 0 and selected_variant.inventory_quantity > section.settings.inventory_quantity_threshold -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
{%- if section.settings.inventory_quantity_threshold == 0 -%}
{{- 'product.form.inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
{%- else -%}
{{- 'product.form.low_inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
{%- endif -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
ADD TO CART BUTTON
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if section.settings.show_payment_button and product.template_suffix != 'pre-order' -%}
{{ form | payment_button }}
{%- endif -%}
{%- endform -%}
{%- if size_chart_page != empty -%}
{%- comment -%}If we have a size chart we capture the modal content (it must be displayed outside the form for proper positioning){%- endcomment -%}
{%- capture product_modals -%}
{{- size_chart_page.content -}}
{%- endcapture -%}
{%- endif -%}
{%- if section.settings.show_payment_button and selected_variant.available == false -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
OFF SCREEN ELEMENTS
Implementation note: in the past (with "include") we could accumulate the data and output it outside the snippet
itself. However with the new "render" tag, everything that is captured inside cannot be used outside the snippet
itself. As a consequence we are moving them in JavaScript. This allows to make sure that those elements are upper
in the DOM tree, and do not show below the content
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{{- product_popovers -}}
{{- product_modals -}}
{% comment %}
------------------------------------------------------------------------------
Product Data. This must be outputted for all products (including home page).
IMPORTANT: THIS CODE IS VITAL. DO NOT EDIT IT NOT REMOVE IT. MAKE SURE TO KEEP
THE EXACT SAME ATTRIBUTES.
------------------------------------------------------------------------------
{% endcomment %}
