How to add the description on the product page

Highlighted
New Member
7 0 0

Hi, I want to add the short product description like the one on the picture, right now I can only add the product name there, anyone has an idea how do I do it? I'm aware I need to edit the code but I have no idea how

1.png

0 Likes
Highlighted
Shopify Partner
863 129 146

Hi There!

Add:

<p>{{product.description}}</p> 


where you'd like to show it inside the product-template.liquid section

You can then style it as needed.

Cheers

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
7 0 0

This is my code in the section:

 

 <div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="https:{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="name" content="{{ product.title }}">
<meta  itemprop="description" content="{{ product.description | strip_html | truncatewords: 15}}">
 {% for field in product.metafields.areviews %}  {{ field | last }}  {% endfor %} 
<meta itemprop="brand" content="{{ product.vendor }}"><div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
</div></div>
 
 
 
{% if section.settings.spd_style == "pd_center_img" %}
{% include 'product-details-center-image' %}
 
{% elsif section.settings.spd_style =="pd_variabale" %}
 
{% include 'product-variabale' %}
 
{% elsif section.settings.spd_style =="pd_sidebar" %}
{% include 'product-details-sidebar' %}
 
{% elsif section.settings.spd_style =="pd_sticky" %}
{% include 'product-details-sticky' %}
 
{% endif %}
 
 
{% comment %}
To take advantage of a callback on the select dropdown, add option_selection.js
and customize the JS in timber.productPage as needed.
 
Currently, timber.productPage does the following:
- Hides your <select> tag from above
- Breaks out the product variants into separate product options, if more than one exists
- Generates a <select> tag for each product option
- Enables/disables elements based on variant availability
 
Callback notes:
- Keep the callback available to the global scope (window.selectCallback) so that advanced
addons can override it.
{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
 
<script>
 
  var selectCallback = function(variant, selector) {
    // BEGIN SWATCHES
    if (variant) {
      var form = jQuery('#' + selector.domIdPrefix).closest('form');
      for (var i=0,length=variant.options.length; i<length; i++) {
        var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        if (radioButton.size()) {
          radioButton.get(0).checked = true;
        }
      }
    }
    // END SWATCHES
    
    {% if section.settings.show_sku %}
    if (variant) {
      $('.engoj-variant-sku').text(variant.sku);
    }
    else {
      $('.engoj-variant-sku').empty();
    }
    {% endif %}
 
    var quantity = 1,
        totalPrice;
    if (variant) {
      if (variant.available) {
        // Selected a valid variant that is available.
        $('.engoj-btn-addtocart').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
      } else {
        // Variant is sold out.
        $('.engoj-btn-addtocart').val('Sold Out').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
      }
      quantity = parseInt($('#Quantity').val(), 10);
      totalPrice = variant.price * quantity;
 
      if ( variant.compare_at_price > variant.price ) {
        $('.enj-product-price').html(Shopify.formatMoney(variant.price, window.money_format));
        $('.enj-product-price-compare').html(Shopify.formatMoney(variant.compare_at_price, window.money_format));
      } else {
        $('.enj-product-price').html(Shopify.formatMoney(variant.price, window.money_format));
        $('.enj-product-price-compare').html(Shopify.formatMoney(variant.compare_at_price, window.money_format));
 
      }
 
 
    } else {
      // variant doesn't exist.
      $('.engoj-btn-addtocart').val('Unavailable').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
    }
 
    /*begin variant image*/
    if (variant && variant.featured_image) {
      var originalImage = jQuery(".engoj_img_main");
      var newImage = variant.featured_image;
      var element = originalImage[0];
      Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
        var $el = $(element);
        $el.attr('src', newImageSizedSrc);
        $(".engoj-nav-item:eq(0)").trigger('click');
 
        $('.zoomLens').css('background-image','url("'+newImageSizedSrc+'")');
      });        
    }
    
    /*end of variant image*/
  }
 
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
 
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}
 
    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
    $('.selector-wrapper').hide();
    {% endif %}
  });
</script>
  
