review text fade out effect

Shopify Discussion

Topic summary

A user seeks to implement a fade-out effect on product reviews that activates only when text exceeds a fixed height of 432 pixels. The gradient should appear at the bottom of the review container, with any overflow text being cropped.

Current Status:

  • A CSS solution was provided using a gradient overlay effect
  • The initial solution applies the gradient across the entire review area

Outstanding Issue:

  • The user needs the gradient to appear specifically at the maximum height threshold (432px), not throughout the entire review
  • Text exceeding this height should be hidden/cropped
  • The discussion remains open as the provided solution doesn’t fully meet the requirements

Technical Context:
The solution involves editing the theme.liquid file in Shopify. Visual examples (screenshots) were shared to illustrate both the current implementation and the desired outcome.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I need a fade effect for my reviews after the text has reached a certain fixed height, as in the attached image.

Capture d’écran 2025-04-13 à 12.26.25.png
Capture d’écran 2025-04-13 à 12.26.25.png842×156 13.3 KB

You can see the page in question on the following site: rushngo .com

Thanks for any help :+1:t3:

2

Hi @Rushngo ,

This can be achieved by this simple CSS snippet.

  1. Edit your current theme code

  2. Search and edit theme.liquid

  3. Search and place the following code above the line

If everything is done correctly, the result should look like this:

image.png
image.png3388×1092 500 KB

1 Like
3

the gradient effect is good but I want it just at the end of the maximum review height like this :

Capture d’écran 2025-04-16 à 15.53.45.png
Capture d’écran 2025-04-16 à 15.53.45.png712×498 40.2 KB

and if the text continues after the gradient effect to be cropped, I would like the review container to be 432 pixel maximum. Thanks if you could help :+1:t3: