I created a modal and pasted code in product-template.liquid

[TheRealMan1]

I created a modal and pasted code in product-template.liquid

Now when I have pasted that code inside my template file and tried testing it. It automatically opens up add to cart page with modal pop up.

PFB liquid code i added and help me out of this.

“Note: i have red coloured to the changes i made for adding modal.”

{%- assign current_variant = product.selected_or_first_available_variant -%}
{% assign variantCount = product.variants | size %}

{% for media in product.media %} {% case media.media_type %} {% when 'image' %}

{% when 'external_video' %}

{{ media | external_video_tag: image_size: "1024x" }}

{% when 'video' %}

{{ media | video_tag: controls: true, image_size: "1024x" }}

{% when 'model' %}

{{ media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true, data-model-id: media.id, auto-rotate: true, id: 'paused-change-demo' }}

{% else %}

{{ media | media_tag }}

{% endcase %} {% endfor %}

{% if enable_compare_color and show_compare_color %}

{{ settings.compare_color_title }}

{% endif %}

{% render ‘product-label’, product: product, badge_detail: true, serial: 1 %}

{% if section.settings.enable_zoom_text %}

{{ 'products.product.text_zoom' | t }}

{% endif %}

{% if settings.enable_ask_an_expert %}

{% render 'multilang' with settings.ask_an_expert %}

{% endif %}

{% for media in product.media %} {% case media.media_type %} {% when 'image' %}

{% when 'external_video' %}

{% when 'video' %}

' | first }}" />

{% when 'model' %}

{{ media | model_viewer_tag: image_size: image_size, reveal: 'interaction', toggleable: true, data-model-id: media.id, auto-rotate: true }}

{% else %}

{{ media | media_tag }}

{% endcase %} {% endfor %}

{% render 'breadcrumb' %}

{% render 'multilang' with product.title %}

{% if collection %}

{% render 'next-prev-product' %}

{% endif %}

{% if section.settings.display_product_reviews or section.settings.show_sold_in %}

{% if section.settings.display_product_reviews %} {% endif %}

{% if section.settings.show_sold_in and current_variant.available %}

{% render 'icon-fire' %} 2 {% render 'multilang' with section.settings.item_prds %} 8 {% render 'multilang' with section.settings.item_hours %}

{% endif %}

{% endif %}

{% if section.settings.display_vendor or section.settings.display_availability or section.settings.display_product_sku or section.settings.display_product_type %}

{% if section.settings.display_vendor %}

{% if section.settings.text_vendor != blank %} {{ section.settings.text_vendor | split: '|' | first }} {% endif %} {{ product.vendor | link_to_vendor }}

{% endif %}

{% if section.settings.display_product_sku %}

{% if section.settings.text_product_sku != blank %} {{ section.settings.text_product_sku | split: '|' | first }} {% endif %} {{ current_variant.sku }}

{% endif %}

{% if section.settings.display_availability %}

{% if section.settings.text_availability != blank %} {{ section.settings.text_availability | split: '|' | first }} {% endif %} {% if current_variant.inventory_management %} {% assign first_inventory = current_variant.inventory_quantity %} {% if first_inventory > 0 %} {{first_inventory}} {{ 'products.product.in_stock' | t }} {% else %} {{ 'products.product.out_of_stock' | t }} {% endif %} {% else %} {{ 'products.product.many_in_stock' | t }} {% endif %}

{% endif %}

{% if section.settings.display_product_type %}

{% if section.settings.text_product_type != blank %} {{ section.settings.text_product_type | split: '|' | first }} {% endif %} {{ product.type | split: '|' | first }}

{% endif %}

{% endif %} {% if section.settings.enable_countdown %}

{% if section.settings.option_countdown == ‘all_product’ %}
{% assign count_down_final = section.settings.count_down_timer %}
{% if section.settings.countdown == ‘countdown_1’ %}

{% render 'multilang' with section.settings.text_countdown %}

{% else %}
{% render ‘countdown-progressbar’, count_down_final: count_down_final %}
{% endif %}

{% else %}

{% if product.metafields.c_f.countdown %}
{% capture count_down_final %}{{ product.metafields.c_f.countdown }}{% endcapture %}

{% if section.settings.countdown == ‘countdown_1’ %}

{% render 'multilang' with section.settings.text_countdown %}

