We've recently relaunched all three of our themes. Watch the launch video here.

Quotes

The Quotes section displays a rotating slideshow of quotations about your store or what inspires you.

The Quote section

Add a Quotes section

The Quotes section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Quotes from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Add quotes

You can add up to 4 quotes with an optional Author photo.

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

    This opens the Quote block settings.

  2. Change the Quote text.

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

  3. Change the Author name.

  4. Adjust the Max width of text of your quote text using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  5. (Optional.) Add an Author photo.

    We recommend a 160px x 160px .png image.

  6. Return to the list of your template sections in the sidebar and repeat this process until you've added all the quotes you need.

  7. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your quote blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

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

  8. Remember to click Save in the top-right corner.

Customize the Quotes section

The Quotes section settings apply to all Quote blocks. You can adjust how long to display each quote before rotating to the next one, change the image shape of the author photo, amd enable the alternate section color.

  1. Click on the Quotes section.

    This opens the Quotes section settings.

  2. Set the amount of Time between quotes (in seconds) using the slider.

    Make sure your customer has enough time to read the quote.

  3. Change the Image shape of the author to either Round or Square.

  4. (Optional.) Enable the Alternate section color.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  5. Remember to click Save in the top-right corner.

Quote section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Time between quotes

Adjust the amount of time that customers have to read each quote.

Image shape

Choose to display the author photo as Round or Square.

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Quote block settings

The following settings are found by clicking directly on the a quote block:

Configuration Settings

Quote

Add the quote text.

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

Author

Add the name of the person being quoted.

Max width of text

Use the slider to adjust the maximum width of the heading and subheading text.

Experiment with this setting to find a clean visual shape for your text.

Author photo

Select or upload an image of the person being quoted. We recommend a 160px x 160px .png image.

You can display all author photos as Round or Square in the Quotes section settings.

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.