Compress Long Collection Descriptions with a "Read More" Button
Long collection descriptions are great for SEO but they can clutter the page, pushing products too far down. If users have to scroll past a block of text before seeing products, it disrupts the shopping experience.
Use a "Read More" button to collapse lengthy descriptions by default, showing only the first few lines. This keeps the page clean, ensures users reach products faster, and still retains SEO value for search engines.
- Your collection pages have descriptions longer than 200 words that push product grids below the fold
- Analytics show users are scrolling past text blocks without engaging, with scroll depth data showing rapid movement through description areas
- Your store runs on Shopify, Shopify Plus, or custom platforms with basic JavaScript capabilities for collapsible content
- You're generating 1,000+ monthly collection page views and want to reduce bounce rates while maintaining SEO content
- Your collections serve dual purposes: detailed SEO content for search engines and clean browsing experience for users
For Shopify stores, implement this directly in your collection template files:
- Navigate to Online Store > Themes > Actions > Edit Code and locate your collection template (usually
collection.liquidorcollection-template.liquid) - Wrap your collection description in a container with truncation logic. Set the visible portion to 150-200 characters (approximately 2-3 lines of text)
- Add the collapsible functionality using this code structure:
<div class="collection-description">
<div class="description-preview">{{ collection.description | truncate: 180 }}</div>
<div class="description-full" style="display: none;">{{ collection.description }}</div>
<button class="read-more-btn">Read More</button>
</div>
Add corresponding CSS for proper spacing: 16px margin-bottom for the description container and ensure the button uses your brand's secondary color scheme. On mobile, reduce the preview to 120 characters to account for smaller screens.
Implementation timeline: 2-3 hours for a developer, including testing across device types.
- Track scroll depth to product grid - expect 15-25% faster reach to first product row
- Monitor collection page bounce rate - target 8-15% improvement within 3-4 weeks
- Measure click-through rate from collections to products - anticipate 5-12% increase in product page visits
- Use Google Analytics Enhanced Ecommerce or Shopify Analytics to track time spent on collection pages before product clicks
- AVOID: Truncating descriptions to less than 100 characters, which removes context and value for users who do want to read
- BEST PRACTICE: Show 150-200 characters (2-3 complete sentences) to provide meaningful preview content
- AVOID: Using generic "Read More" buttons that don't collapse back down, forcing users to scroll through full text
- BEST PRACTICE: Implement toggle functionality with "Read Less" option to maintain clean page experience
- AVOID: Hiding descriptions entirely on mobile - SEO content still matters for search rankings
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes: