Testimonials shows up to twelve quotes, from customers or from the press. All three presets use it on the home page, each in a different layout. A quote can carry a star rating, a large image and a link to the product it is about.
Where to find it
In the theme editor, click Add section and choose Testimonials. You can add it to the home page or any other page that takes sections, as many times as you like.
Quote size
Quote size sets how large the words of each quote are: Small, Medium or Large. Short quotes can take a larger size; longer ones read better small. The Single pull quote layout always uses its own large size, so this setting does not change it.
Large image
Each testimonial can have a Large image, for example the customer wearing the piece. It is shown beside the quote, on the side chosen in Image position. On mobile the image sits above the quote.
This is separate from the Small portrait, the small round photo beside the customer's name. A testimonial can have both, either or neither.
Star ratings
To show stars with a quote, choose a Star rating from 1 to 5 on that testimonial. None, the default, shows no stars. Each testimonial has its own rating, so you can show stars on some and not on others.
Only show a rating the customer actually gave. Adding stars to a quote that came without them misleads customers.
Linked product
Choose a Product on a testimonial and a small link to that product is shown with the quote: its image, name and price, with the compare-at price when it is on sale. Customers can go from the review straight to the piece.
Layout options
Layout sets the style:
- Standard: quotes as cards, in a grid or a sideways-scrolling row, with the customer's name, detail and photo.
- Single pull quote: one large quote at a time, set like a pull quote in a magazine.
- Press quotes: short quotes, each under a publication's logo or name.
The pull quote and press layouts show one quote at a time on mobile.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Show editorial numbering on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Layout | Standard, Single pull quote or Press quotes. Default: Standard. | Cards, one large quote at a time, or press quotes under a logo. |
| Quote size | Small, Medium or Large. Default: Medium. | How large the words of each quote are. The single pull quote layout always uses its own large size. |
| Image position | Left or Right. Default: Left. | Which side of the quote a testimonial's Large image sits on. On mobile the image sits above the quote. |
| Desktop layout | Grid or Slideshow. Default: Grid. | Grid shows rows; Slideshow shows one row that scrolls sideways. |
| Columns on desktop | 1 to 4. Default: 3. | How many quotes sit in a row on desktop. |
| Enable swipe on mobile | On or off. Default: on. | Lets customers swipe through the quotes on mobile. When off, they stack. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 12 blocks.
Testimonial
One quote.
| Setting | Options | What it does |
|---|---|---|
| Quote | Formatted text. | The quote itself. Use the person's own words. |
| Customer name | Text. | Who said it: the customer's name, or the publication's name for a press quote. |
| Detail | Text. | A short line under the name, such as their city or the product they bought. |
| Small portrait | Image. | Optional. A small round photo of the customer, beside their name. |
| Publication logo | Image. | For the Press quotes layout. The publication's logo, shown in place of the name. |
| Large image | Image. | Optional. A large image shown beside the quote, for example the customer wearing the piece. |
| Star rating | None, 1 star, 2 stars, 3 stars, 4 stars or 5 stars. Default: None. | Shows one to five stars with the quote. None shows no stars. |
| Product | Product. | Optional. Shows a small link to the product the quote is about, with its image and price. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Small portrait | 200 x 200 px (square) | Shown small and round, cropped from the center. |
| Large image | 1200 x 1500 px (4:5 portrait) | Shown beside the quote on desktop and above it on mobile. |
| Publication logo | 400 px wide, transparent PNG | Shown at a fixed height, so wide, short logos work best. Use a single-color version that reads on the section's color scheme. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Ask permission before publishing a customer's words or photo.
- Short quotes work best. For Single pull quote, aim for one or two sentences.
- Only use press quotes and logos you are allowed to reproduce.
- A large image takes space, so use it on one to three quotes and set Columns on desktop to 1 or 2.