Solved

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

mielemoda
Tourist
9 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)
Developer-G
Shopify Partner
3032 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 13 (13)

oscprofessional
Shopify Partner
15830 2369 3071

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
mielemoda
Tourist
9 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!

urbandecor
Tourist
11 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

 

 

urbandecor
Tourist
11 0 1

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

Developer-G
Shopify Partner
3032 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
mielemoda
Tourist
9 0 1

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

Developer-G
Shopify Partner
3032 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
mielemoda
Tourist
9 0 1

@Developer-G 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? 

oskaronetwo
Visitor
2 0 0

Hello,

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

oskaronetwo
Visitor
2 0 0

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

Developer-G
Shopify Partner
3032 593 846

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.   

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
urbandecor
Tourist
11 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