All things Shopify and commerce
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 %}
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 %}
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025