{% schema %}
{
  "name": "Product detail page",
  "settings": [
    {
      "type": "select",
      "id": "spd_style",
      "label": "Select Layout Style",
      "options": [
        {
          "value": "pd_center_img",
          "label": "Product Center Image"
        },
        {
          "value": "pd_variabale",
          "label": "Product Variabale"
        },
        {
          "value": "pd_sidebar",
          "label": "Product Sidebar"
        },
{
          "value": "pd_sticky",
          "label": "Product Sticky"
        }
 
      ],
      "default": "pd_variabale"
    },
 
    {
      "type": "header",
      "content": "Product Extended Style"
    },
    {
      "type": "select",
      "id": "style_page",
      "label": "Select Style",
      "options": [
        {
          "value": "left",
          "label": "Style Thumbnail Left"
        },
{
          "value": "right",
          "label": "Style Thumbnail Right"
        }
      ],
      "default": "left",
      "info": "*only when you choose Layout Style 'Product Variabale'"
    },
 
{
      "type": "paragraph",
      "content": "Please scroll to bottom and click add service box to add content for servicebox"
    },
 
{
      "type": "header",
      "content": "Product Sidebar Style"
    },
    {
      "type": "select",
      "id": "style_sidebar",
      "label": "Select Style",
      "options": [
        {
          "value": "left",
          "label": "Style Sidebar Left"
        },
{
          "value": "right",
          "label": "Style Sidebar Right"
        },
        {
          "value": "no_sidebar",
          "label": "Style No Sidebar"
        }
      ],
      "default": "left",
      "info": "*only when you choose Layout Style 'Product Sidebar'"
    },
 
 
    {
      "type": "header",
      "content": "Config"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "label": "Show rating star",
      "default": true
    },
{
      "type": "checkbox",
      "id": "show_size-guide",
      "label": "Show size guide",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sdes",
      "label": "Show summary description",
      "default": true
    },
{
      "type": "checkbox",
      "id": "show_engo_listul",
      "label": "Show promo list",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_social_share",
      "label": "Show social share",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_quantity",
      "label": "Show quantity box",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sku",
      "label": "Show SKU",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_cate",
      "label": "Show Categories",
      "default": true
    },
{
      "type": "checkbox",
      "id": "show_tag",
      "label": "Show Tag",
      "default": true
    },
 
    {
      "type": "header",
      "content": "Description Tab"
    },
    {
      "type": "checkbox",
      "id": "enable_description_tab",
      "label": "Enable?",
      "default": true
    },
    {
      "type": "text",
      "id": "destab_title",
      "label": "Title",
      "default": "Description"
    },
 
{
      "type": "header",
      "content": "Addition Tab"
    },
{
      "type": "checkbox",
      "id": "enable_addition_tab",
      "label": "Enable?",
      "default": true
    },
    {
      "type": "text",
      "id": "addtab_title",
      "label": "Title",
      "default": "Additional Information"
    },
{
      "type": "textarea",
      "id": "addtab_content",
      "label": "Content"
    },
    {
      "type": "header",
      "content": "Review Tab"
    },
    {
      "type": "checkbox",
      "id": "enable_review_tab",
      "label": "Enable?",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "After enabling reviews you will need to install the free [Shopify Product Reviews](https:\/\/apps.shopify.com\/product-reviews) app."
    },
    {
      "type": "text",
      "id": "reviewtab_title",
      "label": "Title",
      "default": "Review"
    },
    
    {
      "type": "header",
      "content": "Related Product"
    },
    {
      "type": "checkbox",
      "id": "enable_related_product",
      "label": "Enable?",
      "default": true
    },
    {
      "type": "text",
      "id": "related_product_title",
      "label": "Title",
      "default": "Related products"
    },
    {
      "type": "range",
      "id": "related_product_limit",
      "label": "Limit products",
      "min": 2,
      "max": 50,
      "step": 1,
      "default": 8
    }
 
  ],
 
"blocks": [
    {
      "type": "servicebox",
      "name": "Service Box",
      "settings": [
          {
            "type": "text",
            "id": "title_box",
            "label": "Title Box",
            "default": "FREE SHIPPING"
          },
          {
          "type": "text",
          "id": "content_box",
          "label": "Content Box",
          "default": "Only oder from $ 230"
          }
 
      ]
    }
  ],
 
  "presets": [
    {
      "name": "Product detail Page",
        "blocks": [
       
        ]
    }
  ]
}
{% endschema %}
 
 
 
Where should i place this snippet?
 
0 Likes
Highlighted
Shopify Partner
863 129 146

Do you have a preview link to share? It will help me see where the snippet should go to. Logically you should place it under the price however I can't see the markup code for that, let me know!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
7 0 0
Highlighted
New Member
7 0 0

Here's the link to the product page if that's what you mean: https://kleemorganics.com/products/vitamin-c-serum-2?variant=31763250741346

0 Likes
Highlighted