Display Collection Description at the bottom of the Page

Display Collection Description at the bottom of the Page

tessaivy
Visitor
3 0 0

Hello!
I would like to display the product description a the bottom of the page. I tried a few codes that people posted but no matter what I change, the product description is at the top of the page.

 

I am using a 3rd party there.

 

Here is the code under 'collection-template.liquid':

 

{% comment %}
This sections requires the same `paginate_by` variable value as
the other sections for the ajax loading to work.
If you change the number below, it must also be changed in:
- sections/collection-template
- sections/featured-collection-slider
- snippets/page-block-featured-collection-slider
{% endcomment %}
{%- liquid
assign paginate_by = 24

if section.settings.collection_tags_style == 'inline' and collection.all_tags.size > 0
assign paginate_by = paginate_by | minus: 1
endif

case section.settings.per_row_desktop
when 2
assign grid_large_width = 'medium-up--one-half'
when 3
assign grid_large_width = 'medium-up--one-third'
when 4
assign grid_large_width = 'medium-up--one-quarter'
endcase

assign per_row_mobile = section.settings.per_row_mobile
assign grid_small_width = 'grid-product--padded'

if section.settings.per_row_mobile contains '2'
assign per_row_mobile = 2
assign grid_small_width = 'small--one-half'
endif
-%}

{%- capture grid_item_width -%}{{ grid_small_width }} {{ grid_large_width}}{%- endcapture -%}

{% paginate collection.products by paginate_by %}

<div
id="CollectionSection"
data-section-id="{{ section.id }}"
data-section-type="collection-template"
data-product-sliders-mobile="{% if section.settings.per_row_mobile == '1' %}true{% else %}false{% endif %}">

<div class="page-width">
<div id="CollectionAjaxContent">
<div
class="grid grid--uniform grid--scattered-large-{{ section.settings.per_row_desktop }} grid--scattered-small-{{ per_row_mobile }}{% if section.settings.per_row_mobile == '2-flush' %} small--grid--flush{% endif %}"
data-collection-container>

{%- for product in collection.products -%}
{%- render 'product-grid-item'
product: product,
grid_item_width: grid_item_width
-%}
{%- else -%}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endfor -%}
</div>

{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
</div>

{%- if collection.description != blank and section.settings.description_bottom -%}
<hr class="hr--clear hr--medium">
<div class="rte text-center">
{{ collection.description }}
</div>
{%- endif -%}
</div>
</div>

{% endpaginate %}

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "range",
"id": "per_row_desktop",
"label": "Desktop products per row",
"default": 3,
"min": 2,
"max": 4,
"step": 1
},
{
"type": "select",
"id": "per_row_mobile",
"label": "Mobile products per row",
"default": "1",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2, spaced"
},
{
"value": "2-flush",
"label": "2, flush"
}
]
},
{
"type": "checkbox",
"id": "description_bottom",
"label": "Show collection description at bottom of page"
}
]
}
{% endschema %}

 

Reply 1 (1)

Viktor_Shtodler
Shopify Partner
21 1 14

Hello,
Try this code:

{%- comment %}
This sections requires the same `paginate_by` variable value as
the other sections for the ajax loading to work.
If you change the number below, it must also be changed in:
- sections/collection-template
- sections/featured-collection-slider
- snippets/page-block-featured-collection-slider
{% endcomment %}
{%- liquid
assign paginate_by = 24

if section.settings.collection_tags_style == 'inline' and collection.all_tags.size > 0
assign paginate_by = paginate_by | minus: 1
endif

case section.settings.per_row_desktop
when 2
assign grid_large_width = 'medium-up--one-half'
when 3
assign grid_large_width = 'medium-up--one-third'
when 4
assign grid_large_width = 'medium-up--one-quarter'
endcase

assign per_row_mobile = section.settings.per_row_mobile
assign grid_small_width = 'grid-product--padded'

if section.settings.per_row_mobile contains '2'
assign per_row_mobile = 2
assign grid_small_width = 'small--one-half'
endif
-%}

{%- capture grid_item_width -%}{{ grid_small_width }} {{ grid_large_width}}{%- endcapture -%}

<div
id="CollectionSection"
data-section-id="{{ section.id }}"
data-section-type="collection-template"
data-product-sliders-mobile="{% if section.settings.per_row_mobile == '1' %}true{% else %}false{% endif %}">

<div class="page-width">
<div id="CollectionAjaxContent">
<div
class="grid grid--uniform grid--scattered-large-{{ section.settings.per_row_desktop }} grid--scattered-small-{{ per_row_mobile }}{% if section.settings.per_row_mobile == '2-flush' %} small--grid--flush{% endif %}"
data-collection-container>

{%- for product in collection.products -%}
{%- render 'product-grid-item'
product: product,
grid_item_width: grid_item_width
-%}
{%- else -%}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endfor -%}
</div>

{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
</div>

</div>
</div>

<hr class="hr--clear hr--medium">
<div class="rte text-center">
{% if collection.description != blank and section.settings.description_bottom %}
{{ collection.description }}
{% endif %}
</div>

{% endpaginate %}

{% if paginate.pages > 1 %}
<div class="pagination">
</div>
{% endif %}

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "range",
"id": "per_row_desktop",
"label": "Desktop products per row",
"default": 3,
"min": 2,
"max": 4,
"step": 1
},
{
"type": "select",
"id": "per_row_mobile",
"label": "Mobile products per row",
"default": "1",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2, spaced"
},
{
"value": "2-flush",
"label": "2, flush"
}
]
},
{
"type": "checkbox",
"id": "description_bottom",
"label": "Show collection description at bottom of page"
}
]
}
{% endschema %}

 

If this post was helpful, give it a like to help others with the same issue!
You can reach me at: v.shtodler@gmail.com or www.buildshopify.store