How to move Collection Description to bottom of page and make text full width

[mielemoda]

Hi,

Can someone help me with this as it has been very frustrating trying to figure this out on my own. I use the Debutify theme. I have long descriptions on most of my Collection pages. Also the text is all bunched up in the middle of the page. When a collection is viewed on mobile, the entire screen is taken by the text and a visitor would have to scroll down to begin to see the items in the collection. Very annoying and time consuming. I didn’t find any instructions here as to how to move the description to the bottom of the collection page hence my question. Here is an example of what it looks like now: https://www.mielemoda.com/collections/everlasting-delight And here is an example of what I would like to make it look like: https://pinklily.com/collections/dresses Also, it would be great if the text is aligned with the images (like in the above example)

Any help would be appreciated, please and thank you!

Dani

[oscprofessional]

@mielemoda ,

.section-header {
    text-align: left;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.grid.grid-spacer.collection-list-products {
    order: 1;
}
.grid.simple_collection_header {
    order: 2;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Hope this will work for you !

let me know!

[Guleria]

Hello @mielemoda ,

1. Go to Online Store->Theme->Edit code
2. Sections → collection-template.liquid

Now here search for this code

{%- if collection.handle == 'all' or collection.handle == 'frontpage' -%}
        {{ collection_header }}
      {%- else -%}
        {%- unless settings.show_hero and collection.image -%}
          {{ collection_header }}
        {%- endunless -%}
      {%- endif -%}

once you find it then cut/copy it.

Next search for this code in same file

{%- endpaginate -%}

And just to next line add the previous code which you copied.

Thanks

[mielemoda]

Hi there @oscprofessional , and thank you for your quick reply and suggestion.

I followed your instructions and although it worked, it moved the Collection description and the Collection title to the bottom of the page. I would like for the title to stay on top. Also, one other thing I’ve noticed is that the page counts (hope that’s what they are called) at the bottom (where you can click to go to the next page of items) moved to the top of the page. That should stay on the bottom too. Any idea how to move ONLY the collection description? Sorry to be a pain …

Thank you!

[mielemoda]

@Guleria hi and thank you for taking the time!

Like the other suggestion above, it moved both the collection title and the description to the bottom. Do you know how to separate both to where only the description moves to the bottom? That would be great

Thank you so much!

[Guleria]

Please ignore previous reply and follow this one Search in same file for this code

{%- unless collection.description == blank -%}
                

                  {{ collection.description }}
                

              {%- endunless -%}

once you find it then cut/copy it.

Next search for this code in same file

{%- endpaginate -%}

Copy

And just to next line add the previous code which you copied.

Thanks

[mielemoda]

@Guleria thank you so much! This worked like a charm.

You are great! Thank you again

[amandao1]

I have the same problem but my code just looks like this in the collection.liquid:

{% section ‘template-collection’ %}

What do I do?

[urbandecor]

Can someone help me with this as it has been very frustrating trying to figure this out on my own. The theme name is ELLA. I have long descriptions on most of my Collection pages. Also the text is all bunched up in the middle of the page. When a collection is viewed on mobile, the entire screen is taken by the text and a visitor would have to scroll down to begin to see the items in the collection. Very annoying and time-consuming. I didn’t find any instructions here as to how to move the description to the bottom of the collection page hence my question. Here is an example of what it looks like now: https://urbandecoria.myshopify.com/collections/bed-sheets

Here is an example of what I would like to make it look like: https://www.mielemoda.com/collections/everlasting-delight

Also, it would be great if the text is aligned with the images like in the above example.

Any help would be appreciated, please and thank you

Here is the collection description snippet

{% assign blocks = section.blocks | where: ‘type’, ‘header’ %}
{% assign block = blocks[0] %}
{% if collection.description != ‘’ and block.settings.display_collection_des %}

{% if settings.enable_multilang and collection.description contains '[lang2]' %}

{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}

{{ collection.description | split: '[lang2]' | last | split: '<img' | first }}

{% else %}

{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}

{% endif %}

{% endif %}

and this snippet is being render in collection-supermarket.liquid

[urbandecor]

Can you help me with this as it has been very frustrating trying to figure this out on my own. The theme name is ELLA. I have long descriptions on most of my Collection pages. Also the text is all bunched up in the middle of the page. When a collection is viewed on mobile, the entire screen is taken by the text and a visitor would have to scroll down to begin to see the items in the collection. Very annoying and time-consuming. I didn’t find any instructions here as to how to move the description to the bottom of the collection page hence my question. Here is an example of what it looks like now: https://urbandecoria.myshopify.com/collections/bed-sheets

Here is an example of what I would like to make it look like: https://www.mielemoda.com/collections/everlasting-delight

Also, it would be great if the text is aligned with the images like in the above example.

Any help would be appreciated, please and thank you

Here is the collection description snippet

{% assign blocks = section.blocks | where: ‘type’, ‘header’ %}
{% assign block = blocks[0] %}
{% if collection.description != ‘’ and block.settings.display_collection_des %}

{% if settings.enable_multilang and collection.description contains '[lang2]' %}

{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}

{{ collection.description | split: '[lang2]' | last | split: '<img' | first }}

{% else %}

{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}

{% endif %}

{% endif %}

and this snippet is being render in collection-supermarket.liquid

[urbandecor]

I did that description and you can check that www.urbandecoria.com

[oskaronetwo]

Hello,

Can you please help us find this code?
We don’t have: collection-template.liquid

[oskaronetwo]

Is it possible that this can no longer be edited on the new Shopify? Or that it needs to be configured differently? We would really like to have all the Collection description at the bottom of the Collection page. Thanks

[Guleria]

Please share the store URL and the name of the theme.
Also keep note if you are using a third party premium theme then you have to either contact theme support or hire a developer.