How to Effectively Remove Collection Descriptions from Shopify Pages with BemeApps

By Tony Ng.
February 7th, 2025

How to Effectively Remove Collection Descriptions from Shopify Pages with BemeApps

Understanding the Problem: Why Collection Descriptions Need Adjustments

Shopify store owners often face the challenge of managing collection descriptions on their collection pages. These descriptions, while informative, can occupy significant space at the top of the page, potentially affecting the user experience. Moving these descriptions to the bottom or making them foldable can enhance the visual appeal and usability of the site.

Common Issues with Collection Descriptions

Excessive Space Utilization: Descriptions placed at the top can push products further down, leading to a less engaging first impression.
Redundancy: If not managed properly, descriptions might appear twice, causing confusion and clutter.
Lack of Flexibility: Static descriptions can limit the design and functionality of a collection page.

Step-by-Step Guide to Move Collection Descriptions

Step 1: Accessing Your Shopify Theme Code

Navigate to your Shopify admin dashboard.
Click on Online Store and then Themes.
Select Actions and choose Edit Code.

Step 2: Locating the Correct File

In the code editor, find the theme.liquid file.
This file controls the overall layout and style of your Shopify store.

Step 3: Hiding the Collection Description

To remove the description from the top:

<style>
  .collection--description.rte {
    display: none !important;
  }
</style>

Add this code snippet just above the </body> tag in the theme.liquid file.

Step 4: Relocating the Description

Identify the template file for collection pages, usually collection.liquid.
Locate the section where the collection description is output.
Move this section to the bottom of the file, ensuring it displays after the product listings.

Step 5: Making the Description Foldable

To enhance user experience by making the description collapsible:

Use JavaScript or a simple jQuery script to toggle the visibility of the description.

<script>
  $(document).ready(function() {
    $('.collection-description').hide();
    $('.toggle-description').click(function() {
      $('.collection-description').slideToggle();
    });
  });
</script>

Add a button or link with the class toggle-description to trigger the toggle action.

Troubleshooting Common Issues

Description Not Hiding: Ensure the CSS selector matches the exact class used in your theme.
JavaScript Errors: Check for console errors and ensure jQuery is loaded on your page.

Additional Tips for Shopify Store Optimization

Regularly update your theme to incorporate the latest features and improvements.
Test changes on a development theme before implementing them on your live site.