Assistance with Product Description Layout

[BellaMil]

Hi!

We have detailed product descriptions for each of our items, and while I've tried to shorten them, they still end up being quite lengthy. We believe it would be beneficial for the customer experience if we could include an option to "read more" or something similar, allowing them to view the full description if they choose.

Would you be able to assist us with this?

Looking forward to hearing from you!

Best regards,

[akshay_bhatt]

Hi @BellaMil ,

To implement a "read more" option for lengthy product descriptions in Shopify, follow these steps:

Method 1: Using Collapsible Text in the Product Template

1. Edit the Product Template:

   • From your Shopify admin, go to Online Store > Themes.
   • Click Actions > Edit Code on your active theme.

2. Locate the Product Template:

   • Open the main-product.liquid or product.liquid file (depending on your theme).

3. Wrap the Description: Find the section displaying the product description. It might look like this:

{{ product.description }}

 Replace it with:

<div class="product-description">
    <div class="description-collapsible">
        {{ product.description }}
    </div>
    <button class="toggle-description" onclick="toggleDescription()">Read More</button>
</div>

 Add CSS for Collapsible Effect: In your base.css or style.css file, add:

.description-collapsible {
    max-height: 100px; /* Adjust based on your preference */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.description-collapsible.expanded {
    max-height: none;
}
.toggle-description {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    margin-top: 10px;
}

 Add JavaScript: In your theme.liquid file (just before the </body> tag), add:

<script>
    function toggleDescription() {
        const description = document.querySelector('.description-collapsible');
        description.classList.toggle('expanded');
        const button = document.querySelector('.toggle-description');
        button.textContent = description.classList.contains('expanded') ? 'Read Less' : 'Read More';
    }
</script>

 save and review .

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt