Sections

Trust and comparison sections

These sections answer the questions customers ask before they buy: Does it work? How does it compare? What do other customers say?

Use only real reviews, real numbers and fair comparisons. Customers and search engines notice claims that can't be backed up, and some claims about cosmetics and health products are regulated in many countries.

Most sections on this page have these settings:

  • Color scheme: the colors of the section. See Colors.
  • Top padding and Bottom padding: the space above and below the section, from 0 to 120px.

Testimonials

Customer quotes with star ratings, in a carousel or a grid.

Settings

  • Subheading, Heading and Text: the text above the quotes.
  • Heading alignment: Left or Center.
  • Layout: Carousel or Grid.
  • Number of columns on desktop: from 2 to 4.
  • Card color scheme: the colors of each quote card.

Testimonial block

  • Star rating: from 0 to 5. Use 0 to hide the stars.
  • Heading: a short headline for the quote.
  • Quote: the review in the customer's own words.
  • Customer name: the name shown under the quote.
  • Show verified buyer label: only turn this on for reviews from customers who bought the product.
  • Customer photo: square image recommended.
  • Product reviewed: links the quote to the product, so customers can shop it.

Tip: to show reviews that customers submit on your store, use a product reviews app. Use Testimonials for a few quotes you pick yourself.

Statistics

Up to four numbers with a label each, for example a customer count or survey results.

Settings

  • Subheading, Heading and Text: the text above the numbers.
  • Footnote: say where your numbers come from, such as a customer survey or your review app.
  • Style: Plain, Cards or Divided.
  • Number of columns on mobile: 1 column or 2 columns.

Statistic block

Add up to four.

  • Value: the number, for example "4.8" or "92%".
  • Label: what the number shows.

On desktop, the numbers share one row.

Logo list

A row of logos for press mentions, retailers or certifications.

Settings

  • Heading: a short line above the logos, for example "As seen in".
  • Logo height: from 20 to 80px. All logos are shown at the same height.
  • Scroll logos continuously: moves the logos across the screen in a loop. It pauses when customers point at it, and stays still for customers who turned on reduced motion.

Logo block

  • Image: transparent .png or .svg recommended.
  • Name: used as alt text, and shown as text when no image is set.
  • Link: makes the logo a link, for example to the article that mentions you.

Tip: only show logos you have permission to use.

Comparison table

A table that compares your product with alternatives, row by row.

Settings

  • Subheading, Heading and Text: the text above the table.

Under Columns:

  • Your column label: the heading of your column. Defaults to the store name.
  • Your logo: a small logo above your column label.
  • Second column label: the heading of the second column, for example "Others".
  • Third column label: the heading of an optional third column. Leave empty to hide the third column.
  • Button label and Button link: a button under the table. Leave the label empty to hide it.

Row block

  • Feature: what this row compares.
  • Your value: enter "yes" or "no" for an icon, or any text.
  • Second column value: the value for the second column.
  • Third column value: the value for the third column.

Tips:

  • "yes" and "true" show a check mark. "no" and "false" show a cross. Any other text shows as written.
  • On phones, customers can scroll the table sideways. Keep labels and values short.
  • Compare against a general alternative, such as "Others". Naming other brands can raise legal questions.

Before and after

Two images in the same frame, with a handle that customers drag to compare them. Use it for textures, finishes or a product before and after it's blended in.

Settings

  • Before image: use the same size for both images. 1200 x 1200px recommended.
  • After image: the second image.
  • Before label and After label: the labels on each side.
  • Subheading, Heading and Text: the text beside or above the images.
  • Button label and Button link: a button under the text. Leave the label empty to hide it.
  • Layout: Text beside image or Text above image.

Tips:

  • Take both photos with the same light, angle and framing.
  • The frame takes the shape of the before image.
  • Customers can also move the handle with the arrow keys on a keyboard.
  • On the product page, you can connect both images to product metafields to show different images for each product. See Product page.

FAQ

Questions and answers that open and close. Use it on the home page, the product page and the contact page.

Settings

  • Subheading, Heading and Text: the text beside or above the questions.
  • Button label and Button link: a button under the text, for example "Contact us". Leave the label empty to hide it.
  • Layout: Heading beside questions or Heading above questions.
  • Open first question by default: shows the first answer when the page loads.
  • Close other questions when one opens: keeps only one answer open at a time.

Question block

  • Question: the question.
  • Answer: a short, clear answer. Add a link if customers need more detail.

The section also adds FAQ structured data to the page, which describes the questions and answers to search engines. Use one FAQ section per page.

Updated 2026-10-24