Assistance with Product Description Layout

Store Design
1

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,

2

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 Template1. Edit the Product Template:

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

  1. Locate the Product Template:

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

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

{{ product.description }}

Replace it with:


    

        {{ product.description }}

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 tag), add:

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