Move content from top to bottom of page - collection on Prestige theme

Solved
hp2020
Excursionist
16 0 13

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: Screen Shot 2020-04-02 at 4.44.23 PM.png

 

This is listed on the very top of the page, appearing before any listings.

 

Where I would like it to go:

 

deskot[s.jpg

Accepted Solution (1)

Accepted Solutions
microDev
Explorer
44 12 12

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!

View solution in original post

Replies 14 (14)
microDev
Explorer
44 12 12

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!

hp2020
Excursionist
16 0 13

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!


 

pioneer100
Shopify Partner
1118 145 481
Add me as a staff in your store, i will do it for free.
Email: candisoft100@gmail.com
Thank you
If helpful, Please Like and accept The Solution.
anshul84
New Member
3 0 0

Hi, Can you please help me with 'Prestige' theme also?

ThomasT
New Member
1 0 0

@anshul84  Did you find a solution?

I can't get the advice from above to work.

microDev
Explorer
44 12 12

You welcome to send me a private message with maybe a picture of what you have tried and I can try help you further.

kbuster
New Member
2 0 0

Just used this, works great!

MM34
New Member
3 0 0

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.

infodsp
New Member
1 0 0

Is there a way to do this in the Warehouse theme as well?

Shopena
Excursionist
12 0 4

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 -%}
Sabeen1
New Member
5 0 0

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>

 

 

 

 Screen Shot 2021-07-06 at 3.22.03 pm.png

 

 

Divyajain
New Member
4 0 0

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

Wesley9
New Member
13 0 0

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.

Wesley9
New Member
13 0 0

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.