Testimonials

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the testimonial block
3. Company XYZ documentation on layout settings
4. Company XYZ documentation on slideshow controls settings
5. Company XYZ documentation on headers settings
6. Company XYZ documentation on cards settings
7. Company XYZ documentation on section padding settings
8. Company XYZ documentation on section backgrounds settings
9. Company XYZ documentation on separators settings
10. Company XYZ documentation on visibility settings
11. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Shopify video: How to optimize your store for higher conversions

Shopify video: How to optimize your store for higher conversions

Use Testimonials to highlight customer quotes, connect them to featured products, and present them in either a grid or a slideshow. It is a strong choice for home pages, landing pages, and promotional pages where social proof needs more design control than a simple review feed. For a broader overview of how sections and blocks work in the editor, see Shopify documentation on sections and blocks

Core settings

Layout settings

Layout settings control how many testimonial cards appear and how they behave across desktop, tablet, and mobile. You can mix grid and slideshow layouts by device, which is useful when you want a fuller layout on larger screens and simpler browsing on smaller ones.

Grid layouts work best when testimonials are short and visually consistent. Slideshow layouts are usually a better fit for longer quotes, mixed media, or cards with noticeably different heights.

If the tablet column count is left at 0, tablet screens use the desktop column setting. That can save setup time, but it is worth checking tablet spacing if your cards include long quotes, product imagery, or video.

Content alignment helps keep cards feeling intentional when testimonial lengths vary. Vertical stretch can make rows look cleaner by matching card heights within the same row.

If your testimonials vary a lot in length, test content alignment and vertical stretch together. Matched heights usually look cleaner in grids, while natural heights can feel better in more editorial layouts.

Slideshow settings

Slideshow settings apply when any device is set to a slideshow layout. These controls affect animation, autoplay, looping, navigation, pagination, and whether the next slide is partially visible.

Fade animation is best when you want to spotlight one testimonial at a time. It also changes the layout behavior by forcing a single-slide view, and it disables slide preview and pagination styles that depend on multiple visible slides.

Autoplay can add motion, but testimonial content usually needs a slower pace than promotional banners. If you enable autoplay, use a longer delay and keep navigation visible so customers can pause and move at their own speed.

Tip

For readable testimonial slideshows, use slower autoplay, visible navigation, and avoid overly fast animation speeds.

Color settings

These section-level color overrides let you adjust icon, text, and subheading colors without changing the rest of your theme. They are most useful when the section sits on a custom background or needs stronger contrast than your global styles provide.

If you also customize card colors, review both sets together. The section intro and the testimonial cards can each use different color treatments, so a quick contrast check helps keep the section cohesive.

Supported block types

1. Testimonial

Testimonial

The Testimonial block adds an individual customer quote, source line, rating, and optional product connection. It can also include supporting image or video content to give a testimonial more visual impact. See Company XYZ documentation on the Testimonial block.

Use short, focused quotes when you want to show several cards at once. If a testimonial tells a longer story or includes richer media, it will usually feel easier to consume in a slideshow layout.

When you assign a product, the card can visually tie the testimonial to a specific item. Product image styling only applies when a product is selected, so it is fine to keep product imagery hidden when the quote should stand on its own.

Imagery settings

Imagery is optional, but it can significantly change the tone of the card. A simple image can make a testimonial feel more personal, while video can make it feel more editorial or campaign-driven.

Top imagery gives media more visual priority. Bottom imagery keeps the quote itself as the main focus, which is often the better choice for trust-building content.

If you use video, a poster image helps the card feel polished before playback starts. Autoplay is usually best for short, muted clips rather than spoken testimonials.

Caution

Media-heavy testimonial cards can make a dense grid harder to scan. If several testimonials include video or tall imagery, a slideshow layout is often easier to manage.

Block-level shared settings

Each testimonial block also includes its own card color overrides, visibility controls, and an editor title. Block-level color changes are useful for emphasizing one featured testimonial, but they work best when only used selectively.

Standard section settings

Header settings

Header settings control the intro content above the testimonials, including alignment, heading structure, optional icon, supporting text, and an optional button. Use this area to frame the section with a clear message about customer feedback, brand trust, or featured reviews.

If you add a button, keep the action closely related to the testimonials, such as linking to a collection, product group, or dedicated reviews page. Choose the heading level based on the page structure, not just the visual size.

Card settings

Card settings let you override the default card background, border, and text colors for testimonial cards in this section. These settings are helpful when you want the cards to feel lifted from the page background or match a seasonal campaign.

Prioritize readability when using gradients or softer background colors. Strong contrast matters most for quote text, source names, and rating icons.

Padding settings

Padding settings control the space above and below the section. Adjust them to give the testimonials enough breathing room, especially when the section appears between image-heavy or text-heavy areas.

More generous spacing can make testimonials feel more premium. Tighter spacing can work on compact landing pages, but check mobile carefully so the section does not feel crowded.

Section background settings

Section background settings let you add a background color, gradient, image, video, and overlay to the section. This is useful when you want the testimonial area to feel distinct from surrounding content.

Background media can add atmosphere, but it can also reduce readability. Use overlays and color overrides together so quote text remains easy to read.

Separator settings

Separator settings add a line above or below the section to create a cleaner transition between page areas. They are a good choice when you want separation without adding a full background treatment.

Keep separator styling simple if your testimonial cards already use strong borders or bold backgrounds. Too many visual dividers can make the page feel busy.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is useful when you want one testimonial presentation for larger screens and a different one for smaller screens.

Use device-specific visibility carefully so you do not end up maintaining multiple versions of the same content unless the layout benefit is clear.

Width settings

Width settings control the section width and the maximum width of its content. In Testimonials, these settings strongly affect readability and how dense the layout feels.

Narrower content widths usually make longer quotes easier to read. Wider widths are better for multi-column grids, but preview the final layout on the storefront because editor previews can make width changes harder to judge accurately.

Usage notes

1. Match the layout to the content. Use grids for shorter, more uniform testimonials and slideshows for longer quotes, mixed media, or uneven card lengths.
2. Link products selectively. Connect testimonials to products only when the quote clearly supports a specific item, so the section stays helpful rather than overly promotional.
3. Protect readability. Check text contrast carefully whenever you use custom backgrounds, gradients, overlays, or card color overrides.
4. Use motion with restraint. Autoplay, looping, and video can add energy, but testimonial content usually performs better when customers have enough time to read comfortably.
5. Preview every breakpoint. Review desktop, tablet, and mobile layouts together, especially when mixing long quotes, imagery, and slideshow behavior.
6. Balance the section with blocks. Adding more testimonial blocks can change the section from a simple spotlight into a fuller social-proof layout, so review whether the intro content still feels necessary.
7. Check media and color overrides together. Separate desktop and mobile media, or more explicit local color choices, can change cropping, visibility, and contrast enough that each viewport needs a quick final review.