Why does my SVG icon vanish when changing product variants?

Why does my SVG icon vanish when changing product variants?

Shockpain2
Excursionist
25 0 15

Hey guys,

I wanted to add an SVG Icon to my Add to cart button and it did work, however as soon as I take a different variant of the product the change disappears.
Is there maybe any HTML command to make it solid ?

My store: https://bamino.de/products/lampe

I am really happy for any help.

Sincerely Eddy.

Replies 22 (22)

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

sorry for this issue please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.ProductForm__AddToCart:hover path {
    fill: #b721ff; /* change color as you like */
}

 After Code view

KetanKumar_0-1621445311401.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Hey thank you so much for the help!

Unfortunately I haven't meant the hover effect, but the SVG on the button. As you select an different variant of the product the SVG is completely disappearing and also the size of the button is changing.

Shockpain2_0-1621510137635.png

Sincerely Eddy

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

oh i see please add code both condition if and else 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

This is the code 🙂

<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>&nbsp;{{- 'product.form.size_chart' | t -}}
</button>
{%- endif -%}
</span>

Thanks for you help!

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

thanks for code but its not a add to cart button code please check again 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Oh.. My bad!

<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>&nbsp;{% 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>

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

no rush can you please try this 

<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 -%}
<span>&nbsp;{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}
<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>
{{ '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>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Unfortunately the SVG is still disappearing 😕

 

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

oh sorry can you please any other condition about this add to cart?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

@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>&nbsp;{{- '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>
&nbsp;<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>

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

thanks for more detail

i think its ajax button issue please check your theme.js maybe allow 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Can you give me your email ? I will just invite you to my store. I could show you all liquid but it’s too long. I am not even sure what I should look for.

thank you so much for your help.

Sincerely Eddy.

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

yes, please check my signature 

For reference , this is what a collaborator access does: About collaborator permissions · Shopify Help Center

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Hey, can you send me a invitation to baminol.myshopify.com because on this store I face this issue.

Sincerely Eddy.

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

Yes, please check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

@KetanKumar I have accepted your request! I would be really happy about your help. If you solve this issue please tell me where you have changed it and what exactly, so I can help myself for the future with that issue! Thank you so much!

Sincerely Eddy

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

i have  done this theme please check

also check attachment where do i change

https://bamino.de/?fts=0&preview_theme_id=123067629756

Bamino™ _ Edit _ Bamino™ _ Shopify (1).pngBamino™ _ Edit _ Bamino™ _ Shopify (2).pngBamino™ _ Edit _ Bamino™ _ Shopify.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Hey, 

thank you so much! It is not disappearing anymore, however if you take a look with mobile it is unfortunately completely shifted and is a little too small as well as the button 😕 

Is there any code to make it align with every mobile user ? (IPhone, Samsung etc.)

Bildschirmfoto 2021-05-25 um 02.40.45.png

 

Sincerely Eddy.

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

sorry but why do you have remove my code i can't see now 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shockpain2
Excursionist
25 0 15

Good evening @KetanKumar ,

I havent removed the code, I have duplicated the theme. I am really sorry about the irritation... I hope you can help me 😕

Sincerely Eddy.

KetanKumar
Shopify Partner
37143 3648 12063

@Shockpain2 

ok fine i have update code now please check this theme 

https://bamino.de/?fts=0&preview_theme_id=123067629756

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
shaggyNRML
Shopify Partner
5 0 0

I’m having the same issue is there a fox for the dawn theme?