Can some one help i want to show Collections description

[wahab55]

so i want to show Collection descrption on the bottom of collection page

this the liqued file of collection page
"

{% comment %}
For more information on collection tags:

• http://docs.shopify.com/themes/liquid-variables/collection
  {% endcomment %}
  {% if template contains ‘collection.list’ %}
  {%- assign per_page = settings.nb_per_page -%}
  {% elsif template contains ‘collection.24’ %}
  {%- assign per_page = 24 -%}
  {% elsif template contains ‘collection.48’ %}
  {%- assign per_page = 48 -%}
  {% else %}
  {%- assign per_page = settings.nb_per_page -%}
  {% endif %}

{% paginate collection.products by {{section.settings.prod_per_page}} %}

{% comment %}
Use .grid–rev so that the collection tags appear below the products on mobile
{% endcomment %}
{% if section.settings.select_style_bread == ‘style_1’ %}

{{collection.title}}

{% include 'breadcrumb' %}

{% elsif section.settings.select_style_bread == 'style_2' %}

{{collection.title}}

{% include 'breadcrumb' %}

{% elsif section.settings.select_style_bread == 'style_3' %}

{{collection.title}}

{% include 'breadcrumb' %}

{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="img_banner">
            <a href="{{settings[url_collection]}}">
              <img class="w-100" alt="section.settings.img_banner" src="{% if settings[img_collection] != blank %} {{settings[img_collection] |img_url : 'master'}} {% else %} //via.placeholder.com/110x110 {% endif %}">
            </a>
          </div>
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}

{% elsif section.settings.select_style_bread == ‘style_4’ %}

{{collection.title}}

{% include 'breadcrumb' %}

{% for i in (1..10) %} {% capture title_col %}banner_title_{{i}}{% endcapture %} {% capture link_col %}url_collection_{{i}}{% endcapture %} {% capture color_title %}color_title_{{i}}{% endcapture %} {% if settings[title_col] != blank %}
• {{settings[title_col]}}
{% endif %} {% endfor %}

{% elsif section.settings.select_style_bread == ‘style_5’ %}

{{collection.title}}

{% include 'breadcrumb' %}

{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}

{% elsif section.settings.select_style_bread == ‘style_6’ %}

{{collection.title}}

{% include 'breadcrumb' %}

{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="img_banner">
            <a href="{{settings[url_collection]}}">
              <img class="w-100" alt="section.settings.img_banner" src="{% if settings[img_collection] != blank %} {{settings[img_collection] |img_url : 'master'}} {% else %} //via.placeholder.com/110x110 {% endif %}">
            </a>
          </div>
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}

{% endif %}

