Adding a read more button to my beautify collections description

Shopify Discussion
1

I want to add a read more button to my website’s catalog description but methods on YouTube and such are not working. Thanks.

2

Hello @Nickblock

Method 1: Using Shopify Liquid Editing

This method involves editing your Shopify theme’s Liquid code. It offers more control over the button’s appearance and functionality. Here’s how:

  1. Access Theme Code:
  • Go to your Shopify admin panel and navigate to Online Store > Themes.
  • Click on Actions > Edit code.
  1. Locate Category Template:
  • Look for the template file that controls your category page layout. This is usually named category.liquid or something similar.
  1. Identify Description Section:
  • Find the section within the template code that displays the category description. This might involve looking for code sections with keywords like “category.description” or “description”.
  1. Implement Read More Functionality:

Here’s an example code snippet you can add to the description section (replace the content with your actual description):

Code snippet

{% if category.description.size > 200 %}  <div class="description-excerpt">
    {{ category.description | truncate: 200 }} </div>
  <button class="read-more-btn">Read More</button>
  <div class="read-more-content" style="display: none;">
    {{ category.description }}
  </div>
{% else %}
  <div class="description">
    {{ category.description }}
  </div>
{% endif %}
  • This code checks if the description length is greater than a set number (e.g., 200 characters).
  • If it is, it displays a shorter excerpt in the description-excerpt class and hides the full description within the read-more-content class (initially hidden with display: none;).
  • The button with the read-more-btn class triggers JavaScript functionality (explained next).
  1. Add JavaScript Functionality (Optional):
  • In the theme.liquid or theme.js file (depending on your theme), add a short JavaScript function that toggles the visibility of the read-more-content element when the button is clicked. You can find code examples online for this functionality.

Method 2: Using a Shopify App

There are Shopify apps available that can add “read more” functionality to your category page descriptions without editing code directly. Here are a couple of options:

  • Rich Text Editor (RTE) for Products & Pages
  • Pagefly Landing Page Builder

These apps offer a user-friendly interface to set excerpt lengths and might include additional features like formatting options for your descriptions.