How do I create a 'read more'/'read less' in collections page Timber theme

Store Design
,
1

Hi Everyone,

I’ve had no luck with the options I’ve trialed so far.

I’m wanting to hide the majority of text showing in the collection description section on our website using a ‘read more’ / ‘read less’ option.

The code needs to perform in desktop and mobile view.

We use Timber 1.0 theme

Many thanks for your help!

1 Like
2

Hi @user2096 ,
You can add a simple “Read more / Read less” toggle to your collection description with a bit of HTML + CSS + JS.
Here’s how you can do it safely in Timber 1.0:

1 Edit your collection template

Go to:
Online Store → Themes → Edit code → Templates → collection.liquid

Find where the collection description is shown (usually something like):

{{ collection.description }}

Replace it with:

<div class="collection-description">
  <div class="description-content">
    {{ collection.description }}
  </div>
  <button class="read-more-btn" onclick="toggleDescription()">Read more</button>
</div>

2 Add this CSS

Add in your theme.css or timber.scss.liquid:

.collection-description {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.description-content {
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.description-content.expanded {
  max-height: 1000px;
}

.read-more-btn {
  display: inline-block;
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
}

3 Add this JS

Place it before your closing </body> tag in theme.liquid:

<script>
  function toggleDescription() {
    const desc = document.querySelector('.description-content');
    const btn = document.querySelector('.read-more-btn');
    desc.classList.toggle('expanded');
    btn.textContent = desc.classList.contains('expanded') ? 'Read less' : 'Read more';
  }
</script>
3

Hi @user2096

Step 1: Edit your collection.liquid

Find this line (or similar):

{{ collection.description }}

Replace it with:

<div class="collection-description">
  <div class="description-text">
    {{ collection.description }}
  </div>
  <button class="read-more-btn" type="button">Read more</button>
</div>

Step 2: Add CSS

Add this to your theme.css (or assets/timber.scss.liquid):

.collection-description {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.description-text {
  max-height: 120px; /* Adjust visible height */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.description-text.expanded {
  max-height: 1000px; /* Large enough to show all text */
}

.read-more-btn {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  color: #0073e6;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

.read-more-btn:hover {
  color: #005bb5;
}

Step 3: Add JavaScript

Add this to your theme.js (or in a <script> tag at the bottom of collection.liquid):

<script>
document.addEventListener("DOMContentLoaded", function() {
  const btn = document.querySelector(".read-more-btn");
  const text = document.querySelector(".description-text");

  if (btn && text) {
    btn.addEventListener("click", () => {
      text.classList.toggle("expanded");
      btn.textContent = text.classList.contains("expanded") ? "Read less" : "Read more";
    });
  }
});
</script>

Best regards,
Devcoder :laptop: