How to Truncate Long Product Description

It's a common setup for some products to "truncate" long product descriptions with a "see more" interaction. Here's how you can do that in Replo:

Setting Up the 'Read More' Button:

1. Begin by adding a container right below the product description.

   • Add a text element with the label "Read More".

   • Add a chevron down icon next to the text to indicate expandability.

   • Name the container for easy identification e.g Read
     

2. Creating Default and Expanded States for Product Description:

   • Click on the product description and navigate to "states".

   • For the default state, set a fixed height (e.g., 20%) to truncate the description.

   • Create a custom state named "expand". In this state, set the height to "auto" to show the full description.
     

3. Setting Up the 'Read Less' Button:

   • Create a custom state for this container(Read) named "Read less".

   • In the "Read less" state, change the text in the container from "Read more" to "Read Less" and the icon to a chevron up.

4. Activating States with Interactions:

   • For the default state of the "Read More" button:

     • Add an interaction to activate the "expand" state of the product description upon click.

     • Add another interaction to change the Read container to the "Read less" state upon click.

   • For the "Read less" state of the button:

     • Add an interaction to revert the product description to its default state upon click.

     • Add another interaction to change the button back to its default state upon click.