.breadcrumb_collection .title-page h2{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb a{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb a i{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb strong{ color: {{section.settings.color_breadcrumb}} !important; } {% if section.settings.collection_layout == "bg_mordern" %} {% unless section.settings.select_style_bread == 'style_4' %} @media(min-width : 992px){ .breadcrumb_collection .bg-breadcrumb{ padding: 170px 0 190px } } {% endunless %} {% endif %}

{% if section.settings.collection_layout == “full_width” %}
{% if section.settings.filter_layout == “filter_dropdown” %}
{% include ‘collection-fullwidth3’ %}
{% else %}
{% include ‘collection-fullwidth’ %}
{% endif %}

{% elsif section.settings.collection_layout == “sidebar” %}
{% include ‘collection-layout-sidebar’ %}

{% elsif section.settings.collection_layout == “infinity_scroll” %}
{% include ‘collection-infinity-scroll’ %}

{% elsif section.settings.collection_layout == “bg_mordern” %}
{% include ‘collection-background-mordern’ %}

{% elsif section.settings.collection_layout == “bg_banner_mordern” %}
{% include ‘collection-banner-mordern2’ %}
{% endif %}

{% endpaginate %}

{% schema %}
{
“name”: “Collection Page”,
“settings”: [
{
“type”: “header”,
“content”: “Breadcrumb Config”
},
{
“type”: “select”,
“id”: “select_style_bread”,
“label”: “Select Style”,
“info”: “View Samples”,
“options”: [
{
“value”: “style_1”,
“label”: “Style 1”
},
{
“value”: “style_2”,
“label”: “Style 2”
},
{
“value”: “style_3”,
“label”: “Style 3”
},
{
“value”: “style_4”,
“label”: “Style 4”
},
{
“value”: “style_5”,
“label”: “Style 5”
},
{
“value”: “style_6”,
“label”: “Style 6”
}
]
},
{
“type”: “checkbox”,
“id”: “ena_bg_img”,
“label”: “Show Background Image”
},
{
“type”: “image_picker”,
“id”: “bg_breadcrumb”,
“label”: “Background Image BreadCrumb”,
“info”: “1920x510px recommended”
},
{
“type”: “color”,
“id”: “bg_color_breadcrumb”,
“label”: “Background Color”,
“default”: “#fff”
},
{
“type”: “color”,
“id”: “color_breadcrumb”,
“label”: “Links Breadcrumb Color”,
“default”: “#000”
},
{
“type”: “header”,
“content”: “Collection Layout”
},
{
“type”: “select”,
“id”: “collection_layout”,
“label”: “Select Layout”,
“options”: [
{
“value”: “full_width”,
“label”: “1.Collection Full Width”
},
{
“value”: “sidebar”,
“label”: “2.Collection Sidebar”
},
{
“value”: “infinity_scroll”,
“label”: “3.Collection Infinity Scroll”
},
{
“value”: “bg_mordern”,
“label”: “4.Collection Background Mordern”
},
{
“value”: “bg_banner_mordern”,
“label”: “5.Collection Banner Mordern”
}
]
},
{
“type”: “range”,
“id”: “prod_per_page”,
“min”: 2,
“max”: 50,
“step”: 1,
“label”: “Products Per Page”,
“default”: 8
},
{
“type”: “select”,
“id”: “prod_layout”,
“label”: “Product Layout”,
“options”: [
{
“value”: “prod_grid”,
“label”: “Product Grid View”
},
{
“value”: “prod_list”,
“label”: “Product List View”
}
]
},
{
“type”: “select”,
“id”: “prod_per_row”,
“label”: “Product Per Row(Only *Grid View)”,
“options”: [
{
“value”: “prod_col_4”,
“label”: “3 Product Per Row”
},
{
“value”: “prod_col_3”,
“label”: “4 Product Per Row”
},
{
“value”: “prod_col_2dot4”,
“label”: “5 Product Per Row”
}
]
},
{
“type”: “select”,
“id”: “filter_layout”,
“label”: “Filter Layout”,
“info”: “*Unless Collection Layout Sidebar”,
“options”: [
{
“value”: “filter_draw”,
“label”: “Filter Drawer”
},
{
“value”: “filter_push_left”,
“label”: “Filter Off Canvas”
},
{
“value”: “filter_dropdown”,
“label”: “Filter Dropdown”
},
{
“value”: “filter_collapse”,
“label”: “Filter Dropdown 2”
},
{
“value”: “filter_accordition”,
“label”: “Filter Accordition”
}
]
},
{
“type”: “header”,
“content”: “Collection Sidebar”,
“info” : “Only Collection Layout 2”
},
{
“type”: “select”,
“id”: “sidebar_layout”,
“label”: “Sidebar Layout”,
“options”: [
{
“value”: “sidebar_left”,
“label”: “Sidebar Left”
},
{
“value”: “sidebar_right”,
“label”: “Sidebar Right”
}
],
“default”: “sidebar_left”
},
{
“type”: “checkbox”,
“id”: “ena_sticky_sidebar”,
“label”: “Enable Sticky”,
“default”: true
},
{
“type”: “header”,
“content”: “Collection Banner Mordern”,
“info” : “Only Collection Layout 5”
},
{
“type”: “checkbox”,
“id”: “ena_banner_mordern”,
“label”: “Show Banner”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “bannerfull_img”,
“info”: “980 x 355px recommended”,
“label”: “Image Banner”
},
{
“type”: “text”,
“id”: “big_title”,
“label”: “Big Heading”,
“default”: “A NEW COLLECTION”
},
{
“type”: “text”,
“id”: “mini_title”,
“label”: “Mini Subheading”,
“default”: “SALE UP TO 30%”
},
{
“type”: “text”,
“id”: “btn_title”,
“label”: “Button label”,
“default”: “Shop Now”
},
{
“type”: “url”,
“id”: “bannerfull_url”,
“label”: “Url collection”
},
{
“type”: “color”,
“id”: “color_title”,
“label”: “Color”,
“default”: “#fff”
},
{
“type”: “header”,
“content”: “Best Sellers Product”,
“info”:“Only Collection Layout 1”
},
{
“type”: “checkbox”,
“id”: “ena_best_seller”,
“label”: “Enable”,
“default”: false
},
{
“type”: “text”,
“id”: “title_heading”,
“label”: “Heading”,
“default”: “BEST SELLERS”
},
{
“type”: “collection”,
“id”: “select_collection”,
“label”: “Select Collection”
},
{
“type”: “range”,
“id”: “products_limit”,
“label”: “Limit products”,
“min”: 3,
“max”: 50,
“step”: 1,
“default”: 6
},
{
“type”: “header”,
“content”: “Config”
},
{
“type”: “checkbox”,
“id”: “ena_filter”,
“label”: “Enable Filter”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “ena_filter2”,
“label”: “Enable SortBy”,
“default”: true
}
],
“presets”: [
{
“name”: “Collection Page”
}
]
}
{% endschema %}
"

there is the screenshot after the load more button need decription

[topnewyork]

Hi @wahab55 ,

kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks

[wahab55]

store url https://www.cosy-homes.uk/

[namphan]

Hi @wahab55,

Please add code here:

Code:

<div class="container container-v1">
<div class="rte">
{{ collection.description }}
</div>
</div>

If I helped you, then a Like would be truly appreciated.

[wahab55]

@namphan

<div class="container container-v1">
<div class="rte">
{{ collection.description }}
</div>
</div>

that work great but one more thing can we do if descrption is to long cut into half and add read more button like this

[namphan]

Hi @wahab55,

Please change all code:

<div class="container container-v1">
    <div class="rte">
      <load-more-content items-per-click="2" initial-count="2">
        {{ collection.description }}
        <button class="shop-button">Load more</button>
      </load-more-content>
    </div>
  </div>
  <script>
    class LoadMoreContent extends HTMLElement {
      constructor() {
        super();
        this.initialCount = parseInt(this.getAttribute("initial-count") || 3, 10);
        this.itemsPerClick = parseInt(this.getAttribute("items-per-click") || 3, 10);
        this.visibleCount = this.initialCount;
      }
  
      connectedCallback() {
        const allChildren = Array.from(this.children);
        this.loadMoreButton = allChildren.find(el => el.classList.contains('load-more-btn'));
        this.contentItems = allChildren.filter(el => el !== this.loadMoreButton);
  
        if (this.loadMoreButton) {
          this.loadMoreButton.addEventListener('click', () => {
            this.visibleCount += this.itemsPerClick;
            this.updateVisibility();
          });
        }
  
        this.updateVisibility();
      }
  
      updateVisibility() {
        this.contentItems.forEach((el, index) => {
          el.style.display = index < this.visibleCount ? 'block' : 'none';
        });
  
        if (this.visibleCount >= this.contentItems.length && this.loadMoreButton) {
          this.loadMoreButton.style.display = 'none';
        }
      }
    }
  
    customElements.define('load-more-content', LoadMoreContent);
  </script>

[TheUntechnickle]

Hey @wahab55!

Yeah, I can see you want to add the collection description at the bottom of your collection page, after the “LOAD MORE” button. Looking at your code, you’ll need to add it after the pagination section but before the endpaginate tag.

Here’s your updated liquid file with the collection description added at the bottom (Just copy and paste this):

{% comment %}
For more information on collection tags:

http://docs.shopify.com/themes/liquid-variables/collection
{% endcomment %}
{% if template contains 'collection.list' %}
{%- assign per_page = settings.nb_per_page -%}
{% elsif template contains 'collection.24' %}
{%- assign per_page = 24 -%}
{% elsif template contains 'collection.48' %}
{%- assign per_page = 48 -%}
{% else %}
{%- assign per_page = settings.nb_per_page -%}
{% endif %}
{% paginate collection.products by {{section.settings.prod_per_page}} %}

{% comment %}
Use .grid–rev so that the collection tags appear below the products on mobile
{% endcomment %}
{% if section.settings.select_style_bread == 'style_1' %}

{{collection.title}}
{% include 'breadcrumb' %}
{% elsif section.settings.select_style_bread == 'style_2' %}
{{collection.title}}
{% include 'breadcrumb' %}
{% elsif section.settings.select_style_bread == 'style_3' %}
{{collection.title}}
{% include 'breadcrumb' %}
{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="img_banner">
            <a href="{{settings[url_collection]}}">
              <img class="w-100" alt="section.settings.img_banner" src="{% if settings[img_collection] != blank %} {{settings[img_collection] |img_url : 'master'}} {% else %} //via.placeholder.com/110x110 {% endif %}">
            </a>
          </div>
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% elsif section.settings.select_style_bread == 'style_4' %}

{{collection.title}}
{% include 'breadcrumb' %}
{% for i in (1..10) %} {% capture title_col %}banner_title_{{i}}{% endcapture %} {% capture link_col %}url_collection_{{i}}{% endcapture %} {% capture color_title %}color_title_{{i}}{% endcapture %} {% if settings[title_col] != blank %}
{{settings[title_col]}}
{% endif %} {% endfor %}
{% elsif section.settings.select_style_bread == 'style_5' %}

{{collection.title}}
{% include 'breadcrumb' %}
{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% elsif section.settings.select_style_bread == 'style_6' %}

{{collection.title}}
{% include 'breadcrumb' %}
{% if section.settings.collection_layout == "bg_mordern" %}
{% else %}
<div class="container container-v2 list_col">
  <div class="justify-content-center d-flex">
    <div class="banner_cate col-lg-12">
      <div class="row js_col_breacrumb">
        {% for i in (1..10) %}
        {% capture title_collection %}title_col_{{i}}{% endcapture %}
        {% capture url_collection %}link_collection_{{i}}{% endcapture %}
        {% capture color_collection %}color_title_col_{{i}}{% endcapture %}
        {% capture img_collection %}img_col_{{i}}{% endcapture %}
        {% if settings[title_collection] != blank %}
        <div class="col-12 col_item {% if settings[url_collection] == collection.url %} active {% endif %}">
          <div class="img_banner">
            <a href="{{settings[url_collection]}}">
              <img class="w-100" alt="section.settings.img_banner" src="{% if settings[img_collection] != blank %} {{settings[img_collection] |img_url : 'master'}} {% else %} //via.placeholder.com/110x110 {% endif %}">
            </a>
          </div>
          <div class="banner_title text-center">
            <a style="color: {{settings[color_collection]}}" href="{{settings[url_collection]}}">{{settings[title_collection]}}</a>
          </div>

        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endif %}

<style>
.breadcrumb_collection .title-page h2{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb a{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb a i{ color: {{section.settings.color_breadcrumb}} !important; } .breadcrumb_collection .bread-crumb strong{ color: {{section.settings.color_breadcrumb}} !important; } {% if section.settings.collection_layout == "bg_mordern" %} {% unless section.settings.select_style_bread == 'style_4' %} @media(min-width : 992px){ .breadcrumb_collection .bg-breadcrumb{ padding: 170px 0 190px } } {% endunless %} {% endif %}
</style>

{% if section.settings.collection_layout == "full_width" %}
{% if section.settings.filter_layout == "filter_dropdown" %}
{% include 'collection-fullwidth3' %}
{% else %}
{% include 'collection-fullwidth' %}
{% endif %}

{% elsif section.settings.collection_layout == "sidebar" %}
{% include 'collection-layout-sidebar' %}

{% elsif section.settings.collection_layout == "infinity_scroll" %}
{% include 'collection-infinity-scroll' %}

{% elsif section.settings.collection_layout == "bg_mordern" %}
{% include 'collection-background-mordern' %}

{% elsif section.settings.collection_layout == "bg_banner_mordern" %}
{% include 'collection-banner-mordern2' %}
{% endif %}

{% comment %} Collection Description at Bottom {% endcomment %}
{% if collection.description != blank %}
<div class="container">
  <div class="collection-description-bottom">
    <div class="row">
      <div class="col-12">
        <div class="collection-desc-content">
          {{ collection.description }}
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% endpaginate %}

{% schema %}
{
"name": "Collection Page",
"settings": [
{
"type": "header",
"content": "Breadcrumb Config"
},
{
"type": "select",
"id": "select_style_bread",
"label": "Select Style",
"info": "View Samples",
"options": [
{
"value": "style_1",
"label": "Style 1"
},
{
"value": "style_2",
"label": "Style 2"
},
{
"value": "style_3",
"label": "Style 3"
},
{
"value": "style_4",
"label": "Style 4"
},
{
"value": "style_5",
"label": "Style 5"
},
{
"value": "style_6",
"label": "Style 6"
}
]
},
{
"type": "checkbox",
"id": "ena_bg_img",
"label": "Show Background Image"
},
{
"type": "image_picker",
"id": "bg_breadcrumb",
"label": "Background Image BreadCrumb",
"info": "1920x510px recommended"
},
{
"type": "color",
"id": "bg_color_breadcrumb",
"label": "Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "color_breadcrumb",
"label": "Links Breadcrumb Color",
"default": "#000"
},
{
"type": "header",
"content": "Collection Layout"
},
{
"type": "select",
"id": "collection_layout",
"label": "Select Layout",
"options": [
{
"value": "full_width",
"label": "1.Collection Full Width"
},
{
"value": "sidebar",
"label": "2.Collection Sidebar"
},
{
"value": "infinity_scroll",
"label": "3.Collection Infinity Scroll"
},
{
"value": "bg_mordern",
"label": "4.Collection Background Mordern"
},
{
"value": "bg_banner_mordern",
"label": "5.Collection Banner Mordern"
}
]
},
{
"type": "range",
"id": "prod_per_page",
"min": 2,
"max": 50,
"step": 1,
"label": "Products Per Page",
"default": 8
},
{
"type": "select",
"id": "prod_layout",
"label": "Product Layout",
"options": [
{
"value": "prod_grid",
"label": "Product Grid View"
},
{
"value": "prod_list",
"label": "Product List View"
}
]
},
{
"type": "select",
"id": "prod_per_row",
"label": "Product Per Row(Only *Grid View)",
"options": [
{
"value": "prod_col_4",
"label": "3 Product Per Row"
},
{
"value": "prod_col_3",
"label": "4 Product Per Row"
},
{
"value": "prod_col_2dot4",
"label": "5 Product Per Row"
}
]
},
{
"type": "select",
"id": "filter_layout",
"label": "Filter Layout",
"info": "*Unless Collection Layout Sidebar",
"options": [
{
"value": "filter_draw",
"label": "Filter Drawer"
},
{
"value": "filter_push_left",
"label": "Filter Off Canvas"
},
{
"value": "filter_dropdown",
"label": "Filter Dropdown"
},
{
"value": "filter_collapse",
"label": "Filter Dropdown 2"
},
{
"value": "filter_accordition",
"label": "Filter Accordition"
}
]
},
{
"type": "header",
"content": "Collection Sidebar",
"info" : "Only Collection Layout 2"
},
{
"type": "select",
"id": "sidebar_layout",
"label": "Sidebar Layout",
"options": [
{
"value": "sidebar_left",
"label": "Sidebar Left"
},
{
"value": "sidebar_right",
"label": "Sidebar Right"
}
],
"default": "sidebar_left"
},
{
"type": "checkbox",
"id": "ena_sticky_sidebar",
"label": "Enable Sticky",
"default": true
},
{
"type": "header",
"content": "Collection Banner Mordern",
"info" : "Only Collection Layout 5"
},
{
"type": "checkbox",
"id": "ena_banner_mordern",
"label": "Show Banner",
"default": true
},
{
"type": "image_picker",
"id": "bannerfull_img",
"info": "980 x 355px recommended",
"label": "Image Banner"
},
{
"type": "text",
"id": "big_title",
"label": "Big Heading",
"default": "A NEW COLLECTION"
},
{
"type": "text",
"id": "mini_title",
"label": "Mini Subheading",
"default": "SALE UP TO 30%"
},
{
"type": "text",
"id": "btn_title",
"label": "Button label",
"default": "Shop Now"
},
{
"type": "url",
"id": "bannerfull_url",
"label": "Url collection"
},
{
"type": "color",
"id": "color_title",
"label": "Color",
"default": "#fff"
},
{
"type": "header",
"content": "Best Sellers Product",
"info":"Only Collection Layout 1"
},
{
"type": "checkbox",
"id": "ena_best_seller",
"label": "Enable",
"default": false
},
{
"type": "text",
"id": "title_heading",
"label": "Heading",
"default": "BEST SELLERS"
},
{
"type": "collection",
"id": "select_collection",
"label": "Select Collection"
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 3,
"max": 50,
"step": 1,
"default": 6
},
{
"type": "header",
"content": "Config"
},
{
"type": "checkbox",
"id": "ena_filter",
"label": "Enable Filter",
"default": true
},
{
"type": "checkbox",
"id": "ena_filter2",
"label": "Enable SortBy",
"default": true
}
],
"presets": [
{
"name": "Collection Page"
}
]
}
{% endschema %}

What I added:

The collection description section right before the {% endpaginate %} tag:

{% comment %} Collection Description at Bottom {% endcomment %}
{% if collection.description != blank %}
<div class="container">
  <div class="collection-description-bottom">
    <div class="row">
      <div class="col-12">
        <div class="collection-desc-content">
          {{ collection.description }}
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

Optional CSS to style it:

.collection-description-bottom {
  margin-top: 40px;
  padding: 30px 0;
  border-top: 1px solid #eee;
}

.collection-desc-content {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

.collection-desc-content h2,
.collection-desc-content h3 {
  margin-bottom: 15px;
  color: #333;
}

.collection-desc-content p {
  margin-bottom: 15px;
}

This will show the collection description at the bottom of all your collection pages, after the products and pagination. Make sure you have descriptions added to your collections in the Shopify admin.

Let me know if you need any adjustments!

Shubham | Untechnickle

[wahab55]

the load more button is not working or visible

[Dan-From-Ryviu]

You can try going to your store admin > Sales channels > Online Store > Themes > Customize > Collecions > Default collection > Template > select Collection banner > turn off Description option

Then below Product grid, add Custom liquid section, add this code

<div class="page-width">
{{ collection.description }}
</div>

[namphan]

Hi @wahab55,

Please change all code:

<div class="container container-v1">
    <div class="rte product-grid-view">
      <load-more-content items-per-click="2" initial-count="2">
        {{ collection.description }}
        <button class="load-more-btn btn-loadmore">Load more</button>
      </load-more-content>
    </div>
  </div>
  <script>
    class LoadMoreContent extends HTMLElement {
      constructor() {
        super();
        this.initialCount = parseInt(this.getAttribute("initial-count") || 3, 10);
        this.itemsPerClick = parseInt(this.getAttribute("items-per-click") || 3, 10);
        this.visibleCount = this.initialCount;
      }
  
      connectedCallback() {
        const allChildren = Array.from(this.children);
        this.loadMoreButton = allChildren.find(el => el.classList.contains('load-more-btn'));
        this.contentItems = allChildren.filter(el => el !== this.loadMoreButton);
  
        if (this.loadMoreButton) {
          this.loadMoreButton.addEventListener('click', () => {
            this.visibleCount += this.itemsPerClick;
            this.updateVisibility();
          });
        }
  
        this.updateVisibility();
      }
  
      updateVisibility() {
        this.contentItems.forEach((el, index) => {
          el.style.display = index < this.visibleCount ? 'block' : 'none';
        });
  
        if (this.visibleCount >= this.contentItems.length && this.loadMoreButton) {
          this.loadMoreButton.style.display = 'none';
        }
      }
    }
  
    customElements.define('load-more-content', LoadMoreContent);
  </script>

[wahab55]

one last thing when page loads the decription length should be like this screen shot after clicking of read more opens all description
Thanks for your help

[namphan]

Hi @wahab55,

You can try changing these numbers it will work fine:

[wahab55]

Thanks You bro

[namphan]

Hi @wahab55,

It’s my pleasure