{% else %} {% render 'countdown-progressbar', count_down_final: count_down_final %} {% endif %}

{% endif %}
{% endif %}

{% if section.settings.custombox_text != blank %}

{{ section.settings.custombox_text | split: '[lang2]' | first }}

{% endif %}

{% endif %}

{% if product.compare_at_price > product.price %} {{ product.compare_at_price_max | money }} {{ product.price | money }} {% else %} {{ product.price | money }} {% endif %}

{% if product.description contains '[countdown]' %} {% assign des = product.description | split:'[/countdown]' | last %} {% if des contains '[custom tab]'%} {% assign des = des | split:'[custom tab]' | first | split:'<iframe' | first %} {% endif %} {% else %} {% assign des = product.description %} {% if des contains '[custom tab]'%} {% assign des = des | split:'[custom tab]' | first | split:'<iframe' | first %} {% endif %} {% endif %}

{% if section.settings.show_desc == ‘short’ %}

{% if product.metafields.c_f[‘Short Description’] %}
{% assign des = product.metafields.c_f[‘Short Description’] %}
{% assign word_numbeer = 1000000000 %}

{{ des | split: '[lang2]' | first | replace: ' ', ' ' | truncatewords: word_numbeer }}

{% else %} {% assign word_numbeer = 50 %}

{{ des | split: '[lang2]' | first | strip_html | replace: ' ', ' ' | truncatewords: word_numbeer }}

{% endif %}

{% elsif section.settings.show_desc == ‘full’ %}

{{ des | split: '[lang2]' | first }}

{% endif %}

{% form ‘product’, product, id: “add-to-cart-form”, novalidate: ‘novalidate’ %}

{% if settings.display_size_chart %}

{% render 'multilang' with settings.size_guide_text %} {% endif %}

/* The Modal (background) /
.modal {
display: none; / Hidden by default /
position: fixed; / Stay in place /
z-index: 1; / Sit on top /
padding-top: 100px; / Location of the box /
left: 0px;
top: 0;
width: 100%; / Full width /
height: 100%; / Full height /
overflow: auto; / Enable scroll if needed /
background-color: rgb(0,0,0); / Fallback color /
background-color: rgba(0,0,0,0.4); / Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #000000;
margin: auto;
padding: 10px;
border: 1px solid #888;
width: 50%;
}

/* The Close Button */
.close {
color: #ffffff;
float: top;
font-size: 30px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #a7a7a7;
text-decoration: none;
cursor: pointer;
}

SHADE FINDER

×

{% if variantCount > 0 and product.variants[0].title != 'Default Title' %} {% for variant in product.variants %} {% if variant.available %} {{ variant.title }} {% else %} {{ variant.title }} - {{ 'products.product.sold_out' | t }} {% endif %} {% endfor %}

{% if settings.use_color_swatch %}
{% for option in product.options %}
{% render ‘swatch’ with option %}
{% endfor %}
{% endif %}

{% else %}

{% endif %}
{% if enable_hot_stock and product.variants.size > 0 and product.variants.first.title != ‘Default Title’ %}
{% assign max_stock = section.settings.number_stock | plus: 0 %}

{% if current_variant.inventory_management %} {% if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= max_stock %} {{ "products.product.stock_hot" | t | replace: '[inventory]', current_variant.inventory_quantity }} {% endif %} {% endif %}

{% endif %}

{% if settings.enable_checkbox %}

{% if current_variant.available and section.settings.display_qty %}

{% endif %}

{% if current_variant.available %}

{% if current_variant.inventory_management %}
{% assign first_inventory = current_variant.inventory_quantity %}

{% if first_inventory > 0 %}
<input data-btn-addToCart type=“submit” name=“add” class=“btn” {% if settings.enable_multilang %}data-translate=“products.product.add_to_cart”{%endif%} id=“product-add-to-cart” value=“{{ ‘products.product.add_to_cart’ | t }}” data-form-id=“#add-to-cart-form”>
{% else %}
<input data-btn-addToCart type=“submit” name=“add” class=“btn” {% if settings.enable_multilang %}data-translate=“products.product.pre_order”{%endif%} id=“product-add-to-cart” value=“{{ ‘products.product.pre_order’ | t }}” data-form-id=“#add-to-cart-form”>
{% endif %}

