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.
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.
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 Number sections 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. |
| 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. |
| Customer photo | Image. | Optional. A small photo of the customer. |
| Publication logo | Image. | For the Press quotes layout. The publication's logo, shown in place of the name. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Customer photo | 200 x 200 px (square) | Shown small and cropped to a square from the center. |
| 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.