1. Testimonials before after
1.1. Heading options
Heading: Set the main title for your testimonials section to grab attention and build trust
Alignment: Choose how your heading is positioned—left or center
Heading tag: Select the HTML heading tag (H1, H2, H3, etc.) for SEO and accessibility purposes
Heading font size: Customize the font size of your heading to ensure it stands out while maintaining readability across all devices
Subheading: Add a short introductory text below the heading to provide context for your testimonials, helping visitors understand their value
Subheading size: Adjust the font size of the description text to make it easy to read without overpowering the main heading
Heading reverse: Enable this option to swap the position of the heading and description, allowing for alternative layouts that better suit your design preferences
Distance between heading items: Adjust the spacing between the heading and the description to ensure optimal readability and visual balance
Distance between heading and content: Set the gap between the heading section and the testimonials content to create a clear separation and improve the overall layout structure
1.2. General options
Content align: Choose how you want the testimonials to be positioned—left-aligned, center-aligned—to match your store's aesthetic
Use Prev/Next Button: Enable or disable previous and next buttons to allow users to navigate through testimonials easily
Navigation Design: Customize the appearance of navigation buttons (default, outline, simple) to match your store's branding.
Use Dots: Enable or disable dot indicators for pagination.
1.3. Before After options
Direction: Define the orientation of the before-and-after comparison slider (horizontal or vertical).
Before After First: Choose whether the “Before” image appears on the left/top or the right/bottom.
Before/After image: Upload before and after image of using the product
Image Ratio: Maintain a consistent aspect ratio for both images
Before/After Text: Add a short description
Initial Cursor Position: Set the default position of the slider (e.g., 50% for an equal split view).
Initial Drag Position: Define where the draggable slider starts, allowing users to interact smoothly with the comparison.
1.4. Design options
Color Scheme: This option is used in all testimonials, to learn more about this, refer to this document
Star rating: Allows you to adjust the star's color.
Enable section full width: make your testimonial section 100% of the screen width.
1.5. Section padding
Section padding: This option is in all testimonials section, allows you to adjust top and bottom padding both on desktop and mobile.
2. Testimonial item
Heading: Add a short, impactful title summarizing the testimonial
Text: Display the main testimonial content, including the customer's feedback about your product or service. Keep it authentic and engaging.
Author: Show the name of the person providing the testimonial to add a personal touch and build trust.
Product: Optionally link the testimonial to a specific product the customer reviewed
Rating: Show a star rating (1–5 stars) to represent the customer's satisfaction level visually. This adds a quick and effective way to convey positive experiences.
