Why does my SVG icon vanish when changing product variants?

[Shockpain2]

@KetanKumar

I have copy pasted my whole product-form.liquid maybe that help

{%- 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 -%}

 {{- ‘product.form.size_chart’ | t -}}

{%- 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] -%}

  <input id=“option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}” class=“ColorSwatch__Radio” type=“radio” name=“option-{{ forloop.parentloop.index0 }}” value=“{{ value | escape }}” {% if value == option.selected_value %}checked=“checked”{% endif %} data-option-position=“{{ option.position }}”>
  
  {{ value }}
  

{%- endfor -%}

{%- elsif section.settings.selector_mode == 'block' -%}

{%- for value in option.values -%}
• {{ value }}
{%- endfor -%}

{%- else -%} {% unless show_option_label %}{{ option.name }}: {% endunless %}{{ option.selected_value }} {%- render 'icon' with 'select-arrow' -%}

{%- 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 -%}

{{- ‘product.form.select_model’ | t -}}

{%- else -%}

{% render 'icon' with 'close' %} {{ option.name | escape }}

{%- for value in option.values -%} {{- value | escape -}} {%- endfor -%}

{%- assign size_chart_page = pages[‘size-chart’] -%}

{%- if show_option_label == false and size_label contains downcase_option and size_chart_page != empty -%}

{{- ‘product.form.size_chart’ | t -}}

{%- endif -%}

{%- endif -%} {%- endcapture -%}

{%- assign product_popovers = product_popovers | append: popover_html -%}
{%- endif -%}

{%- endfor -%}

{%- render 'icon' with 'select-arrow' -%} {%- for variant in product.variants -%} {{ variant.title }} - {{ variant.price | money }} {%- endfor -%}

{%- 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 -%}

● Auf Lager - wird in 1-3 Werktagen versendet

<button type=“submit” class=“ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}Button–primary {% else %}Button–secondary{% endif %} Button–full” {% if selected_variant.available %}data-action=“add-to-cart”{% else %}disabled=“disabled”{% endif %}>
{%- if selected_variant.available -%}

 {% if product.template_suffix == ‘pre-order’ %}{{ ‘product.form.pre_order’ | t }}{% else %}{{ ‘product.form.add_to_cart’ | t }}{% endif %}

{%- if section.settings.show_price_in_button -%}

{{ selected_variant.price | money_without_trailing_zeros }}
{%- endif -%}
{%- else -%}
{{- ‘product.form.sold_out’ | t -}}
{%- endif -%}

---

{%- 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.title }}

{{- size_chart_page.content -}}

{% render ‘icon’ with ‘close’ %}

{%- endcapture -%} {%- endif -%}

{%- if section.settings.show_payment_button and selected_variant.available == false -%}

#shopify-section-{{ section.id }} .shopify-payment-button { display: none; }

{%- 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 %}