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

Rich text

The Rich text section displays a full-width block of text to get your message across to you customers in a clear and direct way. It's great for sharing a punchy introduction to your store and what you're about, making announcments, or describing your products. You can also add a call-to-action button.

Rich text section
Rich text section

Add a Rich text section

The Rich text 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 Rich text 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
  4. (Optional.) Enable the Alternate section color option in the section settings found by clicking on the section title.

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

Add a heading and text

The Rich text section has a Heading and a Text block with options to add bold, italic, and linked text. You can also control the max width of the text to make it clear and look good.

  1. Click the Rich text title block.

    This opens the Heading block settings.

  2. Change the Heading text to display as a section title and use the Max width of text slider make sure longer titles look good and clear.

    We recommend a title of just a few words long.

    Use the Remove block button to remove the Heading block entirely.

  3. Return to the list of sections and click on the Text block.

    This opens the Text block settings.

  4. Add your text and use the formatting buttons to add bold, italic, and linked text.

  5. Use the Max width of text slider to limit the maximum width of the text.

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

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

Add a call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

  1. Click + Add block and select Button, then click on the block to open the button block settings.

  2. Add a Button label and Button link to display a button underneath the text block.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

    To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

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

Rich text block settings

The following settings are found by clicking directly on a Text, Heading, or Button block:

Configuration Settings

Heading

Change the heading text displayed at the top of the section.

We recommended a short title of just a few words.

Text

Add text to be displayed below the heading text. We recommend a short paragraph just a few sentences long.

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

Max width of text

Use the slider to adjust the maximum width of the text.

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

Button link

Select or paste a link for the call-to-action button.

To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

Button label

Add custom text for your call-to-action button.

The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

Rich text section settings

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

Configuration Settings

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.

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.