Here’s a quick solution using simple javascript. It worked for me.
const allEmptyParagraphs = [...document.querySelectorAll('.product-info__description-long p')]
.filter(el => el.innerHTML===' ');
allEmptyParagraphs.forEach(el => el.remove());
Topic summary
Goal: add a collapsible “read more” button to product descriptions in Shopify’s Debut theme.
Proposed approaches:
- jQuery + CSS: truncate .product-single__description, append a “read more” link, reveal hidden .more-text on click; added styles in theme.scss and code in theme.js. Some reports say no button appears.
- Liquid + JavaScript: replace {{ product.description }} with a truncated preview and a full description block, toggled by “Show More/Show Less” links. Mixed results: spacing issues addressed via a CSS margin, but others removed it as the button didn’t work on products/collections.
- Alpine.js (optional Tailwind): uses x-data and hidden classes to toggle truncated vs full description with configurable limits and labels.
- Minor JS fix: remove empty paragraphs from long description containers.
Outcome: original poster resolved by hiring a developer and confirmed it works on their site. No single code solution was accepted for everyone.
Status: ongoing; others still ask where to install code in Debut and why buttons don’t appear.
Notes:
- Liquid (Shopify templating), jQuery (JS library), and Alpine.js (lightweight JS framework) are central.
- Code snippets are key to understanding; placement in product/collection templates and theme assets matters.