Solved

"Add to Cart" button missing on product pages.

Ray89
Shopify Partner
10 0 3

Site link: https://tsz76pcwaozjddlb-17819333.shopifypreview.com
This is where I would like the button show.
Please help. Thank you.
ATC.JPG

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12269 2546 3692

This is an accepted solution.

@Ray89 

Please backup your Snippets/ product-form.liquid file code and replace following code 

{% comment %}
  Product form

  @param product

  @param selected_variant
{% endcomment %}

{% if is_product_modal and settings.quickshop_show_dcb %}
  {% assign quickshop_smart_buttons = true %}
{% endif %}

{% if is_product_modal == false and section.settings.show_dcb %}
  {% assign product_smart_buttons = true %}
{% endif %}

{% if selected_variant.available == false %}
  {% assign quickshop_smart_buttons = false %}
  {% assign product_smart_buttons = false %}
{% endif %}

{% assign product_form_class = '' %}
{% if product_smart_buttons or quickshop_smart_buttons %}
  {% assign product_form_class = 'smart-payment-enabled' %}
{% endif %}

{% form 'product', product, class: product_form_class, data-product-form: '' %}
  {% comment %}
    Display variant options for a product

    @param product
    @param selected_variant
    @param style

    @param enable_swatches
    @param swatches_shape
    @param swatches_option_trigger
    @param swatches_option_style
    @param swatches_product_page_size
    @param swatch_colors

    @param select_main_classes
    @param select_classes
    @param input_select_wrapper_classes
    @param input_select_classes
    @param input_select_label_classes
    @param input_select_chevron_classes

    @param radios_classes
    @param option_header_classes
    @param option_name_classes
    @param option_values_classes
    @param option_value_classes
    @param option_value_label_classes
    @param option_value_input_classes
    @param option_value_name_classes

    @param swatches_classes
    @param option_swatch_wrapper_classes
    @param option_swatch_classes
    @param option_swatch_inner_classes
  {% endcomment %}
  {% assign product = product %}
  {% assign selected_variant = selected_variant %}
  {% assign style = settings.product_option_style %}
  {% assign enable_swatches = settings.swatches_enable %}
  {% assign swatches_shape = settings.swatches_shape %}
  {% assign swatches_option_trigger = settings.swatches_swatch_trigger %}
  {% assign swatches_option_style = settings.swatches_option_style %}
  {% assign swatches_product_page_size = settings.swatches_product_page_size %}
  {% assign swatches_custom_colors = settings.swatches_custom_colors %}
  {% assign select_main_classes = 'form-options' %}
  {% assign select_classes = 'form-field form-options' %}
  {% assign input_select_wrapper_classes = 'form-field-select-wrapper' %}
  {% assign input_select_classes = 'form-field-input form-field-select' %}
  {% assign input_select_label_classes = 'form-field-title' %}
  {% assign radios_classes = 'form-options form-options-selectable-boxes' %}
  {% assign option_header_classes = 'option-header' %}
  {% assign option_name_classes = 'option-name' %}
  {% assign option_values_classes = 'option-values' %}
  {% assign option_value_classes = 'option-value' %}
  {% assign option_value_label_classes = 'option-value-label' %}
  {% assign option_value_input_classes = 'option-value-input' %}
  {% assign option_value_name_classes = 'option-value-name' %}
  {% assign swatches_classes = 'form-options form-options-swatches' %}
  {% assign option_swatch_wrapper_classes = 'option-value-name option-value-swatch-wrapper' %}
  {% assign option_swatch_classes = 'swatch' %}
  {% assign option_swatch_inner_classes = 'swatch-inner' %}

  {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui begin{% endcomment %}
  {% comment %}
    Display variant options for a product
  
    @param product
    @param selected_variant
    @param style
  
    @param enable_swatches
    @param swatches_shape
    @param swatches_option_trigger
    @param swatches_option_style
    @param swatches_product_page_size
    @param swatch_colors
  
    @param select_main_classes
    @param select_classes
    @param input_select_wrapper_classes
    @param input_select_classes
    @param input_select_label_classes
    @param input_select_chevron_classes
  
    @param radios_classes
    @param option_header_classes
    @param option_name_classes
    @param option_values_classes
    @param option_value_classes
    @param option_value_label_classes
    @param option_value_input_classes
    @param option_value_name_classes
  
    @param swatches_classes
    @param option_swatch_wrapper_classes
    @param option_swatch_classes
    @param option_swatch_inner_classes
  {% endcomment %}
  
  {% if product.has_only_default_variant %}
    <input
      class="
        variants-ui
        variants-ui--default-variant
      "
      name="id"
      type="hidden"
      value="{{ product.variants.first.id }}"
      data-variants-ui
      data-variants
    >
  {% else %}
    {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options begin{% endcomment %}
    {% comment %}
      Display variant options for a product
    
      @param product
      @param selected_variant
      @param style
    
      @param enable_swatches
      @param swatches_shape
      @param swatches_option_trigger
      @param swatches_option_style
      @param swatches_product_page_size
      @param swatch_colors
    
      @param select_main_classes
      @param select_classes
      @param input_select_wrapper_classes
      @param input_select_classes
      @param input_select_label_classes
      @param input_select_chevron_classes
    
      @param radios_classes
      @param option_header_classes
      @param option_name_classes
      @param option_values_classes
      @param option_value_classes
      @param option_value_label_classes
      @param option_value_input_classes
      @param option_value_name_classes
    
      @param swatches_classes
      @param option_swatch_wrapper_classes
      @param option_swatch_classes
      @param option_swatch_inner_classes
    {% endcomment %}
    
    {% assign hide_select_a11y = "" %}
    
    {% if style == 'radio' %}
      {% assign hide_select_a11y = "tabindex='-1'" %}
    {% endif %}
    
    {%- capture form_id -%}{% increment form_id %}{%- endcapture -%}
    
    <div
      class="
        variants-ui
        {%
          if enable_swatches
          and swatches_shape == 'square'
          and swatches_option_style == 'variant_image'
        %}
          variants-ui--swatches-square
        {% endif %}
      "
      data-variants-ui
    >
      <select
        class="
          variants-ui__select-main
          {{ select_main_classes }}
        "
        name="id"
        {{ hide_select_a11y }}
        data-variants
      >
        <option
          value=""
          disabled
          {% if selected_variant %}selected{% endif %}
        >
          {{ 'product.variants.choose_variant' }}
        </option>
        {% for variant in product.variants %}
          <option
            {% if selected_variant and selected_variant.id == variant.id %}selected{% endif %}
            value="{{ variant.id }}"
            {% unless variant.available %}disabled{% endunless %}
            data-variant-id="{{ variant.id }}"
            data-sku="{{ variant.sku }}"
          >
            <!-- Bold: Memberships (product price) -->
{% include 'bold-memberships-price' %}
{% if bold_hide_item == false %}
            {{ variant.title }} - {{ variant.price | money }}
            {% endif %}
<!-- end Bold code -->
          </option>
        {% endfor %}
      </select>
    
      {% for option in product.options_with_values %}
        {% assign option_index = forloop.index0 %}
        {% assign show_swatches = false %}
        {% if enable_swatches %}
          {%- assign swatches_option_trigger = swatches_option_trigger | strip | downcase -%}
          {%- assign option_name = option.name | strip | downcase -%}
    
          {% if option_name == swatches_option_trigger %}
            {% assign show_swatches = true %}
            {% assign swatch_option_key = 'option' | append: forloop.index %}
          {% endif %}
        {% endif %}
    
        {% if style == 'select' and show_swatches == false %}
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select begin{% endcomment %}
          {% comment %}
            Display variant options for a product
          
            @param selected_variant
          
            @param select_classes
            @param input_select_wrapper_classes
            @param input_select_classes
            @param input_select_label_classes
            @param input_select_chevron_classes
          {% endcomment %}
          
          <div
            class="
              variants-ui__select
              {% if forloop.first %}variants-ui__select--first{% endif %}
              {% if forloop.last %}variants-ui__select--last{% endif %}
              {{ select_classes }}
            "
          >
            <div
              class="
                variants-ui__input-select-wrapper
                {{ input_select_wrapper_classes }}
              "
            >
              <select
                id="data-variant-option-{{ option_index }}"
                class="
                  variants-ui__input-select
                  {{ input_select_classes }}
                "
                data-variant-option
                data-variant-option-index="{{ option_index }}"
                data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
              >
                {% unless selected_variant %}
                  <option
                    value=""
                    disabled
                    selected
                    data-variant-option-value-wrapper
                    data-variant-option-value
                    data-variant-option-value-index="{{ option_index }}"
                  >
                    {{ 'product.variants.choose_option' | t: option: option.name }}
                  </option>
                {% endunless %}
                {% for value in option.values %}
                  <option
                    value="{{ value | escape }}"
                    {% if selected_variant and option.selected_value == value %}selected{% endif %}
                    data-variant-option-value-wrapper
                    data-variant-option-value
                    data-variant-option-value-index="{{ option_index }}"
                  >
                    {{ value }}
                  </option>
                {% endfor %}
              </select>
              <label
                class="
                  variants-ui__input-select-label
                  {{ input_select_label_classes }}
                "
                for="data-variant-option-{{ forloop.index0 }}"
                data-variant-option-name="{{ option.name }}"
                data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
              >
                {% if selected_variant %}
                  {{ option.name }}
                {% else %}
                  {{ 'product.variants.choose_option' | t: option: option.name }}
                {% endif %}
              </label>
              <div
                class="
                  variants-ui__input-select-chevron
                  {{ input_select_chevron_classes }}
                "
              >
                <svg
                  aria-hidden="true"
                  focusable="false"
                  role="presentation"
                  width="8"
                  height="6"
                  viewBox="0 0 8 6"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
                  <path d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
                </svg>
              </div>
            </div>
          </div>
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select end{% endcomment %}
    
        {% elsif style == 'radio' or show_swatches == true %}
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios begin{% endcomment %}
          {% comment %}
            Display variant options for a product
          
            @param selected_variant
          
            @param radios_classes
            @param option_header_classes
            @param option_name_classes
            @param option_values_classes
            @param option_value_classes
            @param option_value_label_classes
            @param option_value_input_classes
            @param option_value_name_classes
          
            @param swatches_classes
            @param option_swatch_wrapper_classes
            @param option_swatch_classes
            @param option_swatch_inner_classes
          {% endcomment %}
          
          <fieldset
            class="
              {% unless show_swatches %}
                variants-ui__radios
                {% if forloop.first %}variants-ui__radios--first{% endif %}
                {% if forloop.last %}variants-ui__radios--last{% endif %}
                {{ radios_classes }}
              {% else %}
                variants-ui__swatches
                {{ swatches_classes }}
                {% if forloop.first %}variants-ui__swatches--first{% endif %}
                {% if forloop.last %}variants-ui__swatches--last{% endif %}
              {% endunless %}
            "
          >
            <legend
              class="
                variants-ui__option-header
                {{ option_header_classes }}
              "
            >
              <span
                class="
                  variants-ui__option-name
                  {{ option_name_classes }}
                "
                data-variant-option-name="{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value | escape }}"
                data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
              >
                {% if selected_variant %}
                  {{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value }}
                {% else %}
                  {{ 'product.variants.choose_option' | t: option: option.name }}
                {% endif %}
              </span>
            </legend>
          
            <div
              class="
                variants-ui__option-values
                {{ option_values_classes }}
              "
              data-variant-option
              data-variant-option-index="{{ option_index }}"
              data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
            >
              {% for value in option.values %}
                <div
                  class="
                    variants-ui__option-value
                    {% if selected_variant and option.selected_value == value %}variants-ui__option-value--selected{% endif %}
                    {{ option_value_classes }}
                  "
                  data-variant-option-value-wrapper
                >
                  <label
                    class="
                      variants-ui__option-value-label
                      {{ option_value_label_classes }}
                    "
                    for="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
                  >
                    <input
                      id="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
                      class="
                        variants-ui__option-value-input
                        {{ option_value_input_classes }}
                      "
                      type="radio"
                      name="{{ option.name | url_encode }}"
                      value="{{ value | escape }}"
                      tabindex="0"
                      aria-label="{{ value | escape }}"
                      {% if selected_variant and option.selected_value == value %}checked{% endif %}
                      data-variant-option-value
                      data-variant-option-value-index="{{ option_index }}"
                    >
          
                    <span
                      class="
          
                        {% unless show_swatches %}
                          variants-ui__option-value-name
                          {{ option_value_name_classes }}
                        {% else %}
                          variants-ui__option-swatch-wrapper
                          {{ option_swatch_wrapper_classes }}
                        {% endunless %}
                      "
                      tabindex="-1"
                      {% if show_swatches %}
                        data-swatch-tooltip="{{ value | escape }}"
                      {% endif %}
                    >
                      {% unless show_swatches %}
                        {{ value }}
                      {% else %}
                        {% assign use_variant_images = false %}
                        {% if swatches_option_style == 'variant_image' %}
                          {% assign use_variant_images = true %}
                        {% endif %}
                        {% assign use_aspect_ratio = false %}
                        {% if swatches_shape == 'square' %}
                          {% assign use_aspect_ratio = true %}
                        {% endif %}
                        {% capture swatch_styles %}
                          {% assign color_name = value %}
                          {% assign use_variant_images = use_variant_images %}
                          {% assign swatch_product = product %}
                          {% assign swatch_option_key = swatch_option_key %}
                          {% assign swatch_size = swatches_product_page_size %}
                          {% assign use_aspect_ratio = use_aspect_ratio %}
                          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles begin{% endcomment %}
                          {%- capture _ -%}
                            {% comment %}
                              @param color_name {string}
                                Color name for which to find a suitable background
                          
                              @param use_variant_images {boolean} [Optional - required if using variant images]
                                Use variant images as pattern images instead of the standard manual pattern images.
                          
                              @param swatch_product {product} [Optional - required if using variant images]
                                Product from which to use variant images.
                          
                              @param swatch_option_key {string} [Optional - required if using variant images]
                                option that contains swatch variants, one of `option1`, `option2`, or `option3`.
                          
                              @param swatch_size {integer} [Optional - required if using variant images]
                                Pixel height of swatch.
                          
                              @param use_aspect_ratio {boolean} [Optional]
                                Set swatch aspect ratio based on variant image?
                          
                              Outputs a string CSS background properties
                            {% endcomment %}
                          
                            {%- assign use_variant_images = use_variant_images | default: false -%}
                            {%- assign swatch_product = swatch_product | default: blank -%}
                            {%- assign swatch_option_key = swatch_option_key | default: blank -%}
                            {%- assign swatch_size = swatch_size | default: 32 -%}
                            {%- assign use_aspect_ratio = use_aspect_ratio | default: true, allow_false: true -%}
                          
                            {%- assign swatch_bg_color = blank -%}
                            {%- assign swatch_bg_image = blank -%}
                            {%- assign swatch_bg_variables = blank -%}
                            {%- assign swatch_colors = swatches_custom_colors -%}
                          
                            {% comment %} First look for a defined custom color {% endcomment %}
                            {%- assign swatch_colors = swatch_colors | newline_to_br | strip_newlines | split: '<br />' -%}
                            {%- assign swatch_search_color = color_name | downcase -%}
                            {%- for swatch_option in swatch_colors -%}
                              {%- assign swatch_color = swatch_option | split: ':' -%}
                              {%- assign swatch_color_name = swatch_color[0] | strip | downcase -%}
                              {%- assign swatch_color_value = swatch_color[1] | strip -%}
                              {%- if swatch_search_color == swatch_color_name -%}
                                {% capture swatch_bg_color %}
                                  background-color: {{ swatch_color_value }};
                                {% endcapture %}
                                {%- break -%}
                              {%- endif -%}
                            {%- endfor -%}
                          
                            {% comment %} Otherwise default to the raw color name, which will either be a
                            valid named HTML color and displayed as such, or will be ignored by the browser. {% endcomment %}
                            {%- if swatch_bg_color == blank -%}
                              {% capture swatch_bg_color %}
                                background-color: {{ color_name | handleize }};
                              {% endcapture %}
                            {%- endif -%}
                          
                            {%- if use_variant_images and swatch_product != blank and swatch_option_key != blank -%}
                              {% for variant in swatch_product.variants %}
                                {% assign option_value_downcased = variant[swatch_option_key] | downcase %}
                                {% if option_value_downcased == swatch_search_color %}
                                  {% if variant.image != blank %}
                                    {%- assign swatch_image_resolution = swatch_size | times: 2 | prepend: 'x' -%}
                                    {%- assign swatch_file_url = variant.image | img_url: swatch_image_resolution, crop: 'center' -%}
                                    {%- assign swatch_height = swatch_size | times: 1.0 -%}
                                    {%- assign swatch_width = swatch_size | times: 1.0 -%}
                                    {%- if use_aspect_ratio -%}
                                      {%- assign swatch_width = swatch_size | times: variant.image.aspect_ratio -%}
                                    {%- endif -%}
                                    {%- capture swatch_bg_image -%}
                                      background-image: url('{{- swatch_file_url  -}}');
                                      width: {{ swatch_width }}px;
                                      border: 0; {% comment %}Variant image swatches don't get inset borders{% endcomment %}
                                    {%- endcapture -%}
                                    {%- assign selected_border_offset = 2 | times: 2 -%}
                                    {%- capture swatch_bg_variables -%}
                                      --swatch-inner-transform-x: {{ swatch_width | minus: selected_border_offset | divided_by: swatch_width }};
                                      --swatch-inner-transform-y: {{ swatch_height | minus: selected_border_offset | divided_by: swatch_height }};
                                    {%- endcapture -%}
                                  {% endif %}
                                  {%- break -%}
                                {% endif %}
                              {% endfor %}
                            {%- else -%}
                              {% comment %} Then look for a pattern image. {% endcomment %}
                              {% assign swatch_file_name = color_name | downcase | handleize | append: '.png' %}
                              {%- if images[swatch_file_name] != blank -%}
                                {%- capture swatch_image_resolution -%}{{ swatch_size | times: 2 }}x{{ swatch_size | times: 2 }}{%- endcapture -%}
                                {%- assign swatch_file_url = swatch_file_name | file_img_url: swatch_image_resolution, crop: 'center' -%}
                                {%- capture swatch_bg_image -%}
                                  background-image: url('{{- swatch_file_url  -}}');
                                {%- endcapture -%}
                              {%- endif -%}
                            {%- endif -%}
                          
                          {%- endcapture -%}
                          {{ swatch_bg_color }}
                          {{ swatch_bg_image }}
                          /* variables */
                          {{ swatch_bg_variables }}
                          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles end{% endcomment %}
          
                        {% endcapture %}
                        <div
                          class="
                            variants-ui__option-swatch
                            {{ option_swatch_classes }}
                          "
                          style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */' }}"
                        >
                          <div
                            class="
                              variants-ui__option-swatch-inner
                              {{ option_swatch_inner_classes }}
                            "
                            style="{{ swatch_styles | split: '/* variables */' | first }}"
                          >
                          </div>
                        </div>
                      {% endunless %}
                    </span>
                  </label>
                </div>
              {% endfor %}
            </div>
          </fieldset>
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios end{% endcomment %}
    
        {% endif %}
      {% endfor %}
    </div>
    {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options end{% endcomment %}
  
  {% endif %}
  {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui end{% endcomment %}


  <div class="product-form--atc">
    <div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
      <div class="form-field form-field--qty-select">
        <div class="form-field-select-wrapper">
          <select
            id="product-quantity-select"
            class="form-field-input form-field-select"
            aria-label="{{ 'general.general.quantity' | t }}"
            data-quantity-select
          >
            {% for i in (1..9) %}
              <option {% if i == 1 %}selected {% endif %}value="{{ i }}">
                {{ i }}
              </option>
            {% endfor %}
            <option value="10+">
              10+
            </option>
          </select>
          <label
            for="product-quantity-select"
            class="form-field-title"
          >
            {{ 'general.general.quantity' | t }}
          </label>
          {% render 'icon-chevron-down-small' %}
        </div>
      </div>
      <div class="form-field form-field--qty-input hidden">
        <input
          id="product-quantity-input"
          class="form-field-input form-field-number form-field-filled"
          value="1"
          name="quantity"
          type="text"
          pattern="\d*"
          aria-label="{{ 'general.general.quantity' | t }}"
          data-quantity-input
        >
        <label
          for="product-quantity-input"
          class="form-field-title"
        >
          {{ 'general.general.quantity' | t }}
        </label>
      </div>
    </div>
<!-- Bold: Memberships (cadd to cart) -->
 {% include 'bold-memberships-addtocart' %}   
    <button
      class="product-form--atc-button {% if selected_variant and selected_variant.available == false %}disabled{% endif %}"
      type="submit"
      {% if selected_variant and selected_variant.available == false %}disabled{% endif %}
      data-product-atc
    >
      <span class="atc-button--text">
        {% unless selected_variant and selected_variant.available == false %}
          {{ 'product.buttons.add_to_cart' | t }}
        {% else %}
          {{ 'product.buttons.sold_out' | t }}
        {% endunless %}
      </span>
      <span class="atc-button--icon">
        {%- render 'icon-spinner' -%}
      </span>
    </button>
<!-- end Bold code -->
  </div>

  {% if product_smart_buttons or quickshop_smart_buttons %}
    {% if product.metafields.product_customizer == empty %}{{ form | payment_button }}{% endif %}
  {% endif %}


  <div class="surface-pick-up" data-surface-pick-up></div>
{% endform %}

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 16 (16)

Zworthkey
Shopify Partner
5581 642 1564

@Ray89 
hey It's your theme issue.
I can help you to fix it.

if you are interested please contact us.
Thank you.

dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

some liquid error in your product templete file please share your theme zip file.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

 

@dmwwebartisan 

<!doctype html>
<html class="no-js no-touch" lang="{{ shop.locale }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <link rel="preconnect" href="https://cdn.shopify.com">
    <link rel="preconnect" href="https://fonts.shopifycdn.com">
    <link rel="preconnect" href="https://v.shopify.com">
    <link rel="preconnect" href="https://cdn.shopifycloud.com">

    <title>
      {{- page_title -}}

      {%- if current_tags -%}
        {% capture cat_array %}{%- render 'advanced-tag-loop' -%}{% endcapture %}
        {% assign cat_array = cat_array | split: '|' %}
        {% assign title_tags = '' %}
        {% assign meta_tags = current_tags | join: ', ' %}
        {%- for tag in current_tags -%}
          {% assign is_advanced_tag = false %}
          {% assign cat = tag | split: '_' | first %}

          {%- unless cat == tag -%}
            {%- if cat_array contains cat -%}
              {% assign is_advanced_tag = true %}
              {% assign title_tags = title_tags | append: ', ' | append: tag | replace_first: '_', ': ' %}
            {%- endif -%}
          {%- endunless -%}

          {%- unless is_advanced_tag -%}
            {% assign title_tags = title_tags | append: ', ' | append: tag %}
          {%- endunless -%}
        {%- endfor -%}
        {{ 'general.title.tags' | t: tags: title_tags | remove_first: ', ' }}
      {%- endif -%}

      {%- if current_page != 1 -%}
        {{- 'general.title.page' | t: page: current_page -}}
      {%- endif -%}

      {%- unless page_title contains shop.name -%}
        {{- 'general.title.shop' | t: shop: shop.name -}}
      {%- endunless -%}
    </title>

    {% if page_description != blank %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'favicon' %}

    {% if template contains 'collection' and current_tags %}
      <meta name="robots" content="noindex" />
      <link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
    {% else %}
      <link rel="canonical" href="{{ canonical_url }}" />
    {% endif %}

    <meta name="viewport" content="width=device-width">

    {% assign twitter_handle = settings.social_twitter | split: 'twitter.com/' | last %}
    {%
      render 'social-meta-tags',
      twitter_handle: twitter_handle
    %}

    <link rel="preload" href="{{ settings.type_menu | font_url }}" as="font" crossorigin="anonymous">
    <link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">

    {{ content_for_header }}

    {{ 'theme.css' | asset_url | stylesheet_tag }}

    {% comment %}Inject theme-object begin{% endcomment %}
    <script>
      window.Theme = window.Theme || {};
      window.Theme.routes = {
        "root_url": "{{ routes.root_url }}",
        "account_url": "{{ routes.account_url }}",
        "account_login_url": "{{ routes.account_login_url }}",
        "account_logout_url": "{{ routes.account_logout_url }}",
        "account_register_url": "{{ routes.account_register_url }}",
        "account_addresses_url": "{{ routes.account_addresses_url }}",
        "collections_url": "{{ routes.collections_url }}",
        "all_products_collection_url": "{{ routes.all_products_collection_url }}",
        "search_url": "{{ routes.search_url }}",
        "cart_url": "{{ routes.cart_url }}",
        "cart_add_url": "{{ routes.cart_add_url }}",
        "cart_change_url": "{{ routes.cart_change_url }}",
        "cart_clear_url": "{{ routes.cart_clear_url }}",
        "product_recommendations_url": "{{ routes.product_recommendations_url }}",
      };
    </script>
    {% comment %}Inject theme-object end{% endcomment %}
  {{ 'shopstorm-apps.scss.css' | asset_url | stylesheet_tag }}
  {% render 'shopstorm-scripttags' %}

<script>
window.mlvedaShopCurrency = "{{ shop.currency }}";
window.shopCurrency = "{{ shop.currency }}";
window.supported_currencies = "{{ settings.mlvedaACS_supportedCurrencies }}";
</script></head>
<body class="template-{{ template.name }}" data-instant-allow-query-string {% if settings.reduce_animations %}data-reduce-animations{% endif %}>
  <!-- Bold: Memberships -->
{% if customer %}
<div class="bold_customer_id" hidden>{{ customer.id }}</div>
{% endif %}
<!-- end Bold code --> 
  <script>
      document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'js');
      if(window.Shopify&&window.Shopify.designMode)document.documentElement.className+=' in-theme-editor';
      if(('ontouchstart' in window)||window.DocumentTouch&&document instanceof DocumentTouch)document.documentElement.className=document.documentElement.className.replace(/\bno-touch\b/,'has-touch');
    </script>
    <a class="skip-to-main" href="#site-main">{{ 'general.accessibility.skip_to_content' | t }}</a>
    {% section 'static-announcement' %}
    <header
      class="site-header site-header-nav--open"
      role="banner"
      data-site-header
    >
      {% section 'static-header' %}
    </header>
    <div class="intersection-target" data-header-intersection-target></div>
    <div class="site-main-dimmer" data-site-main-dimmer></div>
    <main id="site-main" class="site-main" aria-label="Main content" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'static-footer' %}

    {% comment %}
      Below are various templates used in JavaScript
    {% endcomment %}
    <div style="display: none;" aria-hidden="true" data-templates>
      {% comment %}Inject message-banner begin{% endcomment %}
      <div
        class="message-banner--container"
        role="alert"
        data-message-banner
      >
        <div class="message-banner--outer">
          <div class="message-banner--inner" data-message-banner-content></div>
      
          <button
            class="message-banner--close"
            type="button"
            aria-label="{{ 'general.accessibility.close' | t }}"
            data-message-banner-close
          >
            {%- render 'icon-menu-close' -%}
          </button>
        </div>
      </div>
      {% comment %}Inject message-banner end{% endcomment %}

      {% comment %}Inject atc-banner begin{% endcomment %}
      <section class="atc-banner--container" role="log" data-atc-banner>
        <div class="atc-banner--outer">
          <div class="atc-banner--inner">
            <div class="atc-banner--product">
              <h2 class="atc-banner--product-title">
                <span class="atc-banner--product-title--icon">
                  {%- render 'icon-checkmark' -%}
                </span>
                {{ 'add_to_cart_banner.general.product_added' | t }}
              </h2>
      
              <div class="atc--product">
                <div class="atc--product-image" data-atc-banner-product-image>
                  {{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
                </div>
                <div class="atc--product-details">
                  <h2 class="atc--product-details--title" data-atc-banner-product-title></h2>
                  <span class="atc--product-details--options" data-atc-banner-product-options></span>
                  <span class="atc--product-details--price">
                    <span class="atc--product-details--price-quantity" data-atc-banner-product-price-quantity></span>
                    <span class="atc--product-details--price-value money" data-atc-banner-product-price-value></span>
                    <span class="atc--product-details--price-discounted money" data-atc-banner-product-price-discounted></span>
                    <span class="atc--product-details--unit-price hidden" data-atc-banner-unit-price>
                      {{ 'product_price.price.price_per_unit_html' | t: total_quantity: '** total_quantity **', unit_price: '** unit_price **', unit_measure: '** unit_measure **' }}
                    </span>
                  </span>
                  <ul class="discount-list" data-atc-banner-product-discounts>
                    <li class="discount-list-item">
                      {% render 'icon-library', id: 'icon-sale-tag' %}
                      <span class="discount-title"></span>
                      (-<span class="money discount-amount"></span>)
                    </li>
                  </ul>
                </div>
              </div>
            </div>
      
            <div class="atc-banner--cart">
              <div class="atc-banner--cart-subtotal">
                <span class="atc-subtotal--label">
                  {{ 'add_to_cart_banner.general.sub_total' | t }}
                </span>
                <span class="atc-subtotal--price money" data-atc-banner-cart-subtotal></span>
              </div>
      
              <footer class="atc-banner--cart-footer">
                <a class="button-secondary atc-button--viewcart" href="{{ routes.cart_url }}" data-atc-banner-cart-button>
                  {{ 'add_to_cart_banner.general.view_cart_html' | t: count: '<span></span>' }}
                </a>
                <form
                  action="{{ routes.cart_url }}"
                  method="post"
                  aria-label="cart checkout"
                >
                  <button class="button-primary atc-button--checkout" type="submit" name="checkout">
                    {% if settings.enable_checkout_lock_icon %}
                      {% render 'icon-checkout-lock' %}
                    {% endif %}
                    <span>{{ 'add_to_cart_banner.general.checkout' | t }}</span>
                  </button>
                </form>
              </footer>
            </div>
          </div>
      
          <button
            class="atc-banner--close"
            type="button"
            aria-label="{{ 'general.accessibility.close' | t }}"
            data-atc-banner-close
          >
            {%- render 'icon-menu-close' -%}
          </button>
        </div>
      </section>
      {% comment %}Inject atc-banner end{% endcomment %}

    </div>

    {% comment %}
      Modal container, used on Collections, Password, and QuickShop
    {% endcomment %}
    {% comment %}Inject modal begin{% endcomment %}
    <div class="modal" data-modal-container aria-label="modal window" data-trap-focus>
      <div class="modal-inner" data-modal-inner>
        <button
          class="modal-close"
          type="button"
          aria-label="{{ 'general.accessibility.close' | t }}"
          data-modal-close
        >
          {% render 'icon-menu-close' %}
        </button>
        <div class="modal-content" data-modal-content></div>
      </div>
    </div>
    
    <div class="modal-1" data-modal-container-1 aria-label="modal window">
      <div class="modal-inner" data-modal-inner>
        <button
          class="modal-close"
          type="button"
          aria-label="{{ 'general.accessibility.close' | t }}"
          data-modal-1-close
        >
          {% render 'icon-menu-close' %}
        </button>
        <div class="modal-content" data-modal-content></div>
      </div>
    </div>
    {% comment %}Inject modal end{% endcomment %}


    {% comment %}
      This is the PhotoSwipe dialog which needs to be in the base page
    {% endcomment %}
    {% comment %}Inject product-gallery-zoom begin{% endcomment %}
    {% comment %} Root element of PhotoSwipe. Must have class pswp. {% endcomment %}
    <div
      class="pswp"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
      aria-label="{{ 'general.accessibility.product_zoom_dialog' | t }}"
      data-photoswipe
    >
    
      {% comment %} Background of PhotoSwipe.
            It's a separate element as animating opacity is faster than rgba(). {% endcomment %}
      <div class="pswp__bg"></div>
    
      {% comment %} Slides wrapper with overflow:hidden. {% endcomment %}
      <div class="pswp__scroll-wrap">
          {% comment %} Container that holds slides.
              PhotoSwipe keeps only 3 of them in the DOM to save memory.
              Don't modify these 3 pswp__item elements, data is added later on. {% endcomment %}
          <div class="pswp__container" aria-hidden="true">
              <div class="pswp__item"></div>
              <div class="pswp__item"></div>
              <div class="pswp__item"></div>
          </div>
    
          {% comment %} Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. {% endcomment %}
          <div class="pswp__ui pswp__ui--hidden">
              <div class="pswp__top-bar">
                  {% comment %}  Controls are self-explanatory. Order can be changed. {% endcomment %}
                  <div class="pswp__counter"></div>
                  <button class="pswp__button pswp__button--close" title="{{ 'general.accessibility.close' | t }}">
                    <span tabindex="-1">
                      {% render 'icon-library', id: 'icon-close' %}
                    </span>
                  </button>
                  <button class="pswp__button pswp__button--share" title="Share"></button>
                  <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                  <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    
                  {% comment %} Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR {% endcomment %}
                  {% comment %} element will get class pswp__preloader--active when preloader is running {% endcomment %}
                  <div class="pswp__preloader">
                      <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                          <div class="pswp__preloader__donut"></div>
                        </div>
                      </div>
                  </div>
              </div>
    
              <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                  <div class="pswp__share-tooltip"></div>
              </div>
    
              <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
              </button>
              <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
              </button>
    
              <div class="pswp__caption">
                  <div class="pswp__caption__center"></div>
              </div>
          </div>
      </div>
      <div class="product-zoom--thumbnails" data-photoswipe-thumbs>
        <button
          class="gallery-navigation--scroll-button scroll-left"
          aria-label="Scroll thumbnails left"
          data-gallery-scroll-button
        >
          {% render 'icon-chevron-down' %}
        </button>
        <button
          class="gallery-navigation--scroll-button scroll-right"
          aria-label="Scroll thumbnails right"
          data-gallery-scroll-button
        >
          {% render 'icon-chevron-down' %}
        </button>
        <div class="product-zoom--thumb-scroller" data-photoswipe-thumb-scroller></div>
      </div>
    </div>
    {% comment %}Inject product-gallery-zoom end{% endcomment %}


    {%- if template contains 'customer' -%}
      {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
      {{ 'customer_area.js' | shopify_asset_url | script_tag }}
    {%- endif -%}

    {% unless settings.reduce_animations %}
      <script>
        (
          function () {
            var classes = {
              block: 'pxu-lia-block',
              element: 'pxu-lia-element',
            };

            document
              .querySelectorAll('[type="application/pxs-animation-mapping+json"]')
              .forEach(function (mappingEl) {
                const section = mappingEl.parentNode;
                try {
                  const mapping = JSON.parse(mappingEl.innerHTML);
                  mapping.elements.forEach(function (elementSelector) {
                    section
                      .querySelectorAll(elementSelector)
                      .forEach(function (element) { element.classList.add(classes.element); });
                  });

                  mapping.blocks.forEach(function (blockSelector) {
                    section
                      .querySelectorAll(blockSelector)
                      .forEach(function (block) { block.classList.add(classes.block); });
                  });
                } catch (error) {
                  console.warn('Unable to parse animation mapping', mappingEl, error);
                }
            });
          }
        )()
      </script>
    {% endunless %}

    <script
      src="{{ 'empire.js' | asset_url }}"
      data-scripts
      data-shopify-api-url="{{ 'api.jquery.js' | shopify_asset_url }}"
      data-shopify-countries="/services/javascripts/countries.js"
      data-shopify-common="{{ 'shopify_common.js' | shopify_asset_url }}"
      data-shopify-cart="{{ 'jquery.cart.js' | asset_url }}"
      data-pxu-polyfills="{{ 'polyfills.js' | asset_url }}"
    >
    </script>

    {% render 'structured-data' %}

    <script>
    (function () {
      function handleFirstTab(e) {
        if (e.keyCode === 9) { // the "I am a keyboard user" key
          document.body.classList.add('user-is-tabbing');
          window.removeEventListener('keydown', handleFirstTab);
        }
      }
      window.addEventListener('keydown', handleFirstTab);
    })();
    </script>

    {% unless settings.reduce_animations %}
      {{ 'ripple.css' | asset_url | stylesheet_tag }}
    {% endunless %}

    <script
      src="{{ 'instantPage.min.js' | asset_url }}"
      type="module"
      defer
    >
    </script>
   {% render 'product-customizer-asw' %}
  {% include 'mlveda-currencies-switcher' %}{% include 'mlveda-currencies' %}{% include 'mlveda-flag' %}{% include 'mlveda-currencies-style' %}<!-- WPD Start -->
                {% if customer.tags.size > 0 and template != 'cart' %}
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                      let checkoutbtninterval = setInterval(function(){
                        var x=document.querySelectorAll("input[name='checkout'], button[name='checkout'], input[name='goto_pp'], button[name='goto_pp'], input[name='goto_gc'], button[name='goto_gc'], [href$='checkout']");
                        var WPD_RedirectToCart = function(e) {
                          	e.stopPropagation();
                            e.preventDefault();
                            window.location = '/cart';
                            };
                            for (var i = 0; i < x.length; i++) {
                                x[i].addEventListener('click', WPD_RedirectToCart, false);
                            }
},500)
                });
              </script>
               {% endif %}
         

               {% if customer.tags.size > 0 and template == 'cart' %}
                 {% include 'wcp_cart' %}
               {% endif %}
               <!-- WPD End -->
  </body>
</html>

 

dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

Please comment following code and check your site 

{% if customer.tags.size > 0 and template == 'cart' %}
                 {% include 'wcp_cart' %}
               {% endif %}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

@dmwwebartisan still not working

dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

Please share your theme zip file . 

Means download your theme files and send to me .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

@dmwwebartisan Hi I'm new to this. And I already shared the codes.

dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

this is single file . 

Please check this url  for theme download

https://avada.io/shopify/docs/how-download-themes-shopify.html

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

@dmwwebartisan Please check. TY

https://fullyamped.myshopify.com/admin/files/b62f1a87c816ffa7094598ab6170b206/theme_export__www-fullyamped-com-site-that-has-issues__02AUG2021-0718am.zip/download
dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

This is admin url  not working without login please download you and send to me  .zip file

https://fullyamped.myshopify.com/admin/files/b62f1a87c816ffa7094598ab6170b206/theme_export__www-fullyamped-com-site-that-has-issues__02AUG2021-0718am.zip/download

Thanks!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

@dmwwebartisan Please check 

https://drive.google.com/drive/folders/1QZ0u5WM2-s3SZuCij-wxqMIAmcIPUp46?usp=sharing
suyash1
Shopify Partner
9031 1123 1482

@Ray89 - can you please add me as collaborator? I will check code and fix the issue

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
dmwwebartisan
Shopify Partner
12269 2546 3692

This is an accepted solution.

@Ray89 

Please backup your Snippets/ product-form.liquid file code and replace following code 

{% comment %}
  Product form

  @param product

  @param selected_variant
{% endcomment %}

{% if is_product_modal and settings.quickshop_show_dcb %}
  {% assign quickshop_smart_buttons = true %}
{% endif %}

{% if is_product_modal == false and section.settings.show_dcb %}
  {% assign product_smart_buttons = true %}
{% endif %}

{% if selected_variant.available == false %}
  {% assign quickshop_smart_buttons = false %}
  {% assign product_smart_buttons = false %}
{% endif %}

{% assign product_form_class = '' %}
{% if product_smart_buttons or quickshop_smart_buttons %}
  {% assign product_form_class = 'smart-payment-enabled' %}
{% endif %}

{% form 'product', product, class: product_form_class, data-product-form: '' %}
  {% comment %}
    Display variant options for a product

    @param product
    @param selected_variant
    @param style

    @param enable_swatches
    @param swatches_shape
    @param swatches_option_trigger
    @param swatches_option_style
    @param swatches_product_page_size
    @param swatch_colors

    @param select_main_classes
    @param select_classes
    @param input_select_wrapper_classes
    @param input_select_classes
    @param input_select_label_classes
    @param input_select_chevron_classes

    @param radios_classes
    @param option_header_classes
    @param option_name_classes
    @param option_values_classes
    @param option_value_classes
    @param option_value_label_classes
    @param option_value_input_classes
    @param option_value_name_classes

    @param swatches_classes
    @param option_swatch_wrapper_classes
    @param option_swatch_classes
    @param option_swatch_inner_classes
  {% endcomment %}
  {% assign product = product %}
  {% assign selected_variant = selected_variant %}
  {% assign style = settings.product_option_style %}
  {% assign enable_swatches = settings.swatches_enable %}
  {% assign swatches_shape = settings.swatches_shape %}
  {% assign swatches_option_trigger = settings.swatches_swatch_trigger %}
  {% assign swatches_option_style = settings.swatches_option_style %}
  {% assign swatches_product_page_size = settings.swatches_product_page_size %}
  {% assign swatches_custom_colors = settings.swatches_custom_colors %}
  {% assign select_main_classes = 'form-options' %}
  {% assign select_classes = 'form-field form-options' %}
  {% assign input_select_wrapper_classes = 'form-field-select-wrapper' %}
  {% assign input_select_classes = 'form-field-input form-field-select' %}
  {% assign input_select_label_classes = 'form-field-title' %}
  {% assign radios_classes = 'form-options form-options-selectable-boxes' %}
  {% assign option_header_classes = 'option-header' %}
  {% assign option_name_classes = 'option-name' %}
  {% assign option_values_classes = 'option-values' %}
  {% assign option_value_classes = 'option-value' %}
  {% assign option_value_label_classes = 'option-value-label' %}
  {% assign option_value_input_classes = 'option-value-input' %}
  {% assign option_value_name_classes = 'option-value-name' %}
  {% assign swatches_classes = 'form-options form-options-swatches' %}
  {% assign option_swatch_wrapper_classes = 'option-value-name option-value-swatch-wrapper' %}
  {% assign option_swatch_classes = 'swatch' %}
  {% assign option_swatch_inner_classes = 'swatch-inner' %}

  {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui begin{% endcomment %}
  {% comment %}
    Display variant options for a product
  
    @param product
    @param selected_variant
    @param style
  
    @param enable_swatches
    @param swatches_shape
    @param swatches_option_trigger
    @param swatches_option_style
    @param swatches_product_page_size
    @param swatch_colors
  
    @param select_main_classes
    @param select_classes
    @param input_select_wrapper_classes
    @param input_select_classes
    @param input_select_label_classes
    @param input_select_chevron_classes
  
    @param radios_classes
    @param option_header_classes
    @param option_name_classes
    @param option_values_classes
    @param option_value_classes
    @param option_value_label_classes
    @param option_value_input_classes
    @param option_value_name_classes
  
    @param swatches_classes
    @param option_swatch_wrapper_classes
    @param option_swatch_classes
    @param option_swatch_inner_classes
  {% endcomment %}
  
  {% if product.has_only_default_variant %}
    <input
      class="
        variants-ui
        variants-ui--default-variant
      "
      name="id"
      type="hidden"
      value="{{ product.variants.first.id }}"
      data-variants-ui
      data-variants
    >
  {% else %}
    {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options begin{% endcomment %}
    {% comment %}
      Display variant options for a product
    
      @param product
      @param selected_variant
      @param style
    
      @param enable_swatches
      @param swatches_shape
      @param swatches_option_trigger
      @param swatches_option_style
      @param swatches_product_page_size
      @param swatch_colors
    
      @param select_main_classes
      @param select_classes
      @param input_select_wrapper_classes
      @param input_select_classes
      @param input_select_label_classes
      @param input_select_chevron_classes
    
      @param radios_classes
      @param option_header_classes
      @param option_name_classes
      @param option_values_classes
      @param option_value_classes
      @param option_value_label_classes
      @param option_value_input_classes
      @param option_value_name_classes
    
      @param swatches_classes
      @param option_swatch_wrapper_classes
      @param option_swatch_classes
      @param option_swatch_inner_classes
    {% endcomment %}
    
    {% assign hide_select_a11y = "" %}
    
    {% if style == 'radio' %}
      {% assign hide_select_a11y = "tabindex='-1'" %}
    {% endif %}
    
    {%- capture form_id -%}{% increment form_id %}{%- endcapture -%}
    
    <div
      class="
        variants-ui
        {%
          if enable_swatches
          and swatches_shape == 'square'
          and swatches_option_style == 'variant_image'
        %}
          variants-ui--swatches-square
        {% endif %}
      "
      data-variants-ui
    >
      <select
        class="
          variants-ui__select-main
          {{ select_main_classes }}
        "
        name="id"
        {{ hide_select_a11y }}
        data-variants
      >
        <option
          value=""
          disabled
          {% if selected_variant %}selected{% endif %}
        >
          {{ 'product.variants.choose_variant' }}
        </option>
        {% for variant in product.variants %}
          <option
            {% if selected_variant and selected_variant.id == variant.id %}selected{% endif %}
            value="{{ variant.id }}"
            {% unless variant.available %}disabled{% endunless %}
            data-variant-id="{{ variant.id }}"
            data-sku="{{ variant.sku }}"
          >
            <!-- Bold: Memberships (product price) -->
{% include 'bold-memberships-price' %}
{% if bold_hide_item == false %}
            {{ variant.title }} - {{ variant.price | money }}
            {% endif %}
<!-- end Bold code -->
          </option>
        {% endfor %}
      </select>
    
      {% for option in product.options_with_values %}
        {% assign option_index = forloop.index0 %}
        {% assign show_swatches = false %}
        {% if enable_swatches %}
          {%- assign swatches_option_trigger = swatches_option_trigger | strip | downcase -%}
          {%- assign option_name = option.name | strip | downcase -%}
    
          {% if option_name == swatches_option_trigger %}
            {% assign show_swatches = true %}
            {% assign swatch_option_key = 'option' | append: forloop.index %}
          {% endif %}
        {% endif %}
    
        {% if style == 'select' and show_swatches == false %}
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select begin{% endcomment %}
          {% comment %}
            Display variant options for a product
          
            @param selected_variant
          
            @param select_classes
            @param input_select_wrapper_classes
            @param input_select_classes
            @param input_select_label_classes
            @param input_select_chevron_classes
          {% endcomment %}
          
          <div
            class="
              variants-ui__select
              {% if forloop.first %}variants-ui__select--first{% endif %}
              {% if forloop.last %}variants-ui__select--last{% endif %}
              {{ select_classes }}
            "
          >
            <div
              class="
                variants-ui__input-select-wrapper
                {{ input_select_wrapper_classes }}
              "
            >
              <select
                id="data-variant-option-{{ option_index }}"
                class="
                  variants-ui__input-select
                  {{ input_select_classes }}
                "
                data-variant-option
                data-variant-option-index="{{ option_index }}"
                data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
              >
                {% unless selected_variant %}
                  <option
                    value=""
                    disabled
                    selected
                    data-variant-option-value-wrapper
                    data-variant-option-value
                    data-variant-option-value-index="{{ option_index }}"
                  >
                    {{ 'product.variants.choose_option' | t: option: option.name }}
                  </option>
                {% endunless %}
                {% for value in option.values %}
                  <option
                    value="{{ value | escape }}"
                    {% if selected_variant and option.selected_value == value %}selected{% endif %}
                    data-variant-option-value-wrapper
                    data-variant-option-value
                    data-variant-option-value-index="{{ option_index }}"
                  >
                    {{ value }}
                  </option>
                {% endfor %}
              </select>
              <label
                class="
                  variants-ui__input-select-label
                  {{ input_select_label_classes }}
                "
                for="data-variant-option-{{ forloop.index0 }}"
                data-variant-option-name="{{ option.name }}"
                data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
              >
                {% if selected_variant %}
                  {{ option.name }}
                {% else %}
                  {{ 'product.variants.choose_option' | t: option: option.name }}
                {% endif %}
              </label>
              <div
                class="
                  variants-ui__input-select-chevron
                  {{ input_select_chevron_classes }}
                "
              >
                <svg
                  aria-hidden="true"
                  focusable="false"
                  role="presentation"
                  width="8"
                  height="6"
                  viewBox="0 0 8 6"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
                  <path d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>
                </svg>
              </div>
            </div>
          </div>
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-select end{% endcomment %}
    
        {% elsif style == 'radio' or show_swatches == true %}
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios begin{% endcomment %}
          {% comment %}
            Display variant options for a product
          
            @param selected_variant
          
            @param radios_classes
            @param option_header_classes
            @param option_name_classes
            @param option_values_classes
            @param option_value_classes
            @param option_value_label_classes
            @param option_value_input_classes
            @param option_value_name_classes
          
            @param swatches_classes
            @param option_swatch_wrapper_classes
            @param option_swatch_classes
            @param option_swatch_inner_classes
          {% endcomment %}
          
          <fieldset
            class="
              {% unless show_swatches %}
                variants-ui__radios
                {% if forloop.first %}variants-ui__radios--first{% endif %}
                {% if forloop.last %}variants-ui__radios--last{% endif %}
                {{ radios_classes }}
              {% else %}
                variants-ui__swatches
                {{ swatches_classes }}
                {% if forloop.first %}variants-ui__swatches--first{% endif %}
                {% if forloop.last %}variants-ui__swatches--last{% endif %}
              {% endunless %}
            "
          >
            <legend
              class="
                variants-ui__option-header
                {{ option_header_classes }}
              "
            >
              <span
                class="
                  variants-ui__option-name
                  {{ option_name_classes }}
                "
                data-variant-option-name="{{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value | escape }}"
                data-variant-option-choose-name="{{ 'product.variants.choose_option' | t: option: option.name }}"
              >
                {% if selected_variant %}
                  {{ 'product.variants.chosen_option_html' | t: option: option.name, value: option.selected_value }}
                {% else %}
                  {{ 'product.variants.choose_option' | t: option: option.name }}
                {% endif %}
              </span>
            </legend>
          
            <div
              class="
                variants-ui__option-values
                {{ option_values_classes }}
              "
              data-variant-option
              data-variant-option-index="{{ option_index }}"
              data-variant-option-chosen-value="{% if selected_variant %}{{ option.selected_value }}{% else %}false{% endif %}"
            >
              {% for value in option.values %}
                <div
                  class="
                    variants-ui__option-value
                    {% if selected_variant and option.selected_value == value %}variants-ui__option-value--selected{% endif %}
                    {{ option_value_classes }}
                  "
                  data-variant-option-value-wrapper
                >
                  <label
                    class="
                      variants-ui__option-value-label
                      {{ option_value_label_classes }}
                    "
                    for="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
                  >
                    <input
                      id="{{ section.id }}-form-{{ form_id }}-variant-option-{{ option_index }}-{{ forloop.index0 }}"
                      class="
                        variants-ui__option-value-input
                        {{ option_value_input_classes }}
                      "
                      type="radio"
                      name="{{ option.name | url_encode }}"
                      value="{{ value | escape }}"
                      tabindex="0"
                      aria-label="{{ value | escape }}"
                      {% if selected_variant and option.selected_value == value %}checked{% endif %}
                      data-variant-option-value
                      data-variant-option-value-index="{{ option_index }}"
                    >
          
                    <span
                      class="
          
                        {% unless show_swatches %}
                          variants-ui__option-value-name
                          {{ option_value_name_classes }}
                        {% else %}
                          variants-ui__option-swatch-wrapper
                          {{ option_swatch_wrapper_classes }}
                        {% endunless %}
                      "
                      tabindex="-1"
                      {% if show_swatches %}
                        data-swatch-tooltip="{{ value | escape }}"
                      {% endif %}
                    >
                      {% unless show_swatches %}
                        {{ value }}
                      {% else %}
                        {% assign use_variant_images = false %}
                        {% if swatches_option_style == 'variant_image' %}
                          {% assign use_variant_images = true %}
                        {% endif %}
                        {% assign use_aspect_ratio = false %}
                        {% if swatches_shape == 'square' %}
                          {% assign use_aspect_ratio = true %}
                        {% endif %}
                        {% capture swatch_styles %}
                          {% assign color_name = value %}
                          {% assign use_variant_images = use_variant_images %}
                          {% assign swatch_product = product %}
                          {% assign swatch_option_key = swatch_option_key %}
                          {% assign swatch_size = swatches_product_page_size %}
                          {% assign use_aspect_ratio = use_aspect_ratio %}
                          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles begin{% endcomment %}
                          {%- capture _ -%}
                            {% comment %}
                              @param color_name {string}
                                Color name for which to find a suitable background
                          
                              @param use_variant_images {boolean} [Optional - required if using variant images]
                                Use variant images as pattern images instead of the standard manual pattern images.
                          
                              @param swatch_product {product} [Optional - required if using variant images]
                                Product from which to use variant images.
                          
                              @param swatch_option_key {string} [Optional - required if using variant images]
                                option that contains swatch variants, one of `option1`, `option2`, or `option3`.
                          
                              @param swatch_size {integer} [Optional - required if using variant images]
                                Pixel height of swatch.
                          
                              @param use_aspect_ratio {boolean} [Optional]
                                Set swatch aspect ratio based on variant image?
                          
                              Outputs a string CSS background properties
                            {% endcomment %}
                          
                            {%- assign use_variant_images = use_variant_images | default: false -%}
                            {%- assign swatch_product = swatch_product | default: blank -%}
                            {%- assign swatch_option_key = swatch_option_key | default: blank -%}
                            {%- assign swatch_size = swatch_size | default: 32 -%}
                            {%- assign use_aspect_ratio = use_aspect_ratio | default: true, allow_false: true -%}
                          
                            {%- assign swatch_bg_color = blank -%}
                            {%- assign swatch_bg_image = blank -%}
                            {%- assign swatch_bg_variables = blank -%}
                            {%- assign swatch_colors = swatches_custom_colors -%}
                          
                            {% comment %} First look for a defined custom color {% endcomment %}
                            {%- assign swatch_colors = swatch_colors | newline_to_br | strip_newlines | split: '<br />' -%}
                            {%- assign swatch_search_color = color_name | downcase -%}
                            {%- for swatch_option in swatch_colors -%}
                              {%- assign swatch_color = swatch_option | split: ':' -%}
                              {%- assign swatch_color_name = swatch_color[0] | strip | downcase -%}
                              {%- assign swatch_color_value = swatch_color[1] | strip -%}
                              {%- if swatch_search_color == swatch_color_name -%}
                                {% capture swatch_bg_color %}
                                  background-color: {{ swatch_color_value }};
                                {% endcapture %}
                                {%- break -%}
                              {%- endif -%}
                            {%- endfor -%}
                          
                            {% comment %} Otherwise default to the raw color name, which will either be a
                            valid named HTML color and displayed as such, or will be ignored by the browser. {% endcomment %}
                            {%- if swatch_bg_color == blank -%}
                              {% capture swatch_bg_color %}
                                background-color: {{ color_name | handleize }};
                              {% endcapture %}
                            {%- endif -%}
                          
                            {%- if use_variant_images and swatch_product != blank and swatch_option_key != blank -%}
                              {% for variant in swatch_product.variants %}
                                {% assign option_value_downcased = variant[swatch_option_key] | downcase %}
                                {% if option_value_downcased == swatch_search_color %}
                                  {% if variant.image != blank %}
                                    {%- assign swatch_image_resolution = swatch_size | times: 2 | prepend: 'x' -%}
                                    {%- assign swatch_file_url = variant.image | img_url: swatch_image_resolution, crop: 'center' -%}
                                    {%- assign swatch_height = swatch_size | times: 1.0 -%}
                                    {%- assign swatch_width = swatch_size | times: 1.0 -%}
                                    {%- if use_aspect_ratio -%}
                                      {%- assign swatch_width = swatch_size | times: variant.image.aspect_ratio -%}
                                    {%- endif -%}
                                    {%- capture swatch_bg_image -%}
                                      background-image: url('{{- swatch_file_url  -}}');
                                      width: {{ swatch_width }}px;
                                      border: 0; {% comment %}Variant image swatches don't get inset borders{% endcomment %}
                                    {%- endcapture -%}
                                    {%- assign selected_border_offset = 2 | times: 2 -%}
                                    {%- capture swatch_bg_variables -%}
                                      --swatch-inner-transform-x: {{ swatch_width | minus: selected_border_offset | divided_by: swatch_width }};
                                      --swatch-inner-transform-y: {{ swatch_height | minus: selected_border_offset | divided_by: swatch_height }};
                                    {%- endcapture -%}
                                  {% endif %}
                                  {%- break -%}
                                {% endif %}
                              {% endfor %}
                            {%- else -%}
                              {% comment %} Then look for a pattern image. {% endcomment %}
                              {% assign swatch_file_name = color_name | downcase | handleize | append: '.png' %}
                              {%- if images[swatch_file_name] != blank -%}
                                {%- capture swatch_image_resolution -%}{{ swatch_size | times: 2 }}x{{ swatch_size | times: 2 }}{%- endcapture -%}
                                {%- assign swatch_file_url = swatch_file_name | file_img_url: swatch_image_resolution, crop: 'center' -%}
                                {%- capture swatch_bg_image -%}
                                  background-image: url('{{- swatch_file_url  -}}');
                                {%- endcapture -%}
                              {%- endif -%}
                            {%- endif -%}
                          
                          {%- endcapture -%}
                          {{ swatch_bg_color }}
                          {{ swatch_bg_image }}
                          /* variables */
                          {{ swatch_bg_variables }}
                          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-swatch-styles end{% endcomment %}
          
                        {% endcapture %}
                        <div
                          class="
                            variants-ui__option-swatch
                            {{ option_swatch_classes }}
                          "
                          style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */' }}"
                        >
                          <div
                            class="
                              variants-ui__option-swatch-inner
                              {{ option_swatch_inner_classes }}
                            "
                            style="{{ swatch_styles | split: '/* variables */' | first }}"
                          >
                          </div>
                        </div>
                      {% endunless %}
                    </span>
                  </label>
                </div>
              {% endfor %}
            </div>
          </fieldset>
          {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-radios end{% endcomment %}
    
        {% endif %}
      {% endfor %}
    </div>
    {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui-options end{% endcomment %}
  
  {% endif %}
  {% comment %}Inject @pixelunion/shopify-variants-ui/variants-ui end{% endcomment %}


  <div class="product-form--atc">
    <div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
      <div class="form-field form-field--qty-select">
        <div class="form-field-select-wrapper">
          <select
            id="product-quantity-select"
            class="form-field-input form-field-select"
            aria-label="{{ 'general.general.quantity' | t }}"
            data-quantity-select
          >
            {% for i in (1..9) %}
              <option {% if i == 1 %}selected {% endif %}value="{{ i }}">
                {{ i }}
              </option>
            {% endfor %}
            <option value="10+">
              10+
            </option>
          </select>
          <label
            for="product-quantity-select"
            class="form-field-title"
          >
            {{ 'general.general.quantity' | t }}
          </label>
          {% render 'icon-chevron-down-small' %}
        </div>
      </div>
      <div class="form-field form-field--qty-input hidden">
        <input
          id="product-quantity-input"
          class="form-field-input form-field-number form-field-filled"
          value="1"
          name="quantity"
          type="text"
          pattern="\d*"
          aria-label="{{ 'general.general.quantity' | t }}"
          data-quantity-input
        >
        <label
          for="product-quantity-input"
          class="form-field-title"
        >
          {{ 'general.general.quantity' | t }}
        </label>
      </div>
    </div>
<!-- Bold: Memberships (cadd to cart) -->
 {% include 'bold-memberships-addtocart' %}   
    <button
      class="product-form--atc-button {% if selected_variant and selected_variant.available == false %}disabled{% endif %}"
      type="submit"
      {% if selected_variant and selected_variant.available == false %}disabled{% endif %}
      data-product-atc
    >
      <span class="atc-button--text">
        {% unless selected_variant and selected_variant.available == false %}
          {{ 'product.buttons.add_to_cart' | t }}
        {% else %}
          {{ 'product.buttons.sold_out' | t }}
        {% endunless %}
      </span>
      <span class="atc-button--icon">
        {%- render 'icon-spinner' -%}
      </span>
    </button>
<!-- end Bold code -->
  </div>

  {% if product_smart_buttons or quickshop_smart_buttons %}
    {% if product.metafields.product_customizer == empty %}{{ form | payment_button }}{% endif %}
  {% endif %}


  <div class="surface-pick-up" data-surface-pick-up></div>
{% endform %}

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ray89
Shopify Partner
10 0 3

@dmwwebartisan Awesome!!! It works! Thank you so much.

Zworthkey
Shopify Partner
5581 642 1564

@Ray89 

Contact us if you need more help. i will fix it on half an hour.

dmwwebartisan
Shopify Partner
12269 2546 3692

@Ray89 

Please check screenshot

2021-08-02_19-27_Fully Amped.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app