Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Quotes

The Quotes section lets you feature quotes from customers or press. Each quote can have an optional icon associated with it – perfect for an avatar or a logo.

Quotes section
Quotes section

Add a quotes section

The Quote section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Quote.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add quote blocks

Add as many Quote blocks as you like. With multiple quotes, this section will autorotate.

In your theme editor (Customize):

  1. Click +Add Quote and/or click on the Quote block you wish to edit.

  2. Add Quote text.

    Use the formatting buttons to add bold, italic, or linked text.

  3. Add the Author name.

  4. Select or upload an Author image to display below the author name.

    Note that if all your quotes in a section have images, they will be displayed as a left-to-right scrollable carousel on mobile devices.

    Quotes with carousel enabled
  5. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  6. Click Save.

Change the section style

Change the overall style and layout of the section, including the Author images, and set the time between quotes when they autorotate.

In the theme editor (Customize):

  1. Click on the Quotes section to open the section settings.

  2. Choose the Time between quotes, in seconds.

    Choose between 2 and 10 seconds between quotes.

  3. Use the Author image width slider to choose how wide the icons should be. Choose between 40 pixels and 150 pixels.

    This setting applies to the entire Quotes section, so that each block is uniform.

    Quotes section with wide company logo icons
    Quotes section with wide company logo icons
  4. Select an Image shape for all author images. Either Round, Square, or Natural shape.

    The Natural option display the original shape of your uploaded image.

  5. (Optional.) Choose to enable the Outline section style for an alternate look.

    This option removes the section background and adds a border around the section, which uses your store's border color setting.

  6. Remember to click Save.

Quotes section settings

The Quotes section has the following settings:

Configuration Settings

Time between quotes

The number of seconds each quote is shown before rotating.

Choose between 2 seconds and 10 seconds.

Author image width

Choose how wide each icon should be. Choose between 40 pixels and 150 pixels.

Image shape

Choose to display all author images with a Round, Square, or Natural shape.

The Natural option display the original shape of your uploaded image.

Outline section

Enable this option to remove the section background and add a border around the section, which uses your store's border color setting.

Quote block settings

Each Quote block has the following settings:

Configuration Settings

Quote

Add the quote text.

Author

Add the name of the person being quoted.

Image

Select or upload an image, used as the profile picture for the person being quoted.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.