Products and Collections

Moving the Collection Description to the Bottom of the Page

Custom Code

Please note that this change involves making direct changes to the theme code. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.

To move the collection description to the bottom of your collection pages, follow these steps.

For the Parallax, Retina, Mobilia, Responsive, and Artisan themes 

Step 1: Open the code editor and find the "collection-template.liquid" file in the Sections folder.

Step 2: Depending on your theme and version, look for one of these blocks of code:

{% if collection.description != blank %}
 <div class="section clearfix collection_description">
 {{ collection.description }}
 </div>
 {% endif %}

or

{% if collection.description != blank %}
 <div class="feature_text">
 {{ collection.description }}
 </div>
 {% endif %}

Step 3: Depending on your theme and version, move this code after one of these blocks of code:

{% include 'pagination' with sidebar %}
 </div>

or

 {% render 'pagination',
 paginate: paginate,
 sidebar: sidebar
 %}

For the Turbo theme

Step 1: Open the code editor and find the "collection-template.liquid" file in the Sections folder.

Step 2: Depending on your theme and version, look for one of these blocks of code:

 {% if collection.description != blank %}
<div class="container">
<div class="one-whole column">
<div class="collection_description">
{{ collection.description }}
</div>
</div>
</div>
{% endif %}

Step 3: Move this code after this block of code:

 {% render 'pagination',
 paginate: paginate,
 %}
{% endif %}

For the Flex theme

Step 1: Open the code editor and find the collection__main.liquid file in the Sections folder. 

Step 2: Look for this block of code:

 {% comment %} Collection description {% endcomment %}
{% if collection.description != blank %}
<div class="container">
<div class="one-whole column">
<div class="collection__description content has-padding-bottom">
{{ collection.description }}
</div>
</div>
</div>
{% endif %}

Step 3: Move the code to place it between the final closing </div> and </section>.

</div>
</section>

new_position_for_description_block_in_flex_section_file.png

Important notes

  • This will move the collection description to the bottom of all collection pages throughout your store.
  • A common reason for moving the collection description to the bottom of collection pages is to improve SEO. However, please be aware that, although a variety of factors contribute to SEO, moving descriptions to the bottom of the page may affect your SEO strategy because one of the many signals search engines look for is the location of text within a page. There is some evidence that placing descriptions near the bottom of the page could affect your SEO.
  • At this time, there is no way to add a "read more," "toggle" or "expand" link or icon to your product description hide part of it until the user opts to click without custom code.
  • If you prefer to only move it to certain collections, you will need to create additional collection templates. To do this, follow the general steps here, but duplicate and rename the "collection.liquid" file in the "Templates" folder and "collection-template.liquid" in the "Sections" folder instead. 
  • For more advanced layouts, you can use the column framework within the collection description.

Related articles