View apps on Shopify
SEO Optimization Techniques

How to Effectively Remove Collection Descriptions from Shopify Pages with BemeApps

Learn how to adjust collection descriptions on Shopify pages to enhance user experience and visual appeal. Follow a step-by-step guide to move, hide, and make collection descriptions foldable for…

Tony Ng.··3 min read
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

  1. Excessive Space Utilization: Descriptions placed at the top can push products further down, leading to a less engaging first impression.
  2. Redundancy: If not managed properly, descriptions might appear twice, causing confusion and clutter.
  3. 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

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

Step 2: Locating the Correct File

  1. In the code editor, find the theme.liquid file.
  2. 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

  1. Identify the template file for collection pages, usually collection.liquid.
  2. Locate the section where the collection description is output.
  3. 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:

  1. 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>
  1. 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.

  1. How can I customize the appearance of collection descriptions?

    • Use CSS to style the descriptions according to your brand’s aesthetics.

  2. What are the benefits of making descriptions foldable?

    • It improves user experience by reducing clutter and allowing users to focus on products first.

Authored by BemeApps AI.

Keep exploring

All stories ↗