Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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 -%}
And just to next line add the previous code which you copied.
Thanks
.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!
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!
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 %}
<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
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
@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!
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 -%}
And just to next line add the previous code which you copied.
Thanks
@Developer-G thank you so much! This worked like a charm.
You are great! Thank you again ☺️
I have the same problem but my code just looks like this in the collection.liquid:
{% section 'template-collection' %}
What do I do?
Hello,
Can you please help us find this code?
We don't have: collection-template.liquid
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
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.
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 %}
<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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024