@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' -%}
<div class="ProductForm__Variants">
{%- 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 -%}
<div class="ProductForm__Option {% if show_option_label %}ProductForm__Option--labelled{% endif %}">
{%- if show_option_label -%}
{%- assign size_chart_page = pages['size-chart'] -%}
<span class="ProductForm__Label">
{{ option.name }}:
{% if color_label contains downcase_option and section.settings.show_color_swatch %}
<span class="ProductForm__SelectedValue">{{ option.selected_value }}</span>
{% endif %}
{%- if size_label contains downcase_option and size_chart_page != empty -%}
<button type="button" class="ProductForm__LabelLink Link Text--subdued" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 10"><path d="M24 16v-8h-24v8h24zm-22-6h5v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v4h-20v-4zm3 2c0 .552-.447 1-1 1s-1-.448-1-1 .447-1 1-1 1 .448 1 1z"/></svg> {{- 'product.form.size_chart' | t -}}
</button>
{%- endif -%}
</span>
{%- endif -%}
{%- if color_label contains downcase_option and section.settings.show_color_swatch -%}
<ul class="ColorSwatchList HorizontalList HorizontalList--spacingTight">
{%- for value in option.values -%}
{%- assign downcase_value = value | downcase -%}
<li class="HorizontalList__Item">
{%- 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 }}">
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch ColorSwatch--large {% if downcase_value == 'white' %}ColorSwatch--white{% endif %}" data-tooltip="{{ value | escape }}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
<span class="u-visually-hidden">{{ value }}</span>
</label>
</li>
{%- endfor -%}
</ul>
{%- elsif section.settings.selector_mode == 'block' -%}
<ul class="SizeSwatchList HorizontalList HorizontalList--spacingTight">
{%- for value in option.values -%}
<li class="HorizontalList__Item">
<input id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch__Radio" type="radio" name="option-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" {% if value == option.selected_value %}checked="checked"{% endif %} data-option-position="{{ option.position }}">
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch">{{ value }}</label>
</li>
{%- endfor -%}
</ul>
{%- else -%}
<button type="button" class="ProductForm__Item" aria-expanded="false" aria-controls="{{ popover_id }}">
<span class="ProductForm__OptionName">{% unless show_option_label %}{{ option.name }}: {% endunless %}<span class="ProductForm__SelectedValue">{{ option.selected_value }}</span></span>
{%- render 'icon' with 'select-arrow' -%}
</button>
{%- 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 -%}
<div id="{{ popover_id }}" class="VariantSelector" aria-hidden="true">
{%- capture option_index -%}option{{ option.position }}{%- endcapture -%}
<div class="VariantSelector__Carousel Carousel" data-flickity-config='{{ flickity_options }}'>
{%- 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 -%}
<div class="VariantSelector__Item Carousel__Cell {% if value == option.selected_value %}is-selected{% endif %}"
data-background-color="{{ value | split: ' ' | last | handle }}"
data-background-image="{{ value | handle | append: '.png' | asset_url }}"
data-option-position="{{ option.position }}"
data-option-value="{{ value | escape }}">
<div class="VariantSelector__ImageWrapper AspectRatio AspectRatio--withFallback" style="max-width: {{ variant_image.width }}px; padding-bottom: {{ 100.0 | divided_by: variant_image.aspect_ratio }}%; --aspect-ratio: {{ variant_image.aspect_ratio }}">
{%- 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.' -%}
<img class="VariantSelector__Image Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ variant_image.alt | escape }}">
<span class="Image__Loader"></span>
</div>
</div>
{%- endfor -%}
</div>
<div class="VariantSelector__Info">
<div class="VariantSelector__ChoiceList">
{%- 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 -%}
<div class="VariantSelector__Choice {% if value == option.selected_value %}is-selected{% endif %}">
<div class="VariantSelector__ChoiceColor">
{%- assign downcase_value = value | downcase -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<span class="VariantSelector__ColorSwatch {% if downcase_value == 'white' %}VariantSelector__ColorSwatch--white{% endif %}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}"></span>
<span class="VariantSelector__ChoiceValue">{{ value }}</span>
</div>
<div class="VariantSelector__ChoicePrice">
{%- if available_prices_for_option_value.size > 1 -%}
{%- capture formatted_min_price -%}<span>{{ min_price_for_variant | money_without_trailing_zeros }}</span>{%- endcapture -%}
<span class="Heading Text--subdued">{{ 'product.form.from_price_html' | t: min_price: formatted_min_price }}</span>
{%- else -%}
<span class="Heading Text--subdued">{{ min_price_for_variant | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
<button type="button" class="VariantSelector__Button Button Button--primary Button--full" data-action="select-variant">{{- 'product.form.select_model' | t -}}</button>
</div>
</div>
{%- else -%}
<div id="{{ popover_id }}" class="OptionSelector Popover Popover--withMinWidth" aria-hidden="true">
<header class="Popover__Header">
<button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
<span class="Popover__Title Heading u-h4">{{ option.name | escape }}</span>
</header>
<div class="Popover__Content">
<div class="Popover__ValueList" data-scrollable>
{%- for value in option.values -%}
<button type="button" class="Popover__Value {% if value == option.selected_value %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ value | escape }}"
data-option-position="{{ option.position }}"
data-action="select-value">
{{- value | escape -}}
</button>
{%- endfor -%}
</div>
{%- assign size_chart_page = pages['size-chart'] -%}
{%- if show_option_label == false and size_label contains downcase_option and size_chart_page != empty -%}
<button type="button" class="Popover__FooterHelp Heading Link Link--primary Text--subdued u-h6" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
{{- 'product.form.size_chart' | t -}}
</button>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endcapture -%}
{%- assign product_popovers = product_popovers | append: popover_html -%}
{%- endif -%}
</div>
{%- endfor -%}
<div class="no-js ProductForm__Option">
<div class="Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}
<select id="product-select-{{ product.id }}" name="id" title="Variant">
{%- for variant in product.variants -%}
<option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- else -%}
<input type="hidden" name="id" data-sku="{{ selected_variant.sku }}" value="{{ selected_variant.id }}">
{%- endunless -%}
{%- if section.settings.show_quantity_selector -%}
{%- if show_option_label -%}
<span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
{%- endif -%}
<div class="ProductForm__QuantitySelector">
<div class="QuantitySelector QuantitySelector--large">
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}
<span class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</span>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">
<span class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</span>
</div>
</div>
{%- else -%}
<input type="hidden" name="quantity" value="1">
{%- 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 -%}
<p class="ProductForm__Inventory Text--subdued" {% if hide_inventory_quantity_by_default %}style="display: none"{% 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 -%}
</p>
{%- endif -%}
</div>
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
ADD TO CART BUTTON
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<p style="text-align: left;"><span style="color: #339966;"><strong>● Auf Lager - wird in 1-3 Werktagen versendet</strong></span></p>
<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 -%}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.975 8l.025-.5c0-.517-.067-1.018-.181-1.5h5.993l-.564 2h-5.273zm-2.475 10c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm11.305-15l-3.432 12h-10.428l-.455-1.083c-.323.049-.653.083-.99.083-.407 0-.805-.042-1.191-.114l1.306 3.114h13.239l3.474-12h1.929l.743-2h-4.195zm-6.305 15c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm-4.5-10.5c0 2.485-2.018 4.5-4.5 4.5-2.484 0-4.5-2.015-4.5-4.5s2.016-4.5 4.5-4.5c2.482 0 4.5 2.015 4.5 4.5zm-2-.5h-2v-2h-1v2h-2v1h2v2h1v-2h2v-1z"fill="white"/></svg>
<span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>
{%- if section.settings.show_price_in_button -%}
<span class="Button__SeparatorDot"></span>
<span>{{ selected_variant.price | money_without_trailing_zeros }}</span>
{%- endif -%}
{%- else -%}
{{- 'product.form.sold_out' | t -}}
{%- endif -%}
</button>
<br>
<img src="https://cdn.shopify.com/s/files/1/0511/5409/2211/files/Bildschirmfoto_2020-12-20_um_22.26.51.png">
<img src="https://cdn.shopify.com/s/files/1/0511/5409/2211/files/Bildschirmfoto_2020-08-08_um_21.00.23.png">
<hr>
{%- 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 -%}
<div id="modal-{{ size_chart_page.handle }}" class="Modal Modal--dark Modal--fullScreen Modal--pageContent" aria-hidden="true" role="dialog" data-scrollable>
<header class="Modal__Header">
<h2 class="Modal__Title Heading u-h1">{{ size_chart_page.title }}</h2>
</header>
<div class="Modal__Content Rte">
<div class="Container Container--extraNarrow">
{{- size_chart_page.content -}}
</div>
</div>
<button class="Modal__Close RoundButton RoundButton--large" data-animate-bottom data-action="close-modal">{% render 'icon' with 'close' %}</button>
</div>
{%- endcapture -%}
{%- endif -%}
{%- if section.settings.show_payment_button and selected_variant.available == false -%}
<style>
#shopify-section-{{ section.id }} .shopify-payment-button {
display: none;
}
</style>
{%- 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 -%}
<div class="Product__OffScreen">
{{- product_popovers -}}
{{- product_modals -}}
</div>
{% 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 %}
<script type="application/json" data-product-json>
{
"product": {{ product | json }},
"selected_variant_id": {{ selected_variant.id }}
{%- if section.settings.show_inventory_quantity -%}
,"inventories": {
{%- for variant in product.variants -%}
{%- assign inventory_message = '' -%}
{%- if section.settings.inventory_quantity_threshold == 0 -%}
{%- capture inventory_message -%}{{- 'product.form.inventory_quantity_count' | t: count: variant.inventory_quantity -}}{%- endcapture -%}
{%- else -%}
{%- capture inventory_message -%}{{- 'product.form.low_inventory_quantity_count' | t: count: variant.inventory_quantity -}}{%- endcapture -%}
{%- endif -%}
"{{ variant.id }}": {
"inventory_management": {{ variant.inventory_management | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }},
"inventory_message": {{ inventory_message | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
}
{%- endif -%}
}
</script>
