How can I add product descriptions on my collection page on kalles theme

usmekhan91
Shopify Partner
38 0 7

Hello Developers Community,

I recently updated my theme and now i am facing a problem that i am unable to add short description of my product on collection page (featured collection section). I had tried multiple things but none of them worked. I wanted to show description on each product on my collection page. I would appreciate it if you can please help me in this regards.

 

Theme Detail: Kalles: 4.0.4
URL: https://versusforher.com/collections/wellness-packs

i wanted to display my short description of every product as reference image which is attached below

 

usmekhan91_0-1717667035119.png

 

I would appreciate it if you can help me in this regards.

Kind Regards,

Replies 5 (5)

GTLOfficial
Shopify Expert
144 28 47

@usmekhan91   Okay so, go to Online store---------------------> Theme-----------------> edit code-------------> find the main-collection.liquid -------------> search class "t4s-product-info" ----------------> inside it search class "t4s-product-rating "  -- and at the end of the class "t4s-product-rating " ---> add this code ------->    <p>{{ product.description }} </p>.
let me know for further assistance.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
usmekhan91
Shopify Partner
38 0 7

I am unable to find the section, this is the main-collection.liquid code, can you please add the above mention code in it.

<!-- sections/main-collection.liquid -->
{{ 'section.css' | asset_url | stylesheet_tag }}
{{ 'collection-pages.css' | asset_url | stylesheet_tag }}
{{ 'collection-products.css' | asset_url | stylesheet_tag }}
{{ 'collection-products-list.css' | asset_url | stylesheet_tag }}
{{ 'pagination.css' | asset_url | stylesheet_tag }}
{{ 'button-style.css' | asset_url | stylesheet_tag }}
<link href="{{ 'custom-effect.css' | asset_url }}" rel="stylesheet" media="print" onload="this.media='all'">
<link href="{{ 'loading.css' | asset_url }}" rel="stylesheet" media="print" onload="this.media='all'">
{%- liquid 
  assign se_blocks = section.blocks
  assign stt_layout = section.settings.layout
  assign stt_image_bg = section.settings.image_bg
  if stt_layout == 't4s-se-container' 
    assign html_layout = '<div class="t4s-container">__</div></div>' | split: '__'
  elsif stt_layout == 't4s-container-wrap'
    assign html_layout = '<div class="t4s-container">__</div>' | split: '__'
  else
    assign html_layout = '__' | split: '__'
  endif
  assign layout_des = section.settings.layout_des
  assign image_ratio = section.settings.image_ratio
  if image_ratio == "ratioadapt"
    assign imgatt = ''
   else 
    assign imgatt = 'data-'
  endif
  assign use_pagination = section.settings.use_pagination 
  assign sett_equal = section.settings.use_eq_height
  assign show_vendor = section.settings.show_vendor
  assign use_link_vendor = settings.use_link_vendor
  assign enable_rating = settings.enable_rating
  assign inc_pr = section.settings.pr_des
  assign limit = section.settings.limit
  assign product_des = section.settings.product_des
  assign placeholder_img = settings.placeholder_img
  
  assign show_img = settings.show_img
  assign isGrowaveWishlist = false
  if settings.wishlist_mode == "3" and shop.customer_accounts_enabled
    assign isGrowaveWishlist = true
  endif
  assign enable_pr_size = settings.enable_pr_size
  assign pr_size_pos = settings.pr_size_pos
  assign show_size_type = settings.show_size_type
  assign size_ck = settings.size_ck | append: ',size,sizes,Größe' 
  assign get_size = size_ck | downcase | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq

  assign enable_pr_color = settings.enable_pr_color
  assign show_cl_type = settings.show_color_type
  assign color_ck = settings.color_ck | append: ',color,colors,couleur,colour'
  assign get_color = color_ck | downcase | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq

  assign price_varies_style = settings.price_varies_style
  assign app_review = settings.app_review
  assign use_countdown = section.settings.use_cdt
  
  assign txt_cd = 'products.grid_items.offer_end_in' | t
  
  assign enable_bar_lm = section.settings.enable_bar_lm
  assign results_count = collection.products_count

  assign isLoadmore = false
  if layout_des != "2"
    if use_pagination == "load-more"  or use_pagination == "infinite" 
      assign isLoadmore = true
      assign typeAjax = 'LmDefault'
    else
      assign typeAjax = 'AjaxDefault'
    endif
  else
     if use_pagination == "load-more" or use_pagination == "infinite" 
      assign isLoadmore = true
      assign typeAjax = 'LmIsotope'
    else
      assign typeAjax = 'AjaxIsotope'
    endif
  endif

  assign enable_listing = section.settings.enable_listing
  assign enable_listing_default = section.settings.enable_listing_default
  assign show_list_btns = false
  if enable_listing and settings.enable_atc or settings.enable_quickview 
  assign show_list_btns = true
  endif
  if enable_listing and enable_listing_default
   assign class_listview = 'is--listview'
  endif
  assign col_mobile = section.settings.col_mb
  assign col_tablet = section.settings.col_tb
  assign col_desktop = section.settings.col_dk 
  assign cart_collection_items_per_row = cart.attributes.collection_items_per_row
  assign collection_items_per_row = cart_collection_items_per_row | split: '.'
  assign cl_des = collection.description
  assign type_filters = section.settings.type_filters
 -%}

