The Testimonials with product section is a powerful way to build trust by showcasing real customer feedback alongside featured products. This layout helps highlight both social proof and specific items you want to promote.
In this guide, you’ll learn how to customize every part of this section to match your brand and engage your audience effectively.
You can access a Testimonials with product section by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Testimonials with product.
You can configure some general options for the Testimonials with product section below
Make section full width: Toggle on/off to make the section span the full width of the screen.
Color scheme: Choose the color theme for the entire section.
Rating color: Change the color of the star ratings.
Image ratio: Sets the aspect ratio of the product image. Options included:
+ Adap to image: The image frame will automatically adjust to the original ratio of the uploaded image.
+ Portrait: Displays the image in a vertical format (taller than it is wide), similar to a portrait photo.
+ Square: The image will be cropped or scaled to fit into a square frame.
+ Landscape: The image frame has a horizontal ratio (wider than it is tall), similar to a landscape photo.
Desktop image position: Set the position of the image on desktop view:
Left: Image appears on the left, text on the right.
Right: Image appears on the right, text on the left.
Auto-rotate testimonials: Enable or disable automatic rotation of testimonials:
+ On: Testimonials will rotate automatically after a set time.
+ Off: Users need to click manually to view the next testimonial.
Change testimonials every: Set how often testimonials change when auto-rotate is enabled (in seconds)
Pause on hover: When enabled, testimonial rotation will pause if a user hovers over the section. This is useful for giving visitors more time to read.
Caption: Enter a small piece of text that appears above the main heading — often used to label or introduce the section.
Heading: This box is where you input the title of section. You can format the text using bold, italic, link...
Heading size: Choose the font size of the heading. Options included like Large, Medium, Smalll, Extra small, Extra extra small
Heading style: Choose the style of the heading, options included:
Normal: Displays the heading with standard capitalization.
Uppercase: Displays the heading in all capital letters.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Heading alignment: Align the heading Left or Center within the section.
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
To add a Testimonial block, click the Add Testimonial button (plus icon ➕) under the Testimonials with product section.
You can configure some general options for the Testimonial block below:
Image: Add a product image related to the testimonial:
+ Select: Click Select button to upload an image from your computer or choose an existing one.
+ Explore free images: Search for royalty-free images from an integrated library.
Product: Select the product being reviewed in the testimonial.
Show star rating: Toggle to show/hide star rating in the testimonial display.
Star rating: Choose the number of stars to display using the slider or enter a number (1 to 5).
Text: Enter the actual testimonial text. You can format the text using Bold, Italic, Link,...
Avatar: Upload a photo of the customer giving the testimonial (recommended: 100x100px). This adds authenticity and a personal touch.
Round avatar: Enable this toggle if you want the avatar to appear in a circular shape (default is square).
Author: Enter the name of the person giving the testimonial. You can also format this using bold, italic, or link options
