Testimonials before after
1. Purpose Combines customer testimonials with an interactive before-and-after image comparison. Suitable for showing product results, transformations, or serv…
2 phút đọc
Trong trang này
1. Purpose
Combines customer testimonials with an interactive before-and-after image comparison. Suitable for showing product results, transformations, or service outcomes alongside social proof.
2. Common use cases
Homepage
Product page
Landing page
Beauty, fashion, fitness, or service results
Product transformation showcase
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Testimonials before after
4. Main blocks
Testimonial item: Adds customer feedback, author, product, and rating.
Before/ After image
5. Key settings
5.1. Testimonial item
Setting | Description |
|---|---|
Heading | Adds a title for the testimonial. |
Text | Adds the customer review. |
Author | Displays the customer name. |
Product | Links the testimonial to a product. |
Rating | Sets the star rating. |
5.2. General settings
Setting | Description |
|---|---|
Content align | Aligns testimonial content. |
Use prev/next button | Displays navigation arrows between testimonials. |
Use dots | Displays pagination dots. |
5.3. Before and after settings
Setting | Description |
|---|---|
Direction | Sets a horizontal or vertical comparison slider. |
Before after first | Changes which image appears first. |
Before image | Uploads the original image. |
After image | Uploads the result image. |
Image ratio | Sets the comparison image ratio. |
Full image | Displays the full image without cropping. |
Before image text | Sets the label for the before image. |
After image text | Sets the label for the after image. |
Initial cursor position | Sets the starting divider position. |
Initial drag position | Sets the initial comparison position. |
5.4. Design and layout
Setting | Description |
|---|---|
Color scheme | Controls section colors. |
Star rating | Sets the star color. |
Enable section full width | Expands the section across the browser width. |
Section padding | Adjusts spacing above and below the section. |
Custom CSS | Adds custom styles to this section only. |
6. Best practices
Use before and after images with the same dimensions and angle.
Keep testimonial text short and specific.
Use authentic customer names and ratings.
Set the initial divider near the center.
Check image labels and slider direction on mobile.
7. Common issues
Issue | Solution |
|---|---|
Comparison slider is not visible | Upload both before and after images. |
Images do not align | Use images with the same dimensions and composition. |
Testimonial is not showing | Add and enable at least one testimonial item. |
Navigation is missing | Enable arrows or dots. |
Image appears cropped | Adjust the image ratio or disable Full image. |