How can I add collapsible rows on my featured product on the main homepage?

[VictoriaNguyen]

How can I add collapsible rows on my featured product on the main homepage for a one product store? Thank you!

[DaisyVo]

Hi @VictoriaNguyen 

Adding collapsible rows for a featured product on your Shopify homepage is a great way to keep things clean and organized, especially for a one-product store. Here’s how you can do it:

1. Check Your Theme Settings

First, go to your theme customizer (Online Store > Themes > Customize) and see if your current theme supports collapsible sections. Many Shopify themes now include this feature, so check under the Featured Product section or similar. If it’s there, you can enable it directly by toggling the collapsible rows or adding content blocks for details like FAQs, product specifications, or reviews.

2. Manually Add Collapsible Rows Using Code

If your theme doesn’t have built-in collapsible rows, you can add them manually. Here's what to do:

Step 1: Edit your theme files
Go to Online Store > Themes > Actions > Edit Code.
Look for the sections/product-template.liquid or sections/featured-product.liquid file (depending on your theme).

Step 2: Add HTML for collapsible rows
Insert this code where you want the collapsible rows to appear:

<div class="collapsible">

   <button class="collapsible-header">[Title for the row]</button>

   <div class="collapsible-content">

      <p>[Your content goes here]</p>

   </div>

</div>

Step 3: Add CSS for styling
In the assets/theme.css or assets/base.css file, add this:


.collapsible-content {

   display: none;

}

.collapsible-header {

   cursor: pointer;

}

.collapsible-header.active + .collapsible-content {

   display: block;

}

Step 4: Add JavaScript for functionality
In the assets/theme.js file, include:

document.querySelectorAll('.collapsible-header').forEach(button => {

   button.addEventListener('click', () => {

      button.classList.toggle('active');

      const content = button.nextElementSibling;

      content.style.display = content.style.display === 'block' ? 'none' : 'block';

   });

});

3. Use an App for Collapsible Rows

If you’re not comfortable with coding, you can use a Shopify app. Look for apps like PageFly, Shogun, or others that allow advanced customizations, including collapsible sections. They’re user-friendly and perfect if you want a no-code solution.

Final Thoughts

Adding collapsible rows can improve your store's design and user experience. If you have coding skills or are willing to learn, try the manual method—it’s free and customizable. But if you’re short on time or prefer simplicity, go with a third-party app. Both approaches will give you the polished, professional look you’re going for.

If you need any other assistance, I am willing to help.
Best regards,
Daisy.