How to Truncate Long Product Description

Setting Up the 'Read More' Button:

• 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
  
  

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.
  
  

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.

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.