{%- paginate collection.products by limit -%}
<div class="t4s-section-inner t4s_nt_se_{{ section.id }} t4s_se_{{ section.id }} {{ stt_layout }} {% if stt_image_bg != blank and stt_layout != 't4s-se-container' %} t4s-has-imgbg lazyloadt4s {% endif %}"  {% if stt_image_bg != blank and stt_layout != 't4s-se-container' %} data-bgset="{{ stt_image_bg | image_url: width: 1 }}" data-sizes="auto"  data-optimumx="2" {% endif %} {% render 'section_style', se_stts: section.settings %} >
  {{- html_layout[0] -}}
  {%- if stt_layout == 't4s-se-container' -%}<div class="t4s-container-inner {% if stt_image_bg != blank %} t4s-has-imgbg lazyloadt4s {% endif %} "  {% if stt_image_bg != blank %}  data-bgset="{{ stt_image_bg | image_url: width: 1 }}" data-sizes="auto"  data-optimumx="2" {% endif %} > {%- endif -%}
  {%- if section.settings.position_desc == '1' and section.settings.show_desc -%}<div id="t4s-desc-collection" class="t4s-desc-collection t4s-desc-before">{{ collection.description }}</div>{%- endif -%} 
  
  {%- if se_blocks.size > 0 -%}
    <div class="t4s-collection-header t4s-d-flex 4s-align-items-center">
      {%- for block in se_blocks -%}
        {%- case block.type -%}
          {%- when 'sortby' -%} 
            <link rel="stylesheet" href="{{ 'base_drop.min.css' | asset_url }}" media="all">
            {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
              {%- assign option_selected = collection.sort_options | where: "value",sort_by | first -%}
              <div class="t4s-dropdown t4s-dropdown__sortby">
                  <button data-dropdown-open data-position="bottom-end" data-id="t4s__sortby"><span class="t4s-d-none t4s-d-md-block">{{ option_selected.name | escape }}</span><span class="t4s-d-md-none" data-not-change-txt>{{ 'collections.general.sort_button' | t }}</span><svg class="t4s-icon-select-arrow" role="presentation" viewBox="0 0 19 12"><use xlink:href="#t4s-select-arrow"></use></svg></button>
                  <div data-dropdown-wrapper class="t4s-dropdown__wrapper" id="t4s__sortby">
                     <div class="t4s-drop-arrow"></div>
                     <div class="t4s-dropdown__header">
                        <span class="t4s-dropdown__title">{{ 'collections.general.sort_by_label' | t }}</span>
                        <button data-dropdown-close aria-label="{{ 'general.aria.close' | t }}"><svg role="presentation" class="t4s-iconsvg-close" viewBox="0 0 16 14"><path d="M15 0L1 14m14 0L1 0" stroke="currentColor" fill="none" fill-rule="evenodd"></path></svg></button>
                     </div>
                     <div class="t4s-dropdown__content">
                        {%- for option in collection.sort_options -%}
                        <button data-dropdown-item data-sortby-item data-value="{{ option.value | escape }}"{% if option.value == sort_by %} class="is--selected"{% endif %}>{{ option.name | escape }}</button>
                        {%- endfor -%}
                     </div>
                  </div>
              </div>
          {%- when 'layout' -%}
            
          {%- liquid 
            unless cart_collection_items_per_row contains 'list_t4s' and enable_listing == false
                assign col_mobile = collection_items_per_row[0] | default: col_mobile
                assign col_tablet = collection_items_per_row[1] | default: col_tablet
                assign col_desktop = collection_items_per_row[2] | default: col_desktop
            endunless
            assign arr_cols_layout = 'list_t4s,1,2,3,4,5,6' | split: ','
            assign arr_cols_limit = '3,5,7' | split: ','
            assign arr_breakpoint = 'mobile,tablet,desktop' | split: ','
            assign icon_col_0 = '<span class="t4s_icon_viewlist"></span>'
            assign icon_col_1 = '<span class="t4s_icon_view1"></span>'
            assign icon_col_2 = '<span class="t4s_icon_view2"></span>'
            assign icon_col_3 = '<span class="t4s_icon_view3"></span>'
            assign icon_col_4 = '<span class="t4s_icon_view4"></span>'
            assign icon_col_5 = '<span class="t4s_icon_view5"></span>'
            assign icon_col_6 = '<span class="t4s_icon_view6"></span>'
            if enable_listing
              assign listing_continue1 = ''
              assign listing_continue2 = '1'
            else 
              assign listing_continue1 = '0'
              assign listing_continue2 = '0,1'
            endif 
            if cart_collection_items_per_row contains 'list_t4s'
                assign class_listview = ''
            elsif enable_listing and enable_listing_default
                 assign class_listview = 'is--listview'
            endif -%}
      
            <div data-layout-switch data-items="{{ cart_collection_items_per_row }}" class="t4s-layout-switch-wrapper">
              {%- for i in (0..2) -%}
                 {%- assign cols_limit = arr_cols_limit[i] | plus: 0 -%}
                 {%- capture list_continue -%}
                  {%- cycle listing_continue1,listing_continue2,listing_continue2 -%}
                 {%- endcapture -%}

                 <div class="t4s-layout__switch is--{% cycle 'mobile t4s-d-md-flex t4s-d-md-none', 'tablet t4s-d-none t4s-d-md-flex t4s-d-lg-none', 'desktop t4s-d-none t4s-d-lg-flex' %}">
                   
                   {%- assign col_active = 'col_' | append:arr_breakpoint[i] -%}

                   {%- for j in (0..6) limit:cols_limit -%}
                      {%- if list_continue contains j %}{% continue %}{% endif -%}

                       <button data-btn-as-a data-breakpoint="{{ arr_breakpoint[i] }}" data-col="{{ arr_cols_layout[j] }}"{% if [col_active] == arr_cols_layout[j] %} class="is--active"{% endif %}>{%- assign icon_col_j = 'icon_col_' | append:j -%}{{ [icon_col_j] }}</button>
                   {%- endfor -%}
                 </div>
               {%- endfor -%}
            </div>
          {%- when 'filter' -%}
            <div class="t4s-btn-filter-wrapper">
              {%- liquid
              assign style_filters = block.settings.style_filters
              if collection.filters.size > 0 and type_filters == 'facets'
                  assign show_filter = true
              elsif type_filters == 'facets_tags'
                 if collection.all_tags.size > 0
                  assign show_filter = true
                  if request.design_mode
                    assign id_se = '#shopify-section-facets_tags '
                  endif
                  echo '<style>button.t4s-btn-filter {opacity: 0 !important; pointer-events: none !important; }.t4s-toolbart-filter.t4s-toolbar-item{ display: none !important;}</style>'
                 endif
              else
                 assign show_filter = false
              endif -%}
              {%- if show_filter %}<button data-btn-as-a class="t4s-btn-filter" data-drawer-delay data-drawer-options='{ "id":"{{ id_se }}#t4s-filter-hidden" }' aria-label="Show filters"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path d="M324.4 64C339.6 64 352 76.37 352 91.63C352 98.32 349.6 104.8 345.2 109.8L240 230V423.6C240 437.1 229.1 448 215.6 448C210.3 448 205.2 446.3 200.9 443.1L124.7 385.6C116.7 379.5 112 370.1 112 360V230L6.836 109.8C2.429 104.8 0 98.32 0 91.63C0 76.37 12.37 64 27.63 64H324.4zM144 224V360L208 408.3V223.1C208 220.1 209.4 216.4 211.1 213.5L314.7 95.1H37.26L140 213.5C142.6 216.4 143.1 220.1 143.1 223.1L144 224zM496 400C504.8 400 512 407.2 512 416C512 424.8 504.8 432 496 432H336C327.2 432 320 424.8 320 416C320 407.2 327.2 400 336 400H496zM320 256C320 247.2 327.2 240 336 240H496C504.8 240 512 247.2 512 256C512 264.8 504.8 272 496 272H336C327.2 272 320 264.8 320 256zM496 80C504.8 80 512 87.16 512 96C512 104.8 504.8 112 496 112H400C391.2 112 384 104.8 384 96C384 87.16 391.2 80 400 80H496z"></path></svg>{{ 'collections.general.filter_button' | t }}</button>{% endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
    {%- if show_filter and style_filters == 'area' %}<div class="t4s-filter-area" data-filter-area></div>{% endif -%}
  {%- endif -%}
  <div class="t4s-row">
    <div data-ntajax-container{% if show_filter %} data-has-filters{% endif %} data-ntajax-options='{"id":"{{ section.id }}","type":"{{ typeAjax }}","typeFilters":"{{ type_filters }}","isProduct":true,"updateURL":true,"updateURLPrev":true,"sort_by":"{{ collection.sort_by | default: collection.default_sort_by }}"}'{% unless collection.current_type or collection.current_vendor %} data-collection-url="{{ collection.url }}"{% endunless %} class="t4s-col-item t4s-col-12 t4s-main-area t4s-main-collection-page">     
     
     {%- assign total_active_values = 0 -%}
     {%- capture filters__active -%}
          <div class="t4s-active-filters__count t4s-d-inline-block">{{ 'products.facets.results_with_count_html' | t:count:collection.products_count }}</div>
          {%- for filter in collection.filters -%}
            {%- if filter.type == "price_range" -%}
              {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
              {%- assign total_active_values = total_active_values | plus: 1 -%}
                <a class="t4s-active-filters__remove-filter" href="{{ filter.url_to_remove }}">
                  {%- assign min_value = filter.min_value.value | default: 0 -%}
                  {%- assign max_value = filter.max_value.value | default: filter.range_max -%}
                  {{ min_value | money }} - {{ max_value | money }}
                </a>
              {%- endif -%}
            {%- else -%}
              {%- for filter_value in filter.active_values -%}
                {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
                <a class="t4s-active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">{{ filter_value.label }}</a>
              {%- endfor -%}
            {%- endif- %}
          {%- endfor -%}
          {%- if total_active_values > 1 %}<a href="{{ collection.url }}{% if collection.sort_by != blank %}?sort_by={{ collection.sort_by }}{% endif %}" class="t4s-active-filters__clear">{{ 'products.facets.clear_all' | t }}</a>{% endif -%}
      {%- endcapture -%}
      {%- if total_active_values > 0 %}<div class="t4s-active-filters">{{- filters__active -}}</div>{% endif -%}

       {%- if current_tags.size > 0 and type_filters == 'facets_tags' -%}
          <div class="t4s-active-filters">
             <div class="t4s-active-filters__count t4s-d-inline-block">{{ 'products.facets.results_with_count_html' | t:count:collection.products_count }}</div>
             {%- if current_tags.size > 0 -%}{%- for tag in current_tags -%}{%- assign txt_tag = tag | replace: '-', ' ' | replace: '_', ' ' -%}{{ txt_tag | link_to_remove_tag: tag | replace: 'title=', 'class="t4s-active-filters__remove-filter" aria-label=' }}{%- endfor -%}{%- endif -%}
             {%- if current_tags.size > 1 -%}<a class="t4s-active-filters__clear" href="{{ collection.url }}{% if collection.sort_by != blank %}?sort_by={{ collection.sort_by }}{% endif %}">{{ 'products.facets.clear_all' | t }}</a>{%- endif -%}
          </div>
       {%- endif -%}

      {%- if paginate.previous.is_link and isLoadmore -%}
        <div data-wrap-lm-prev class="t4s-pagination-wrapper t4s-prs-head t4s-has-btn-{{ use_pagination }} {{ section.settings.btn_pos }} t4s-w-100" timeline hdt-reveal="slide-in">
          <a data-load-more data-is-prev href="{{ paginate.previous.url }}" class="t4s-pr t4s-loadmore-btn t4s-btn t4s-btn-loading__svg t4s-btn-base t4s-btn-style-{{ section.settings.button_style }} t4s-btn-size-{{ section.settings.btns_size }} t4s-btn-icon-{{ section.settings.btn_icon }} t4s-btn-color-{{ section.settings.btns_cl }} {% if section.settings.button_style == 'default' or section.settings.button_style == 'outline' %}t4s-btn-effect-{{ section.settings.button_effect }}{% endif %}">
            <span class="t4s-btn-atc_text">{{ 'search.pagination.load_prev' | t }}</span> 
            {% if section.settings.btn_icon %}
              <svg class="t4s-btn-icon" viewBox="0 0 32 32"><path d="M 15 4 L 15 24.0625 L 8.21875 17.28125 L 6.78125 18.71875 L 15.28125 27.21875 L 16 27.90625 L 16.71875 27.21875 L 25.21875 18.71875 L 23.78125 17.28125 L 17 24.0625 L 17 4 Z"/></svg>
            {% endif %}
            <div class="t4s-loading__spinner t4s-dn">
              <svg  width="16" height="16" aria-hidden="true" focusable="false" role="presentation" class="t4s-svg__spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="t4s-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
            </div> 
          </a>
        </div>
      {%- endif -%}  
      {%- if layout_des == "1" -%} 
        <div data-contentlm-replace class="t4s_box_pr_grid t4s-products {{ class_listview }} t4s-text-{{ section.settings.content_align }} t4s_{{ image_ratio }}  t4s_position_{{ section.settings.image_position }} t4s_{{ section.settings.image_size }} t4s-row  t4s-justify-content-center t4s-row-cols-{{ col_mobile }} t4s-row-cols-md-{{ col_tablet }} t4s-row-cols-lg-{{ col_desktop }} t4s-gx-md-{{ section.settings.space_h_item }} t4s-gy-md-{{ section.settings.space_v_item }} t4s-gx-{{ section.settings.space_h_item_mb }} t4s-gy-{{ section.settings.space_v_item_mb }}">
      {%- else -%} 
        <div data-contentlm-replace class="isotopet4s t4s_box_pr_masonry t4s-products {{ class_listview }} t4s-text-{{ section.settings.content_align }} t4s_{{ image_ratio }} t4s_position_{{ section.settings.image_position }} t4s_{{ section.settings.image_size }} t4s-row t4s-row-cols-{{ col_mobile }} t4s-row-cols-md-{{ col_tablet }} t4s-row-cols-lg-{{ col_desktop }} t4s-gx-md-{{ section.settings.space_h_item }} t4s-gy-md-{{ section.settings.space_v_item }} t4s-gx-{{ section.settings.space_h_item_mb }} t4s-gy-{{ section.settings.space_v_item_mb }}" data-isotopet4s-js='{ "itemSelector": ".t4s-product", "layoutMode": "masonry" }'>
      {%- endif -%} 
        {%- liquid 
          case product_des
            when '1'
              render 'product-grid-item1' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '2'
              render 'product-grid-item2' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '3'
              render 'product-grid-item3' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '4'
              render 'product-grid-item4' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '5'
              render 'product-grid-item5' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '6'
              render 'product-grid-item6' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '7'
              render 'product-grid-item7' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '8'
              render 'product-grid-item8' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
            when '9'
              render 'product-grid-item9' for collection.products as product,prefix_url:prefix_url,isGrowaveWishlist:isGrowaveWishlist,show_img: show_img,show_vendor:show_vendor,use_link_vendor:use_link_vendor,enable_pr_color:enable_pr_color,show_cl_type:show_cl_type,get_color:get_color,enable_pr_size:enable_pr_size,pr_size_pos:pr_size_pos,get_size:get_size,show_size_type:show_size_type,price_varies_style:price_varies_style,app_review:app_review,enable_rating:enable_rating,use_countdown:use_countdown,imgatt:imgatt,show_list_btns:show_list_btns, placeholder_img:placeholder_img
          endcase -%}
      </div>
      {%- if paginate.pages > 1 -%}
        <div class="t4s-row t4s-prs-footer t4s-has-btn-{{ use_pagination }} {{ section.settings.btn_pos }}">
          {%- if use_pagination == 'default' -%}
            {%- render 'pagination', paginate: paginate, anchor: '' -%}
          {%- elsif paginate.next.is_link -%}
             <div data-wrap-lm class="t4s-pagination-wrapper t4s-w-100" timeline hdt-reveal="slide-in">
               {%- if enable_bar_lm -%}
               <div data-wrap-lm-bar class="t4s-lm-bar t4s-btn-color-{{ section.settings.btns_cl }}">
                 {%- assign current_pr_size = collection.products.size | plus: paginate.current_offset -%}
                  <span class="t4s-lm-bar--txt">{{ 'collections.pagination.bar_with_count_html' | t: current_count: current_pr_size, total_count: results_count }}</span>
                  <div class="t4s-lm-bar--progress t4s-pr t4s-oh"><span class="t4s-lm-bar--current t4s-pa t4s-l-0 t4s-r-0 t4s-t-0 t4s-b-0" style="width: {{ current_pr_size | times: 100.0 | divided_by: results_count }}%"></span></div>
               </div>
               {%- endif -%}
                <a data-load-more {% if use_pagination == 'infinite' %} data-load-onscroll {% endif %}  href="{{ paginate.next.url }}" class="t4s-pr t4s-loadmore-btn t4s-btn-loading__svg t4s-btn t4s-btn-base t4s-btn-style-{{ section.settings.button_style }} t4s-btn-size-{{ section.settings.btns_size }} t4s-btn-icon-{{ section.settings.btn_icon }} t4s-btn-color-{{ section.settings.btns_cl }} {% if section.settings.button_style == 'default' or section.settings.button_style == 'outline' %}t4s-btn-effect-{{ section.settings.button_effect }}{% endif %}">
                  <span class="t4s-btn-atc_text">{{ 'collections.pagination.load_more' | t }}</span> 
                  {% if section.settings.btn_icon %}
                    <svg class="t4s-btn-icon" viewBox="0 0 32 32"><path d="M 15 4 L 15 24.0625 L 8.21875 17.28125 L 6.78125 18.71875 L 15.28125 27.21875 L 16 27.90625 L 16.71875 27.21875 L 25.21875 18.71875 L 23.78125 17.28125 L 17 24.0625 L 17 4 Z"/></svg>
                  {% endif %}
                  <div class="t4s-loading__spinner t4s-dn">
                    <svg  width="16" height="16" aria-hidden="true" focusable="false" role="presentation" class="t4s-svg__spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="t4s-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
                  </div> 
                </a>
             </div>
          {%- endif -%}
        </div>
      {%- endif -%}
      {%- if collection.products.size == 0 -%}
        <div class="t4s-coll-empty t4s-align-items-center">
          <div class="t4s-no-result-product t4s-d-flex">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18"><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"></path></svg>{{ 'collections.general.no_matches' | t }}
          </div>
        </div>
      {%- endif -%}
    </div>
    <aside data-sidebar-content class="t4s-col-item t4s-col-12 t4s-col-lg-3 t4s-sidebar t4s-dn"><div class="t4s-loading--bg"></div></aside>
  </div>
  {%- if section.settings.position_desc == '2' and section.settings.show_desc -%}<div id="t4s-desc-collection" class="t4s-desc-collection t4s-desc-before">{{ collection.description }}</div>{%- endif -%} 
  {{- html_layout[1] -}}
</div>
{%- endpaginate -%}

{%- if enable_listing and cart_collection_items_per_row contains 'list_t4s' -%}
{%- comment -%}  list_t4s.2.5 is--listview t4s-row-cols-list_t4s t4s-row-cols-md-2 t4s-row-cols-lg-5 {%- endcomment -%}
<script>
    (function() {
       var windowWidth = window.innerWidth,
       onlistview      = {{ collection_items_per_row | json }},
       producSelector  = document.querySelectorAll('#shopify-section-{{ section.id }} .t4s-products')[0],
       classListview   = 'is--listview on--list-',
       classListview2  = classListview;
       
       if ( windowWidth < 768 && onlistview[0] == 'list_t4s' ) {
          classListview = classListview +'mobile';
       } else if ( windowWidth < 1025 && windowWidth > 767 && onlistview[1] == 'list_t4s' ) {
          classListview = classListview +'tablet';
       } else if (windowWidth > 1024 && onlistview[2] == 'list_t4s') { 
          classListview = classListview +'desktop';
       }
       if (classListview != classListview2)
       producSelector.className += ' '+classListview;

    }());
</script>
{%- endif -%}
  
{%- schema -%}
  {
    "name": "Main collection",
    "tag": "section",
    "class": "t4s-section t4s-section-main t4s-collection-page t4s_bk_flickity t4s_tp_istope t4s_tp_countdown",
    "settings": [
      {
        "type": "header",
        "content": "1. General options"
      },
  	  {
        "type": "checkbox",
        "id": "show_desc",
        "label": "Show description collection",
        "default": false
      },
      {
        "type": "select",
        "id": "position_desc",
        "options": [
          {
            "value": "1",
            "label": "Before main collection"
          },
          {
            "value": "2",
            "label": "After main collection"
          }
        ],
        "label": "Position description collection",
        "default": "2"
      },
      {
        "type": "select",
        "id": "product_des",
        "options": [
          {
            "value": "1",
            "label": "Design 1"
          },
          {
            "value": "2",
            "label": "Design 2"
          },
          {
            "value": "3",
            "label": "Design 3"
          },
          {
            "value": "4",
            "label": "Design 4"
          },
          {
            "value": "5",
            "label": "Design 5"
          },
          {
            "value": "6",
            "label": "Design 6"
          },
          {
            "value": "7",
            "label": "Design 7"
          },
          {
            "value": "8",
            "label": "Design 8"
          },
          {
            "value": "9",
            "label": "Design 9"
          }
        ],
        "label": "Product item design",
        "default": "1"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show product vendors",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "use_cdt",
        "label": "Show product countdown",
        "default": false
      },
      {
        "type": "header",
        "content": "+ Options image products"
      },
      {
        "type": "select",
        "id": "image_ratio",
        "label": "Image ratio",
        "default": "rationt",
        "info": "Aspect ratio custom will settings in general panel",
        "options": [
          {
            "group": "Natural",
            "value": "ratioadapt",
            "label": "Adapt to image"
          },
          {
            "group": "Landscape",
            "value": "ratio2_1",
            "label": "2:1"
          },
          {
            "group": "Landscape",
            "value": "ratio16_9",
            "label": "16:9"
          },
          {
            "group": "Landscape",
            "value": "ratio8_5",
            "label": "8:5"
          },
          {
            "group": "Landscape",
            "value": "ratio3_2",
            "label": "3:2"
          },
          {
            "group": "Landscape",
            "value": "ratio4_3",
            "label": "4:3"
          },
          {
            "group": "Landscape",
            "value": "rationt",
            "label": "Ratio ASOS"
          },
          {
            "group": "Squared",
            "value": "ratio1_1",
            "label": "1:1"
          },
          {
            "group": "Portrait",
            "value": "ratio2_3",
            "label": "2:3"
          },
          {
            "group": "Portrait",
            "value": "ratio1_2",
            "label": "1:2"
          },
          {
            "group": "Custom",
            "value": "ratiocus1",
            "label": "Ratio custom 1"
          },
          {
            "group": "Custom",
            "value": "ratiocus2",
            "label": "Ratio custom 2"
          },
          {
            "group": "Custom",
            "value": "ratio_us3",
            "label": "Ratio custom 3"
          },
          {
            "group": "Custom",
            "value": "ratiocus4",
            "label": "Ratio custom 4"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "default": "cover",
        "info": "This settings apply only if the image ratio is not set to 'Adapt to image'",
        "options": [
          {
            "value": "cover",
            "label": "Full"
          },
          {
            "value": "contain",
            "label": "Auto"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_position",
        "info": "The first value is the horizontal position and the second value is the vertical. This settings apply only if the image ratio is not set to 'Adapt to image'",
        "options": [
          {
            "value": "default",
            "label": "Default"
          },
          {
            "value": "1",
            "label": "Left top"
          },
          {
            "value": "2",
            "label": "Left center"
          },
          {
            "value": "3",
            "label": "Left bottom"
          },
          {
            "value": "4",
            "label": "Right top"
          },
          {
            "value": "5",
            "label": "Right center"
          },
          {
            "value": "6",
            "label": "Right bottom"
          },
          {
            "value": "7",
            "label": "Center top"
          },
          {
            "value": "8",
            "label": "Center center"
          },
          {
            "value": "9",
            "label": "Center bottom"
          }
        ],
        "label": "Image position",
        "default": "8"
      },
      {
        "type": "select",
        "id": "content_align",
        "label": "Product content align",
        "default": "default",
        "options": [
          {
            "label": "Default",
            "value": "default"
          },
          {
            "label": "Center",
            "value": "center"
          }
        ]
      },
      {
        "type": "range",
        "id": "limit",
        "min": 1,
        "max": 50,
        "step": 1,
        "label": "Maximum products to show",
        "default": 12
      },

      {
        "type": "checkbox",
        "id": "enable_listing",
        "label": "Enable list switch",
        "default": true
      },
       {
         "type": "checkbox",
         "id": "enable_listing_default",
         "label": "Set list view as default",
         "default": false
       },
      {
        "type": "select",
        "id": "col_dk",
        "label": "Items per row",
        "default": "4",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          }
        ]
      },
      {
        "type": "select",
        "id": "col_tb",
        "label": "Items per row (Tablet)",
        "default": "2",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          }
        ]
      },
      {
        "type": "select",
        "id": "col_mb",
        "label": "Items per row (Mobile)",
        "default": "2",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          }
        ]
      },
      {
        "type": "select",
        "id": "space_h_item",
        "options": [
          {
              "value": "0", 
              "label": "0"
          },
          {
              "value": "2", 
              "label": "2px"
          },
          {
              "value": "4", 
              "label": "4px"
          },
          {
              "value": "6", 
              "label": "6px"
          },
          {
              "value": "8", 
              "label": "8px"
          },
          {
              "value": "10", 
              "label": "10px"
          },
          {
              "value": "15", 
              "label": "15px"
          },
          {
              "value": "20",
              "label": "20px"
          },
          {
              "value": "30",
              "label": "30px"
          }
        ],
        "label": "Space horizontal items",
        "default": "30"
      },
      {
        "type": "select",
        "id": "space_v_item",
        "options": [
          {
              "value": "0", 
              "label": "0"
          },
          {
              "value": "2", 
              "label": "2px"
          },
          {
              "value": "4", 
              "label": "4px"
          },
          {
              "value": "6", 
              "label": "6px"
          },
          {
              "value": "8", 
              "label": "8px"
          },
          {
              "value": "10", 
              "label": "10px"
          },
          {
              "value": "15", 
              "label": "15px"
          },
          {
              "value": "20",
              "label": "20px"
          },
          {
              "value": "30",
              "label": "30px"
          }
        ],
        "label": "Space vertical items",
        "default": "30"
      },
      {
        "type": "select",
        "id": "space_h_item_mb",
        "options": [
          {
              "value": "0", 
              "label": "0"
          },
          {
              "value": "2", 
              "label": "2px"
          },
          {
              "value": "4", 
              "label": "4px"
          },
          {
              "value": "6", 
              "label": "6px"
          },
          {
              "value": "8", 
              "label": "8px"
          },
          {
              "value": "10", 
              "label": "10px"
          },
          {
              "value": "15", 
              "label": "15px"
          },
          {
              "value": "20",
              "label": "20px"
          },
          {
              "value": "30",
              "label": "30px"
          }
        ],
        "label": "Space horizontal items (Mobile)",
        "default": "10"
      },
      {
        "type": "select",
        "id": "space_v_item_mb",
        "options": [
          {
              "value": "0", 
              "label": "0"
          },
          {
              "value": "2", 
              "label": "2px"
          },
          {
              "value": "4", 
              "label": "4px"
          },
          {
              "value": "6", 
              "label": "6px"
          },
          {
              "value": "8", 
              "label": "8px"
          },
          {
              "value": "10", 
              "label": "10px"
          },
          {
              "value": "15", 
              "label": "15px"
          },
          {
              "value": "20",
              "label": "20px"
          },
          {
              "value": "30",
              "label": "30px"
          }
        ],
        "label": "Space vertical items (Mobile)",
        "default": "10"
      },
      {
        "type": "select",
        "id": "layout_des",
        "options": [
          {
            "value": "1",
            "label": "Grid"
          },
          {
            "value": "2",
            "label": "Masonry"
          }
        ],
        "label": "Layout design",
        "default": "1"
      },
      {
        "type": "header",
        "content": "Pagination options"
      },
      {
        "type": "select",
        "id": "use_pagination",
        "label": "Pagination",
        "default": "default",
        "options": [
          {
            "value": "default",
            "label": "Default"
          },
          {
            "value": "load-more",
            "label": "'Load more' button"
          },
          {
            "value": "infinite",
            "label": "Infinite scrolling"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_bar_lm",
        "label": "Enable progress bar?",
        "info": "Only active when you use 'Load more' or 'Infinite scrolling'",
        "default": true
      },
      {
        "type": "paragraph",
        "content": "Page-loading speed is everything for good user experience. Multiple researches have shown that slow load times result in people leaving your site or delete your app which result in low conversion rates. And that’s bad news for those who use an infinite-scrolling. The more users scroll down a page, more content has to load on the same page. As a result, the page performance will increasingly slow down."
      },
      {
        "type": "paragraph",
        "content": "Another problem is limited resources of the user’s device. On many infinite scrolling sites, especially those with many images, devices with limited resources (such as mobile devices or tablets with dated hardware) can start slowing down because of the sheer number of assets it has loaded."
      },
      {
        "type": "paragraph",
        "content": "Therefore, we recommend that you only use 'Load more', 'Infinite scrolling' for when your collection is less than or equal to 400 products"
      },
      {
        "type":"checkbox",
        "id":"btn_icon",
        "label":"Enable button icon",
        "default":false
      },
      {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "options": [
            {
                "label": "Default",
                "value": "default"
            },
            {
                "label": "Outline",
                "value": "outline"
            },
            {
                "label": "Bordered bottom",
                "value": "bordered"
            },
            {
                "label": "Link",
                "value": "link"
            }
        ]
      },
      {
        "type": "select",
        "id": "btns_size",
        "label": "Button size",
        "default":"large",
        "options": [
            {
                "label": "Small",
                "value": "small"
            },
            {
                "label": "Extra-mall",
                "value": "extra-small"
            },
            {
                "label": "Medium",
                "value": "medium"
            },
            {
                "label": "Extra-medium",
                "value": "extra-medium"
            },
            {
                "label": "Large",
                "value": "large"
            },
            {
                "label": "Extra large",
                "value": "extra-large"
            }
        ]
      },
      {
        "type": "select",
        "id": "btns_cl",
        "label": "Button color",
        "default": "dark",
        "options": [
          {
              "value": "light",
              "label": "Light"
          },
          {
              "value": "dark",
              "label": "Dark"
          },
          {
              "value": "primary",
              "label": "Primary"
          },
          {
              "value": "custom1",
              "label": "Custom color 1"
          },
          {
              "value": "custom2",
              "label": "Custom color 2"
          }
        ]
      },
      {
        "type":"select",
        "id":"button_effect",
        "label":"Button hover effect",
        "default":"default",
        "info":"Only working button style default, outline",
        "options":[
            {
                "label":"Default",
                "value":"default"
            },
            {
                "label":"Fade",
                "value":"fade"
            },
            {
                "label":"Rectangle out",
                "value":"rectangle-out"
            },
            {
                "label":"Sweep to right",
                "value":"sweep-to-right"
            },
            {
                "label":"Sweep to left",
                "value":"sweep-to-left"
            },
            {
                "label":"Sweep to bottom",
                "value":"sweep-to-bottom"
            },
            {
                "label":"Sweep to top",
                "value":"sweep-to-top"
            },
            {
                "label":"Shutter out horizontal",
                "value":"shutter-out-horizontal"
            },
            {
                "label":"Outline",
                "value":"outline"
            },
            {
                "label":"Shadow",
                "value":"shadow"
            }
        ]
      },
      {
        "type": "select",
        "id": "btn_pos",
        "label": "Button position",
        "default": "t4s-text-center",
        "options": [
          {
            "value": "t4s-text-start",
            "label": "Left"
          },
          {
            "value": "t4s-text-center",
            "label": "Center"
          },
          {
            "value": "t4s-text-end",
            "label": "Right"
          }
        ]
      },
      {
        "type": "header",
        "content": "+ Collection filter"
      },
      {
        "type": "select",
        "id": "type_filters",
        "label": "Filters type",
        "default": "facets",
        "options": [
          {
            "value": "facets_tags",
            "label": "Filter by tags"
          },
          {
            "value": "facets",
            "label": "Filter by product options"
          }
        ]
      },
      {
        "type": "header",
        "content": "2. Design options"
      },
      {
        "type": "select","id": "layout","default": "t4s-container-wrap","label": "Layout",
        "options": [
            { "value": "t4s-se-container", "label": "Container"},
            { "value": "t4s-container-wrap", "label": "Wrapped container"},
            { "value": "t4s-container-fluid", "label": "Full width"}
        ]
      },
      {
        "type": "color",
        "id": "cl_bg",
        "label": "Background"
      },
      {
        "type": "color_background",
        "id": "cl_bg_gradient",
        "label": "Background gradient"
      },
      {
        "type": "image_picker",
        "id": "image_bg",
        "label": "Background image"
      },
      {
          "type": "text",
          "id": "mg",
          "label": "Margin",
          "info":"Margin top, margin right, margin bottom, margin left. If you not use to blank",
          "default": ",,50px,",
          "placeholder": ",,50px,"
      },
      {
          "type": "text",
          "id": "pd",
          "label": "Padding",
          "info":"Padding top, padding right, padding bottom, padding left. If you not use to blank",
          "placeholder": "50px,,50px,"
      },
      {
        "type": "header",
        "content": "+ Design Tablet Options"
      },
      {
        "type": "text",
        "id": "mg_tb",
        "label": "Margin",
        "placeholder": ",,50px,"
      },
      {
        "type": "text",
        "id": "pd_tb",
        "label": "Padding",
        "placeholder": ",,50px,"
      },
      {
        "type": "header",
        "content": "+ Design mobile options"
      },
      {
          "type": "text",
          "id": "mg_mb",
          "label": "Margin",
          "default": ",,30px,",
          "placeholder": ",,50px,"
      },
      {
          "type": "text",
          "id": "pd_mb",
          "label": "Padding",
          "placeholder": ",,50px,"
      }
    ],
    "blocks": [
      {
         "type": "sortby",
         "name": "Sortby",
         "limit": 1
       },
       {
         "type": "layout",
         "name": "Layout switch",
         "limit": 1,
         "settings": [
            {
              "type": "paragraph",
              "content": "Not working with layout masonry"
            }
          ]
       },
       {
         "type": "filter",
         "name": "Filter",
         "limit": 1,
         "settings": [
            {
              "type": "select",
              "id": "style_filters",
              "label": "Filter style will show after click button filter ( desktop )",
              "default": "sidebar",
              "options": [
                {
                  "value": "sidebar",
                  "label": "Hidden sidebar"
                },
                {
                  "value": "area",
                  "label": "Filters area"
                }
              ]
            },
            {
              "type": "paragraph",
              "content": "On mobile always use hidden sidebar"
            }
          ]
       }
     
    ],
    "default": {
      "blocks": [
          { "type": "filter"},
          { "type": "layout"},
          { "type": "sortby"}
        ]
    }
  }
{%- endschema -%} 

{%- javascript -%}
{%- endjavascript -%}

 

GTLOfficial
Shopify Expert
144 28 47

Check this also
---> go to Snippet--------> and search ---->  product-grid-item4 --------> and add this code
<p>{{ product.description }} </p>.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
GTLOfficial
Shopify Expert
144 28 47

Hello @usmekhan91 did you add this code? please let us know if you need any help.

---> go to Snippet--------> and search ---->  product-grid-item4 --------> find class "t4s-product-info" ----------------> inside it search class "t4s-product-rating " and add this code
<p>{{ product.description }} </p>.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
usmekhan91
Shopify Partner
38 0 7

I had added this code but still product description is not appearing. I also added meta field within the code but still it is not displaying

usmekhan91_0-1717745059021.png

 



 

{%- liquid 
assign pr_url = product.url
assign pid = product.id
assign isDefault = product.has_only_default_variant
assign pr_variants = product.variants
assign current_variant = pr_variants.first
assign isPreoder = false

if product.tags contains 'isPreoder' or current_variant.inventory_policy == 'continue' and current_variant.inventory_management == 'shopify' and current_variant.inventory_quantity <= 0
   assign isPreoder = true
endif

if current_variant.inventory_management == 'shopify'
   assign max_qty = current_variant.inventory_quantity | default: 9999
else
   assign max_qty = 9999
endif
if current_variant.quantity_rule.max and max_qty > current_variant.quantity_rule.max
   assign max_qty = current_variant.quantity_rule.max
endif

assign meta_theme = product.metafields.theme
assign cus_qty = meta_theme.cus_qty | default: 1
if current_variant.quantity_rule.min and cus_qty < current_variant.quantity_rule.min
  assign cus_qty          = current_variant.quantity_rule.min
endif
assign isExternal = false
assign external_title = meta_theme.external_title 
assign external_link = meta_theme.external_link
if external_title != blank and external_link != blank 
   assign isExternal = true 
endif
assign isGrouped = false 
if  meta_theme.grouped != blank
   assign isGrouped = true 
endif

assign custom_badge = meta_theme.custom_badge
if custom_badge != blank
   assign arr_badge = custom_badge | replace: '  ', '' | replace: ' ;', ';' | replace: '; ', ';' | split: ';' | join: 'nt-t4s' | escape | split: 'nt-t4s'
   assign arr_badge_handle = arr_badge | join: 'nt-t4s' | handle | split: 'nt-t4s'
else
   assign badge_tags = product.tags | where: "badge_"
   if badge_tags.size > 0
      assign arr_badge_tags   = badge_tags | join: 'nt-t4s' | remove: 'badge_' | escape
      assign arr_badge        = arr_badge_tags | split: 'nt-t4s'
      assign arr_badge_handle = arr_badge_tags | handle | split: 'nt-t4s'
   endif
endif

assign countdown = time_meta | default: meta_theme.countdown | date: '%Y/%m/%d %H:%M:%S'
unless placeholder_img
   assign placeholder_img = settings.placeholder_img
endunless
assign image = product.featured_media | default: placeholder_img

assign color_count = 0
assign size_count = 0

if isDefault == false and enable_pr_color or enable_pr_size
   assign pr_options = product.options_with_values
   
   assign img_variants = pr_variants | where: "featured_image"
   assign available_variants = product.variants | where: "available"
   for option in pr_options
      assign name = option.name | downcase

      if enable_pr_color and get_color contains name and color_count == 0

        assign pr_option_color = 'option' | append: forloop.index
        assign color_variants_avai = available_variants | map: pr_option_color | uniq
        assign featured_imgs = img_variants | map: 'featured_image'
        
        assign color_variants = option.values
        if show_cl_type == '1'
          assign color_count = color_variants.size
        else
          if pr_options.size == 1
            assign color_variants = color_variants_avai
          endif
          assign color_count = color_variants_avai.size
        endif
       

      elsif enable_pr_size and get_size contains name and size_count == 0

        assign pr_option_size = 'option' | append: forloop.index 
        assign size_variants_avai = available_variants | map: pr_option_size | uniq
        assign size_variants = option.values
        if show_size_type == '1'
          assign size_count = size_variants.size
        else
          if pr_options.size == 1
            assign size_variants = size_variants_avai
          endif
          assign size_count = size_variants_avai.size
        endif

      endif

   endfor
endif -%}

<div class="t4s-product t4s-pr-grid t4s-pr-style4 t4s-pr-{{ pid }} {{ col }} t4s-col-item" data-product-options='{ "id":"{{ pid }}","cusQty":"{{ cus_qty }}","available":{{ product.available }}, "handle":"{{ product.handle }}", "isDefault": {{ isDefault }}, "VariantFirstID": {{ current_variant.id }}, "customBadge":{{ arr_badge | json }}, "customBadgeHandle":{{ arr_badge_handle | json }},"dateStart":{{ product.created_at | date: "%s" }}, "compare_at_price":{{ current_variant.compare_at_price | json }},"price":{{ current_variant.price | json }}, "isPreoder":{{ isPreoder }},"isExternal":{{ isExternal }}{% if isExternal %},"external_title":{{ external_title | json }},"external_link":"{{ external_link | escape }}"{% endif %},"image2":{% if product.media[1] != blank %}{{ product.media[1] | image_url: width: 1 | json }},"alt":{{ product.media[1].alt | escape | json }}{% else %}false{% endif %},"isGrouped":{{ isGrouped }},"maxQuantity":{% if isDefault and isPreoder == false %}{{ max_qty }}{% else %}9999{% endif %} }'>
  <div class="t4s-product-wrapper" timeline hdt-reveal="slide-in">
    <div data-cacl-slide class="t4s-product-inner t4s-pr t4s-oh">

      {%- if image != blank %}{% render 'product-img', image: image, imgatt: imgatt %}{% endif -%}
      <div data-product-badge data-sort="sale,new,soldout,preOrder,custom" class="t4s-product-badge"></div>
      <div class="t4s-product-btns">
        {%- if size_count > 0 and pr_size_pos == '1' %}{%- render 'product-size', size_variants: size_variants, size_variants_avai: size_variants_avai, show_size_type: show_size_type -%}{% endif -%}
        <div class="t4s-pr-group-btns">
           <div data-replace-atc></div>
           {%- if isGrowaveWishlist -%}
              {%- capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with pid %}{% endcapture -%}
              {%- unless the_snippet_fave_icon contains 'Liquid error' -%}<div class="t4s-pr-wishlist">{{ the_snippet_fave_icon }}</div>{%- endunless -%}
           {%- else -%}<div data-replace-wishlist data-tooltip="top-end"></div>
           {%- endif -%}
           <div data-replace-quickview data-tooltip="top-end"></div>
           <div data-replace-compare data-tooltip="top-end"></div>
        </div>
      </div>
      <div class="t4s-product-btns2">
         {%- if isGrowaveWishlist -%} 
            {%- capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with pid %}{% endcapture -%}
            {%- unless the_snippet_fave_icon contains 'Liquid error' -%}<div class="t4s-pr-item-btn t4s-pr-wishlist is--growave">{{ the_snippet_fave_icon }}</div>{%- endunless -%}
         {%- else -%}<div data-replace-wishlist data-tooltip="right"></div>
         {%- endif -%}
         <div data-replace-compare data-tooltip="right"></div>
      </div>
      {%- if use_countdown and countdown != blank %}{%- render 'product-countdown', countdown: countdown %}{% endif -%}
      <a data-pr-href class="t4s-full-width-link" href="{{ pr_url }}"></a>
    </div>
    <div class="t4s-product-info">
      <div class="t4s-product-info__inner">
         {%- if product.vendor.size > 0 and show_vendor -%}{% if use_link_vendor %}{% assign pr_vendor_handle = product.vendor | handle %}{% assign collection_vendor = collections[pr_vendor_handle] %}{% endif %}<div class="t4s-product-vendor"><a href="{% if use_link_vendor and collection_vendor.url != blank %}{{ collection_vendor.url }}{% else %}{{ product.vendor | url_for_vendor }}{% endif %}">{{ product.vendor }}</a></div>{%- endif -%}
         <h3 class="t4s-product-title"><a data-pr-href href="{{ pr_url }}">{{ product.title }}</a></h3>
         {%- render 'product-price', product: product, price_varies_style: price_varies_style, type: 'card', isGrouped: isGrouped -%}
         {%- if enable_rating %}{%- render 'product-rating', product: product, app_review: app_review -%}{% endif -%}
        {%- if show_list_btns -%}
         {%- assign description_excerpt = product.metafields.theme.description_excerpt -%}
          <div class="t4s-rte">{% if description_excerpt != blank %}{{ description_excerpt }}{% else %}{{ product.content | strip_html | truncatewords: 30 }}{% endif %}</div>
          <p>{{ product.description }} </p>
        {%- endif -%}
         {%- if color_count > 0 %}{% assign color_variants_str = color_variants | join: 'nt-t4s' %}<div class="t4s-product-colors" data-color-options='{ "color_count":{{ color_count }}, "color_variants":{{ color_variants_str | escape | split: 'nt-t4s' | json }}, "color_variants_avai":{{ color_variants_avai | join: 'nt-t4s' | escape | split: 'nt-t4s' | json }}, "color_variants_handle":{{ color_variants_str | handle | split: 'nt-t4s' | json }}, "img_variants":{{ featured_imgs | json }}, "id_variants":{{ img_variants | map: 'id' | json }}, "img_ratios":{{ featured_imgs | map: 'aspect_ratio' | json }}, "img_options":{{ img_variants | map: pr_option_color | join: 'nt-t4s' | escape | split: 'nt-t4s' | json }} }'><span class="t4s-pr-color__item"><span class="t4s-pr-color__value bg_color_ntloading"></span></span><span class="t4s-pr-color__item"><span class="t4s-pr-color__value bg_color_ntloading"></span></span><span class="t4s-pr-color__item"><span class="t4s-pr-color__value bg_color_ntloading"></span></span></div>{% endif -%}
         {%- if size_count > 0 and pr_size_pos == '2' %}{%- render 'product-size', size_variants: size_variants, size_variants_avai: size_variants_avai, show_size_type: show_size_type -%}{% endif -%}
      </div>
      {%- if show_list_btns -%}
        <div class="t4s-product-btns t4s-product-info__btns">
           {%- if settings.enable_quickview %}<a data-id="{{ pid }}" href="{{ pr_url }}" data-tooltip rel="nofollow" class="t4s-pr-item-btn t4s-pr-quickview" data-action-quickview><span class="t4s-svg-pr-icon"><svg viewBox="0 0 24 24"><use xlink:href="#t4s-icon-qv"></use></svg></span><span class="t4s-text-pr">{{ 'products.product_card.quick_view' | t }}</span></a>{% endif %}
           {%- if settings.enable_atc %}{%- render 'product-atc', pr_available: product.available, pr_url: pr_url, isDefault: isDefault, isPreoder: isPreoder, isExternal: isExternal, external_title: external_title, external_link: external_link, isGrouped: isGrouped, current_variant: current_variant, pid: pid, cus_qty: cus_qty, max_qty: max_qty -%}{% endif %}
        </div>
      {% endif %}
    </div>
  </div>
</div>