Liquid, JavaScript, themes, sales channels
I would like to move the description on my collection pages to below the actual images (near the footer). Is this something I can easily do?
URL: cocoandlily.com (example specifically on this page: https://cocoandlily.com/collections/graphic-tees)
What it looks like now:
This is listed on the very top of the page, appearing before any listings.
Where I would like it to go:
Solved! Go to the solution
This is an accepted solution.
Hi hp2020. Walter from microDev here (Shopify Partner).
Yes, this is a simply solution! all you want to do is go to your Theme and in the "Actions" menu, select "Edit Code". Now go to the folder names "Sections" and find the section called "collections-template". This may have a slightly different name depending on your theme. Now press CTRL+F to use the find bar and search for {{ collection.description }}. You are looking for a code section that looks something like this:
{% if collection.description != blank %} <div class="section-header__description rte"> {{ collection.description }} </div> {% endif %}
All you need to do is cut this full section and paste it below a section of code that should look like this towards the bottom of your page:
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}"> <div class="card-list__column{% if totalProducts == 1 %} card-list__column--center{% endif %} grid grid__item {{ gridClasses }}"> {% for product in collection.products %} {% include 'product-card', product: product, grid_style: section.settings.grid_style %} {% endfor %} </div> </div>
That's all you need to do! This will apply to all your collection pages.
If you need any further help, don't come right or want some other customizations as well, feel free to send me an email at support@microDev.today and I'll be happy to see how I can help you!
This is an accepted solution.
Hi hp2020. Walter from microDev here (Shopify Partner).
Yes, this is a simply solution! all you want to do is go to your Theme and in the "Actions" menu, select "Edit Code". Now go to the folder names "Sections" and find the section called "collections-template". This may have a slightly different name depending on your theme. Now press CTRL+F to use the find bar and search for {{ collection.description }}. You are looking for a code section that looks something like this:
{% if collection.description != blank %} <div class="section-header__description rte"> {{ collection.description }} </div> {% endif %}
All you need to do is cut this full section and paste it below a section of code that should look like this towards the bottom of your page:
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}"> <div class="card-list__column{% if totalProducts == 1 %} card-list__column--center{% endif %} grid grid__item {{ gridClasses }}"> {% for product in collection.products %} {% include 'product-card', product: product, grid_style: section.settings.grid_style %} {% endfor %} </div> </div>
That's all you need to do! This will apply to all your collection pages.
If you need any further help, don't come right or want some other customizations as well, feel free to send me an email at support@microDev.today and I'll be happy to see how I can help you!
I will email you. Thanks!
@microDev wrote:Hi hp2020. Walter from microDev here (Shopify Partner).
Yes, this is a simply solution! all you want to do is go to your Theme and in the "Actions" menu, select "Edit Code". Now go to the folder names "Sections" and find the section called "collections-template". This may have a slightly different name depending on your theme. Now press CTRL+F to use the find bar and search for {{ collection.description }}. You are looking for a code section that looks something like this:
{% if collection.description != blank %} <div class="section-header__description rte"> {{ collection.description }} </div> {% endif %}All you need to do is cut this full section and paste it below a section of code that should look like this towards the bottom of your page:
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}"> <div class="card-list__column{% if totalProducts == 1 %} card-list__column--center{% endif %} grid grid__item {{ gridClasses }}"> {% for product in collection.products %} {% include 'product-card', product: product, grid_style: section.settings.grid_style %} {% endfor %} </div> </div>That's all you need to do! This will apply to all your collection pages.
If you need any further help, don't come right or want some other customizations as well, feel free to send me an email at support@microDev.today and I'll be happy to see how I can help you!
Hi, Can you please help me with 'Prestige' theme also?
You welcome to send me a private message with maybe a picture of what you have tried and I can try help you further.
Just used this, works great!
Just used this too and it worked perfectly!
Any tip on how to keep and/or repeat the collection title at the top of the page?
As it is I have moved everything to the bottom, but I'd love to keep the title at the top.
can u help me on this i tried it on prestige theme but dint work, i want to put content of collection on bottom of the page of my website https://jhakhas.com/collections/punjabi-salwar-suits
Hi,
I found the solution for this at this form: https://plaktheme.com/community/collection-page/collection-description/
This works as well for the Prestige theme. Besides it moves only the description to the bottom not your title and collection image.
Is there a way to do this in the Warehouse theme as well?
I'd like to know this as well. The code looks way different.
In collection-tamplate.liquid it shows:
<p class="collection__products-count text--small hidden-desk">{{ 'collection.general.products_count' | t: count: collection.all_products_count }}</p>
</div>
</div>
{%- if collection.description != blank -%}
{%- assign allow_collapse_description = false -%}
{%- if section.settings.collapse_collection_description -%}
{%- assign allow_collapse_description = true -%}
{%- endif -%}
<div class="collection__description {% if allow_collapse_description %}expandable-content{% endif %}" aria-expanded="false">
<div class="rte">
{{ collection.description }}
</div>
{%- if allow_collapse_description -%}
<button class="expandable-content__toggle">
<span class="expandable-content__toggle-icon"></span>
<span class="expandable-content__toggle-text" data-view-more="{{ 'collection.general.view_more' | t | escape }}" data-view-less="{{ 'collection.general.view_less' | t | escape }}">{{- 'collection.general.view_more' | t -}}</span>
</button>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</header>
And at the bottom it shows:
COLLECTION PRODUCTS
--------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if collection.products_count == 0 -%}
<div class="empty-state empty-state--tight">
<p class="empty-state__description">{{ 'collection.general.no_results' | t }}</p>
<div class="empty-state__button-container">
<button class="empty-state__button button button--primary" data-action="clear-tags">{{ 'collection.filter.clear_all' | t }}</button>
</div>
</div>
{%- else -%}
{%- if view_mode == 'grid' -%}
{%- assign show_as_list = false -%}
{%- else -%}
{%- assign show_as_list = true -%}
{%- endif -%}
<div class="product-list product-list--collection {% if has_filters %}product-list--with-sidebar{% endif %}">
{%- for product in collection.products -%}
{%- render 'product-item', product: product, list: show_as_list, grid_classes: grid_classes -%}
{%- endfor -%}
</div>
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endpaginate -%}
</div>
</div>
{%- comment -%}
Hi,
I am using We Are Underground Theme, the collection description is easily placed at the bottom of the page but it comes next to the empty space to the product image.
I want to bring it at the bottom as a seperate paragraph.
See screenshot. Also i have given the current code.
I have tried adding "and false" but this didn't work.
Thanks,
{% if collection.description != blank %}
<div class="rte">
{%assign seo_content = collection.description %}
{{ seo_content[0] }}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
{% endif %}
</div>
{% endif %}
{{ seo_content[1] }}
{% include 'pagination' %}
{% endpaginate %}
</div>
hi, despite trying several fixes, i'm unable to add my collection description to the bottom of the page in Prestige theme. can you help me?
Hi,
I would to implement this in my prestige theme as well. How can i do this?
In code of Prestige you find twice this could and if you change it the lay-out will be completely different.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024