FROM CACHE - en_header

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

Solved
mielemoda
Tourist
8 0 1

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

Accepted Solution (1)

Accepted Solutions
Guleria
Shopify Partner
2023 428 624

This is an accepted solution.

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

 

{%- unless collection.description == blank -%}
                <p class="collection-description text-lead">
                  {{ collection.description }}
                </p>
              {%- 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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.

View solution in original post

Replies 9 (9)
oscprofessional
Shopify Partner
12120 1883 2416

@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!

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Guleria
Shopify Partner
2023 428 624

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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
mielemoda
Tourist
8 0 1

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
Tourist
8 0 1

 @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
Shopify Partner
2023 428 624

This is an accepted solution.

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

 

{%- unless collection.description == blank -%}
                <p class="collection-description text-lead">
                  {{ collection.description }}
                </p>
              {%- 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

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
mielemoda
Tourist
8 0 1

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

You are great! Thank you again ☺️

amandao1
Tourist
7 0 2

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

{% section 'template-collection' %}

 

What do I do? 

urbandecor
Tourist
8 0 1

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 

urbandecor_0-1655754376629.png

 

 

 

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

urbandecor_1-1655754376751.png

 

 

{% assign blocks = section.blocks | where: 'type', 'header' %}
{% assign block = blocks[0] %}
{% if collection.description != '' and block.settings.display_collection_des %}
<div class="collection-des">
{% if settings.enable_multilang and collection.description contains '[lang2]' %}
<div class="rte lang1">
{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}
</div>
<div class="rte lang2">
{{ collection.description | split: '[lang2]' | last | split: '<img' | first }}
</div>
{% else %}
<div class="rte">
{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}
</div>
{% endif %}
</div>
{% endif %}

 

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

urbandecor_2-1655754376734.png

 

 

urbandecor
Tourist
8 0 1

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 

urbandecor_3-1655754411141.png

 

 

 

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

urbandecor_4-1655754411147.png

 

 

{% assign blocks = section.blocks | where: 'type', 'header' %}
{% assign block = blocks[0] %}
{% if collection.description != '' and block.settings.display_collection_des %}
<div class="collection-des">
{% if settings.enable_multilang and collection.description contains '[lang2]' %}
<div class="rte lang1">
{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}
</div>
<div class="rte lang2">
{{ collection.description | split: '[lang2]' | last | split: '<img' | first }}
</div>
{% else %}
<div class="rte">
{{ collection.description | split: '[lang2]' | first | split: '<img' | first }}
</div>
{% endif %}
</div>
{% endif %}

 

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

urbandecor_5-1655754411147.png