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

Quotes

The Quotes section lets you feature rotating quotes from customers or press.

Quotes section
Quotes section

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your 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 Quotes.

  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.

Steps

In your theme editor (Customize):

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

    Clicking on the block opens the block settings.

  2. Add Quote text.

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

  3. Add the Author name.

  4. (Optional.) Use the drag and drop handles ⋮⋮ to change the order of the quote blocks.

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section

    Click the Remove block button in the block settings to remove a quote block entirely.

  5. Click Save.

Section styles

Change the font, pagination style, and overall section style.

Steps

In your theme editor (Customize):

  1. Click on the Rich text section to open the settings.

  2. Select a Pagination style

  3. Select a Font

  4. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  5. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the Lines and borders color selected in the Theme Settings.

  6. Click Save.

Quotes autoplay

By default, multiple announcements will auto-rotate every 7 seconds. Change the time between announcements or [disable autoplay][disable-autoplay] to let customers click through announcements manually.

Set time between quotes

Display each announcement between 3 to 15 seconds. Announcements with more words may need more time for customers to read them.

Steps

  1. Click on the Announcement bar section to open the section settings.
  1. Click and drag the slider to select the number of seconds to display each announcement (between 3 and 15 seconds).

    Slider for time between announcements

    Announcements will pause when customers hover over the announcement bar.

  2. Click Save.

Turn off autoplay

If you turn off autoplay, the announcement bar displays next / previous arrows to let customers click through at their own pace.

Turning off autoplay can make your online store accessible to more customers, including people with disabilities. Learn more about [accessibility for themes][shopify-accessible] to help make the web inclusive and usable for everyone.

Steps

  1. Click on the Announcement bar section to open the section settings.

  2. Click to uncheck the Enable autoplay checkbox.

  3. Click Save.

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.