Adding a read more button to my beautify collections description

[Nickblock]

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

[magecomp]

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.