Split Product description on the product detail page

Store Design
1

hello, I am trying to add a <!—split—> to my product detail pages so that my long descriptions don’t show so far down the page. I want customers to be able to read the rest but it be hidden until they click to expand. I know there are collapsible tabs but I think the detail in these will be the same on every page..Am I correct saying this? This is why we were thinking to use the split tag. When I try and add this tag in the HTML below the text I want to hide on the actual product detail pages it doesn’t seem to save. Is there a way around this please? Thanks

2

Hi @Lucy10

The split tag () is not natively supported in Shopify to hide and expand long product descriptions dynamically. For this functionality, you can use custom collapsible sections. Here’s how:

Create Collapsible Content:

  • Add a collapsible section in your product description using HTML

Visible content here.

Hidden content to expand.

Read More

Add Custom JavaScript:

  • Go to Online Store > Themes > Actions > Edit Code and add JavaScript in theme.js:

document.querySelectorAll(‘.toggle-button’).forEach(button => {

button.addEventListener(‘click’, () => {

const hiddenContent = button.previousElementSibling;

hiddenContent.style.display = hiddenContent.style.display === ‘none’ ? ‘block’ : ‘none’;

button.textContent = hiddenContent.style.display === ‘none’ ? ‘Read More’ : ‘Read Less’;

});

});

Ensure Flexibility:

  • This will allow you to use collapsible content with unique details per product without affecting all pages. If you want collapsible tabs with the same content across all products, you can edit your theme’s product template for a reusable solution.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy