Fluorescent
Spark
Spark
  • Spark Help Center
    • Start using Spark
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 headings tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
      • Upgrade to OS2
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Buttons
  • Pages
    • Templates
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • FAQ page
      • Lookbook page
      • Password page
      • Search page
      • 404 page
      • Home page
    • Sections
      • Blog posts
      • Collection list
      • Countdown banner
      • Events
      • Featured collection
      • Featured collection row
      • Featured product
      • Image with features
      • Image with text
      • Inline features
      • Logo list
      • Map
      • Mosaic grid
      • Newsletter
      • Questions and answers
      • Quotes
      • Rich text
      • Shoppable feature
      • Shoppable image
      • Slideshow
      • Social proof
      • Testimonials
      • Text columns with images
      • Video
      • Video hero
    • Popups
  • Header
    • Header
      • Logo
      • Layout and style
      • Transparent header
      • Customer account link
    • Announcement bar
    • Quick search
  • Footer
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Payment icons
      • Language selector
      • Country selector
      • Social media icons
      • Footer text
  • Products
    • Product listings
    • Hover add-to-cart
  • Cart
    • Cart page
    • Fly-out cart
  • Product pages
    • Product template
      • Pre-order template
      • Alternate product template
    • Layout and style
      • Breadcrumbs
      • Navigation buttons
      • Media gallery
      • Quick purchase bar
      • Gift recipient form
    • Product overview blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Complementary products
      • Custom text field
      • Information popup
      • Payment accordion
      • Security accordion
      • Shipping accordion
      • Stock level indicator
      • Text block
      • App blocks
    • Product page sections
      • Product reviews
      • Recommended products
    • Variant options
      • Variant chips
      • Variant swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up section
  • Add quote blocks
  • Set time between quotes
  • Section style
  • Settings reference

Was this helpful?

  1. Pages
  2. Sections

Quotes

Theme section

Last updated 1 year ago

Was this helpful?

Use the Quotes section to prominently display rotating quotes about your store or products from customers, partners, or the media.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can or .

STEPS

In your theme editor (Customize):

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

    Learn how to use templates in our .

  2. Under Template, click (+) Add section and select Quotes.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add quote blocks

Add Quote blocks with quote text, author names, and logo images. You can adjust the font size of the quote text.

If you add more than one quote block, they will autorotate by default. To change the time between quotes or stop quotes from quote blocks from automating, see the Quotes autoplay settings.

STEPS

In your theme editor (Customize):

  1. Click (+) Add Quote and/or click on the Quote block to open the settings.

  2. Add Quote text.

    Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's .

  3. Enter the Author name to display below the quote text.

  4. Use the Max width of text slider to control the maximum width of the quote text.

    Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

  5. (Optional.) Select or upload an image for the Author photo.

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

    In the section settings, you can change the Image shape of author photos to Round or Square.

  6. (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.

  7. Click Save.

Set time between quotes

By default, multiple quotes will auto-rotate every 7 seconds. You can change the time between quotes to rotate them faster or slower.

Display each quote between 3 to 15 seconds.

STEPS

In your theme editor (Customize):

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

  2. Click and drag the slider to select the number of seconds to display each quote (between 3 and 15 seconds).

    Quotes with more words may need more time for customers to read them.

    Quotes will pause when customers hover over them.

  3. Click Save.

Section style

Customize the section Style with options for section Spacing, Animation, and Alternate section color.

STEPS

In your theme editor (Customize):

  1. Click on the section to find the Section style settings.

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

  3. Choose to enable the Alternate section color to apply the secondary section colors selected in your theme settings for colors.

  4. Select a Spacing option to add padding around the section content.

    Add padding to either the Top and bottom, Top only, Bottom only, or set it to None.

  5. Select the Spacing amount for the padded sides of the section: Full, Half, or Minimum.

  6. Click Save.

Settings reference

Click the Quote blocks to find the following settings.

Setting
Description

Quote

Add text for the quotation. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide.

Author name

Add the name of the person being quoted.

Max width of text

Use the slider to control the maximum width and line breaks of the quote text.

Author photo

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

Click the Quotes section to find the following settings.

Setting
Description

Image shape

Display all author photos as Round or Square

Time between quotes

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

Section style

Setting
Description

Enable animation

Use alternate section color

Spacing

Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.

Spacing amount

Increase or decrease the amount of space around the section: either Full, Half, or Minimum.


Related links

Learn more about in Spark.

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our to learn more.

Apply the alternate section colors as chosen in your Theme Settings. See Spark's to learn how to create a secondary color scheme with alternate section colors.

Section animations
Rich text
Testimonials
Section animations
theme color settings
insert dynamic content with metafields
Templates guide
Rich text editor guide ↗
create new templates