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

Solved
mielemoda
Tourist
4 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
1851 397 563

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal

View solution in original post

Replies 7 (7)
oscprofessional
Shopify Partner
9209 1564 1929

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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Guleria
Shopify Partner
1851 397 563

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
mielemoda
Tourist
4 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
4 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
1851 397 563

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal

View solution in original post

mielemoda
Tourist
4 0 1

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

You are great! Thank you again ☺️

amandao1
New Member
1 0 0

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

{% section 'template-collection' %}

 

What do I do?