How To Add "Read More" Button To Collection Description In The Impact Theme

Shopify Discussion

Topic summary

Goal: add a “Read More” toggle to a collection description in the Impact theme, matching the behavior on a referenced example site. Also add an info icon that triggers the same reveal for SEO (search engine optimization) content.

Proposed approach: create a new section (sections/collection-info.liquid) so it can be added to collection pages. The shared snippet checks for a non-blank collection.description and adds a configurable button label (“Read More”) with basic styling, enabling dynamic placement via the theme editor.

Gaps/needs: the snippet does not include the actual expand/collapse logic (no truncation, toggle state, or JavaScript/CSS for showing/hiding). Placement and wiring of the info icon to trigger the same toggle is not yet specified.

Clarification: the info icon should behave identically to the Read More button, revealing additional collection information for SEO.

Status: unresolved/ongoing. Next steps: implement JS/CSS to truncate and expand the collection.description, connect the Read More button and info icon to the same toggle, and position the icon where shown in the screenshots. Images are central to understanding placement.

Summarized with AI on January 9. AI used: gpt-5.
1

Hello,

I would like to add “Read More” to the description of the collection.

For example: https://www.mountainwarehouse.com/travel/accessories/microfibre-towels/

Is there anyone who can help me with this?

i am on impact theme

2

It is the “Read More” button circled in blue

Screenshot 2024-01-08 122031.png
Screenshot 2024-01-08 122031.png1920×904 233 KB

3

You need to create a new section, so you can dynamically add it to the collection page. Just create a file named “collection-info.liquid” in your section folder.


  {% if collection.description != blank %}
    
  {% endif %}

{% schema %}
{
  "name": "Collection Info",
  "settings": [
    {
      "type": "text",
      "id": "readmore",
      "label": "Button Text",
      "default": "Read More"
    }
  ],
  "presets": [
    {
      "name": "Collection Info",
      "category": "Collection Info"
    }
  ]
}
{% endschema %}

{% stylesheet %}
  .details-container {
    text-align: center;
  }
{% endstylesheet %}

If you need additional help, let me know

4

and how would i go about adding the following “info icon” in the following location.

Screenshot 2024-01-08 150320.png
Screenshot 2024-01-08 150320.png1920×966 223 KB

5

It depends: What should happen after you click the info icon? Should it behave the same like the Read More?

6

i want it to behave exactly like the website, basically further information on the collection for SEO purposes.