{% else %}
<input data-btn-addToCart type=“submit” name=“add” class=“btn” {% if settings.enable_multilang %}data-translate=“products.product.add_to_cart”{%endif%} id=“product-add-to-cart” value=“{{ ‘products.product.add_to_cart’ | t }}” data-form-id=“#add-to-cart-form”>
{% endif %}

{% else %}
<input type=“submit” name=“add” class=“btn” {% if settings.enable_multilang %}data-translate=“products.product.unavailable”{%endif%} id=“product-add-to-cart” disabled value=“{{ ‘products.product.unavailable’ | t }}” >
{% endif %}

{% render ‘wishlist-product’, skin_1: true, product: product %}

{% if section.settings.display_product_detail_share %}
{% render ‘icon-share’ %}
{% endif %}

{{settings.checkbox_text}} {% if settings.terms_conditions_text_link != blank %} {{ settings.terms_conditions_text_link }} {% endif %}

{% if section.settings.enable_payment_button and current_variant.available %} {{ form | payment_button }} {% endif %}

{{ 'products.product.copy_link' | t }}

{% render 'icon-close' %}

{% if section.settings.display_product_detail_share %} {% render 'share' with product %} {% endif %}

{% else %}

{% if product.available and section.settings.display_qty %}

{% endif %}

{% if current_variant.available %}

{% if current_variant.inventory_management %}
{% assign first_inventory = current_variant.inventory_quantity %}

{% if first_inventory > 0 %}

{% else %}

{% endif %}
{% else %}

{% endif %}

{% else %}

{% endif %}

{% render ‘wishlist-product’, skin-1: true, product: product %}

{% if section.settings.display_product_detail_share %}
{% render ‘icon-share’ %}
{% endif %}

{% if section.settings.enable_payment_button and current_variant.available %}
{{ form | payment_button }}
{% endif %}

{{ 'products.product.copy_link' | t }}

{% render 'icon-close' %}

{% if section.settings.display_product_detail_share %} {% render 'share' with product %} {% endif %}

{% endif %}

{% if section.settings.display_subtotal and product.available and section.settings.display_qty %}

{{ 'cart.general.subtotal' | t }}: {{ current_variant.price | money }}

{% endif %}

{% endform %}

{% render ‘nofify-sold-out’, product: product, variantCount: variantCount, current_variant: current_variant %}

{% if section.settings.dpl_customers_view %}

{{ section.settings.number_view | split: ',' | slice: 0 }} {% render 'multilang' with section.settings.title_view %}

{% endif %}

{% if section.settings.display_product_detail_tag %}

{{ 'blogs.article.tags' | t }}: {% for tag in product.tags %} / {% if settings.enable_multilang %} {{ tag | split: '|' | first }} {{ tag | split: '|' | last }} {% else %} {{ tag | split: '|' | first }} {% endif %} {% endfor %}

{% endif %}

{% if section.settings.display_trust_img and settings.img_trust != blank %}

{% endif %}

{% render ‘tab-vertical-for-skin-1’ %}

{% if section.settings.dpl_grouped_product %} {% if settings.layout_style == 'layout_style_1170' or settings.layout_style == 'layout_style_fullwidth' or settings.layout_style == 'layout_style_flower' %} {% render 'grouped-block-1170' %} {% else %} {% render 'grouped-block-2' %} {% endif %} {% endif %} {%- if section.settings.display_product_detail_description -%} {%- liquid assign des = product.description if des contains '[countdown]' or product.description contains '[custom tab]' assign des = product.description | split:'[/countdown]

' | last assign des = des | split:'[custom tab]' | first endif -%}

{% render 'multilang' with section.settings.product_description_title %}

{{ des }}

{% render ‘product-banner’ %}

{% render ‘product-detail-gallery_lookbook’%}

{%- endif -%}

{% if section.settings.display_product_reviews %}

{% render 'multilang' with section.settings.product_review_title %}

{{ product.metafields.spr.reviews }}

{% endif %}

{% assign blocks = section.blocks | where: ‘type’, ‘recommend’ %}
{% assign block = blocks[0] %}

{% if block.settings.display_related_products %}

{% render 'related-products', block: block, product: product %}

{% endif %}

[KetanKumar]

@TheRealMan1

please give me store url

[TheRealMan1]

https://www.therealman.in/products/skin-tint?variant=39714856468585#popup1

[TheRealMan1]

sir have you gon through the code