Get Customization only for specific variant

Gariep
Excursionist
15 0 3

Hello everyone, 

 

I created a custom liquid template to get text information from customers for laser engraving products. 

However i have some product that i would like to have only some variant showing the engraving option.

At the moment, I had to create 2 seperate product for the generic version and the personalized version. 

Is there a way to add the condition to show engraving only for precific variant? 

Otherwise, it is possible to change the liquid templste itself based on variant selected? 

 

Here's my code, the added code is found at line 176

{%- assign current_variant = product.selected_or_first_available_variant -%} 
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign thumbnail_size = '100x100' -%}
{%- assign height = 500 -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}

{% if section.settings.show_payment_button %} 
  {% if product.selling_plan_groups.size > 0 %} 
    {% comment %}
      This is a subscription product. Shopify will auto hide the extra buttons so we make sure the 
      buy button retains the primary style
    {% endcomment %}
    {% assign button_class = "" %}
  {% else %}
    {% comment %}Buy button will get secondary styling{% endcomment %}
    {% assign button_class = "show-extra-buttons" %}
  {% endif %}
{% endif %}

<div id="prod-{{product.id}}" class="clearfix {{button_class}}" data-section-id="{{ section.id }}" data-section-type="product"{% if section.settings.show_preorder %} data-show-preorder="yes"{% endif %}{% if section.settings.show_inventory %} data-show-inventory="yes"{% endif %}{% if zoom_enabled %} data-zoom-enabled="true"{% endif%} data-enable-history-state="true">

  <h1 class="page-title">{{ product.title | escape}}</h1>   

  <div class="product-images clearfix{% if product.media.size > 1 %} multi-image{% else %} single-image{% endif %}"  data-product-single-media-group>    
    {% for media in product.media %}
      {% render 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
    {% endfor %}    
    
    <noscript>
      {% capture product_image_size %}{{ height }}x{% endcapture %}
      <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="">
    </noscript>
    
    {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

    {% if first_3d_model %}
      <button
        aria-label="{{ 'products.product.view_in_space_label' | t }}"
        class="product-single__view-in-space"
        data-shopify-xr
        data-shopify-model3d-id="{{ first_3d_model.id }}"
        data-shopify-title="{{ product.title }}"
        data-shopify-xr-hidden
      >
        {% render 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
      </button>
    {% endif %}    
    
    {% if product.media.size > 1 %}
      <div tabindex="0" class="more-images more-images-{{section.id}} product-thumbs-{{section.id}} clearfix" data-section-id="{{section.id}}">   
        {% for media in product.media %}
          {% assign active_image = "" %}
          {% if featured_media == media %}
            {% assign active_image = "active-thumb" %}
          {% endif %}
          <div class="product-image-small">
            <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
            class="js carousel-nav {{active_image}} productimage smallimg text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}{% if section.settings.mobile_hide_prd_images %} hide-for-mobile{% endif %}"
            data-image-index="{{forloop.index0}}" 
            title="{{product.title | escape }}" 
            data-image-id="{{ media.id }}" 
            data-image-retina="{{ media.preview_image | product_img_url: product_image_zoom_size, scale:2 }}"
            data-thumbnail-id="{{ section.id }}-{{ media.id }}"
            tabindex="0"
            >

            {% capture thumbnailAlt %}
              {{media.alt | escape }}
            {% endcapture %}
              
            <img class="product-single__thumbnail-image" width="{{media.preview_image.width}}" height="{{media.preview_image.height}}" src="{{ media.preview_image | img_url: thumbnail_size, scale: 2 }}" alt="{{ thumbnailAlt }}">
            {% if media.media_type == 'video' or media.media_type =='external_video' %}
              <span class="product-single__thumbnail-badge">
                {% render 'icon-video-badge-full-color' %}
              </span>
            {% endif %}
            {% if media.media_type == 'model' %}
              <span class="product-single__thumbnail-badge">
                {% render 'icon-3d-badge-full-color' %}
              </span>
            {% endif %}
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}
    
    <noscript>
      <div class="extra-product-images">
        {% for image in product.images %}
          <a href="{{ image | product_img_url: product_image_zoom_size }}" class="productimage smallimg">
          <img src="{{ image | img_url: '100x100', scale:2, crop:'center' }}" alt="{{ image.alt | escape }}" />
          </a>
        {% endfor %}
      </div>
    </noscript>
  </div>  

  <div class="product-details">
    {% assign product_vendor_handle = product.vendor | handle %}
    {% if collections[product_vendor_handle].handle == product_vendor_handle %}
      {% assign vendor_url = collections[product_vendor_handle].url %}
    {% else %}
      {% assign vendor_url = product.vendor | url_for_vendor %}
    {% endif %}

    <h2 class="{% unless section.settings.show_vendor %}hide{% endunless%}">{{ product.vendor | link_to_vendor }}</h2>  

    <div class="product-price-wrap" data-price>
      {% if product.compare_at_price > product.price %}
        <span id="productPrice-{{ section.id }}" class="product-price on-sale" data-regular-price><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s id="comparePrice-{{ section.id }}" class="product-compare-price" data-sale-price><span class=price-money>{{ current_variant.compare_at_price | money }}</span></s>
      {% else %}
        <span id="productPrice-{{ section.id }}" class="product-price" data-regular-price><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s class="product-compare-price" data-sale-price></s>
      {% endif %}
      
      <div class="unit-price-wrap"{% unless current_variant.unit_price_measurement %} style="display:none;"{% endunless %}>
         {% render 'unit-pricing', variant: current_variant %}
      </div>
    </div>      
    


    {% if product.available %}
      {% form 'product', product %}
        {{ form | payment_terms }}
        {% if section.settings.show_product_sku %}
           <div id="productSKU-{{ section.id }}" class="sku-info">{% if current_variant.sku != blank %}{{'products.product.sku' | t}} {{current_variant.sku}}{% endif %}</div>
        {% endif %}
        <div class="product-variants">
          <fieldset>
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper js product-form__item">
                  <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                  {% endfor %}
                  </select>
                </div>
              {% endfor %}
            {% endunless %}

            <select name="id" id="productSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option {% if variant == current_variant %} selected="selected" {% endif %}date-image-id="{{variant.featured_image.id}}" data-sku="{{ variant.sku }}" {% if variant.inventory_management %}{% if section.settings.show_inventory or section.settings.show_preorder %}data-stk="{{variant.inventory_quantity}}" data-policy="{{variant.inventory_policy}}"{% endif %}{% endif %} value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                  {% if variant.available %}
                  {{ variant.title }} - <span class=price-money>{{ variant.price | money_with_currency }}</span>
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
                </option>
              {% endfor %}
            </select>
          </fieldset>
          
          <div id="stockMsg-{{ section.id }}">
              {% if section.settings.show_preorder and current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}
                <div class="var-msg">
                  <!-- inventory is managed and stock qty is 0 or less but item can still be purchased -->
                  {{'products.product.preorder_msg' | t}}
                </div>
              {% elsif section.settings.show_inventory and current_variant.inventory_management %}
                  <!-- show inventory qty for managed variants -->
                   <div class="var-msg">
                      {{'products.product.availability' | t}} {{current_variant.inventory_quantity}} {{ 'products.product.in_stock' | t }}
                    </div>                  
              {% endif %}
          </div>
          <p class="line-item-property__field">
  				<label for="Inscription">Inscription</label>
  				<input required class="required" id="Inscription" type="text" name="properties[Inscription]">
			</p>
        </div>
        
        <div class="quick-actions clearfix">  
          {% if section.settings.show_qty %}
            <p class="qty-field">
              <label for="product-quantity-{{product.id}}">{{'products.product.quantity' | t}}</label>
              <input type="number" id="product-quantity-{{product.id}}" name="quantity" value="1" min="1" />
            </p>
          {% endif %}                                            
          <button type="submit"
          class="purchase button{% unless section.settings.show_payment_button %} pulse animated{% endunless %}" 
          name="add"
          id="addToCart-{{ section.id }}"
          {% unless current_variant.available %}disabled="disabled"{% endunless %}>
          <span id="addToCartText-{{ section.id }}">
            {% unless current_variant.available %}
              {{ 'products.product.sold_out' | t }}
            {% else %}
              {{ 'products.product.add_to_cart' | t }}
            {% endunless %}
          </span>
          </button>
          
          {% if section.settings.show_payment_button %}
             <div style="{% unless current_variant.available %}display:none{% endunless %}" class="extra-button-wrap extra-button-wrap-{{section.id}}">
                {{ form | payment_button }}
             </div>
          {% endif %}
  
        </div>
      {% endform %}
    {% else %}
      <p><strong>{{'products.product.out_of_stock_msg' | t}}</strong></p>
    {% endif %}    

    {% if collection %}
      {% if collection.previous_product or collection.next_product %}
        <div class="product-nav clearfix">     
          {% if collection.previous_product %}
            {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
            <span class="left">{{ 'products.general.previous_product_html' | t | link_to: prev_url }}</span>
          {% endif %}
          {% if collection.next_product %}
            {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
            <span class="right">{{ 'products.general.next_product_html' | t | link_to: next_url }}</span>
          {% endif %}
        </div>
      {% endif %}
    {% endif %}        

    {% if section.settings.product_social %}
      <div class="share-me" class="clearfix">
        {% capture shareHeading %}{{ 'products.general.share' | t }}{% endcapture %}
        {% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, share_heading:shareHeading %}
      </div>
    {% endif %}
  </div> <!-- product details -->

  <div class="product-description rte">
    {{ product.description }}
  </div>

</div>  


{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show dynamic checkout button",
        "default": true,
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      {
        "type": "checkbox",
        "id": "show_inventory",
        "label": "Show inventory quantity",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_preorder",
        "label": "Show \"pre-order\" message",
        "default": true,
        "info": "This will only appear when a product has managed inventory that is 0 or less and still available to buy"
      },
      {
        "type": "checkbox",
        "id": "show_qty",
        "label": "Show quantity selector",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_product_sku",
        "label": "Show SKU",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_sale_sticker",
        "label": "Show sale sticker",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_social",
        "label": "Show sharing buttons",
        "default": true
      },
      {
        "type": "header",
        "content": "Media",
        "info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
      },
      {
        "type": "checkbox",
        "id": "enable_image_zoom",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      }
    ]
  }
{% endschema %}

 

0 Likes