Move Collection Description to bottom of page

thirza · May 9, 2022, 7:07pm

Hi, i’ve been reading a lot of posts about this subject but cant seem to find the answer for my theme. I’m using the Blockshop theme.

I would like to split my collection title and collection description and move the collection description to the bottom of the page whilst keeping the collection title up. There will be lots of text and it would be too time consuming for the customer to scroll all the way to the products every page. my url is: Lillyrose | Trendy & shiny jewelry | Shop online

Any help would be very much appreciated!

KetanKumar · May 10, 2022, 4:17am

@thirza

oh sorry for that can you please send collection page code so i will update

thirza · May 10, 2022, 6:27am

Thank you so much!

I have a collection.json in templates, and collection–body.liquid, collection–header.liquid
and collection–navigation.liquid in sections. So i guess it’s collection-header.liquid? I’m pasting the code here:

{%- liquid
assign alt_color = section.settings.alt-color
assign apply_overlay = section.settings.apply-overlay
assign enable = section.settings.enable-header
assign image_height = section.settings.image-height
assign show_description = section.settings.show-description
assign show_image = section.settings.show-image
assign show_title = section.settings.show-title
assign title_alignment = section.settings.title-alignment
assign use_image_fallback = section.settings.use-image-fallback
-%}

{% if enable %}
{% capture header_image %}

{% if collection.image %} {% render "image", image: collection.image, darken: apply_overlay, darken_mobile: apply_overlay, full_width: true %} {% elsif collection.products.first.featured_media.preview_image and use_image_fallback %} {% render "image", image: collection.products.first.featured_media.preview_image, darken: apply_overlay, darken_mobile: apply_overlay, full_width: true %} {% else %} {% assign show_image = false %} {% endif %}

{% endcapture %}

{% if show_image %} {{ header_image }} {% endif %}

{% if show_title or show_description %}

{% if show_title and collection.title != blank %}

{% endif %}

{% if show_description and collection.description != blank %}

{% endif %}

{% schema %}
{
“name”: “Collection header”,
“settings”: [
{
“id”: “enable-header”,
“label”: “Enable”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “show-title”,
“label”: “Show collection title”,
“type”: “checkbox”,
“default”: true
},
{
“label”: “Position title”,
“id”: “title-alignment”,
“type”: “radio”,
“options”: [
{ “value”: “left”, “label”: “Left” },
{ “value”: “center”, “label”: “Center” }
],
“default”: “center”
},
{
“id”: “show-description”,
“label”: “Show collection description”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “show-image”,
“label”: “Show collection image”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “use-image-fallback”,
“label”: “Use a product image if no collection image found”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “image-height”,
“label”: “Height”,
“type”: “select”,
“options”: [
{ “value”: “small”, “label”: “Small” },
{ “value”: “medium”, “label”: “Medium” },
{ “value”: “large”, “label”: “Large” },
{ “value”: “original”, “label”: “Natural (no cropping)” }
],
“default”: “medium”
},
{
“id”: “alt-color”,
“label”: “Use light text color”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “apply-overlay”,
“label”: “Darken image”,
“type”: “checkbox”,
“default”: true,
“info”: “Can enhance text visibility”
}
]
}
{% endschema %}

KetanKumar · May 10, 2022, 7:11am

@thirza

yes please remove this code that file

{% if show_description and collection.description != blank %}

{{ collection.description }}

{% endif %}

after your have collection bottom of the file

LitCommerce · May 10, 2022, 9:21am

Hi @thirza ,

You can follow these steps:

Step 1: Go to Customize > Collection > Collection header > Show collection description. You need to disable it to not show description at title.
Step 2: Go to collection–body.liquid file and paste this at the bottom of the file:

{% if collection.description != blank %}
  
    

      {{ collection.description }}
    

  

{% endif %}

Hope it is clear to you.

thirza · May 10, 2022, 12:04pm

It worked! Thank you so much

RVDP1999 · September 30, 2022, 12:22pm

Hello, do you know how I can do it in the warehouse theme? I can’t find it anywhere…

LitCommerce · September 30, 2022, 2:43pm

Hi @RVDP1999 ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

KetanKumar · September 30, 2022, 2:48pm

@RVDP1999

yes, please share store url and code

RVDP1999 · October 4, 2022, 9:22am

www.10watches.nl

RVDP1999 · October 5, 2022, 12:51pm

Hello, do you know how I can do it in the warehouse theme? I can’t find it anywhere… URL: www.10watches.nl

KetanKumar · October 5, 2022, 1:04pm

@RVDP1999

can you please send collection code

RVDP1999 · October 5, 2022, 1:32pm

TOP PART (COLLECTION INFO + TOOLBAR)

{%- endcomment -%}

{%- if collection.all_products_count == 0 -%}

{%- else -%}

{%- comment -%} IMPLEMENTATION NOTE: unfortunately I was forced to add a lot of extra div (collection__meta, collection__meta-inner, collection__header-inner,...) to be able to accommodate with the brand related layout which make things more complicated... {%- endcomment -%}

{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}

{%- endif -%}

{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}

{%- endif -%}

{%- if collection.handle == 'all' -%} {{- 'collection.general.all_products' | t -}} {%- else -%} {{- collection.title -}} {%- endif -%}

{%- assign offset = paginate.current_offset | plus: 1 -%}
{%- assign page_size = paginate.current_offset | plus: paginate.page_size | at_most: paginate.items -%}

{{ 'collection.general.products_count' | t: count: collection.all_products_count }}

{{ 'collection.general.showing_count' | t: offset: offset, page_size: page_size, count: paginate.items }}

{%- if collection.description != blank -%}
{%- assign allow_collapse_description = false -%}

{%- if section.settings.collapse_collection_description -%}
{%- assign allow_collapse_description = true -%}
{%- endif -%}

{%- if allow_collapse_description -%}

{{- ‘collection.general.view_more’ | t -}}

{%- endif -%}

{%- endif -%}

KetanKumar · October 5, 2022, 1:36pm

@RVDP1999

yes this current

also i need collection code also

RVDP1999 · November 4, 2022, 2:36pm

What do you exactly mean? The theme is warehouse. Where can I find the collection code

SarahMacleod · January 15, 2023, 10:13am

Hi LitCommerce,

I am having the same issue as Lily…

Can you please tell me where I can find:

“Customize > Collection > Collection header > Show collection description”

Furthermore, how can I ensure the text is formatted nicely (centre align, etc) when it is at the bottom of the section?

Thank you

Topic		Replies	Views
How to move Collection Description to bottom of page and make text full width Store Design	13	69	September 2, 2023
How to move Collection Description to bottom of Store Design	10	24	October 16, 2021
Move descriptions above my collection page Technical Q&A	18	41	May 5, 2022
Need Help Moving Collection Title Above and description at the end of the collection page Store Design design , customizations , collection-page , css , shopify-themes , html	5	16	November 1, 2024
Impulse Theme - Collection Description is stuck below Collection Products in Product Grid Store Design	24	524	March 23, 2022

Move Collection Description to bottom of page

{{ collection.title }}

TOP PART (COLLECTION INFO + TOOLBAR)

{%- if collection.handle == 'all' -%} {{- 'collection.general.all_products' | t -}} {%- else -%} {{- collection.title -}} {%- endif -%}

Related topics