Rich Text

Headings and paragraphs

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

Lists

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Format text with the rich text editor

With the Formatting button, you can quickly create paragraphs, headings, or blockquotes. Using the right formatting and heading levels helps people and search engines to read your website's content.


Underline text

To make text underline, highlight the text and click the Bold button

    Bold text

    To make text bold, highlight the text and click the Bold button

     

    Italicize text

    To make text italic, highlight the text and click the Italic button

     

    Indent text

    To indent a paragraph, click the Indent button:

    Unindent text

    To unindent or "outdent" a paragraph, click the Outdent button:

     

    Align text

    To align text, select the text, click the Alignment button, and choose Left align, Center align, or Right align:

    Left-aligned text

    Center-aligned text

    Right-aligned text

    Change text colors with the rich text editor

    Steps:

    1. Highlight the text and click the Color button:

    2. Click a color to change the highlighted text to that color:

     

    Change text background colors

    Steps:

    1. Highlight the text and click the Color button:

    2. Click Background color…:

    3. Click a color to change the highlighted text's background to that color:

     

    Insert tables with the rich text editor

    You can insert tables in your blog posts, pages, product descriptions, and collection descriptions with the rich text editor. You can place text, images, or even videos into a table after you create it.

     Header1-1 Header1-2
    Left-aligned text
    Left-aligned text

     

     Header2-1 Header2-1
    Center-aligned text
    Center-aligned text

     

    Header3-1  Header3-2
    Right-aligned text
    Right-aligned text

     

    You can insert links (hyperlinks) in blog posts, pages, product descriptions, and collection descriptions with the rich text editor. You can add links that direct customers to pages within your Shopify online store and to other websites. You can also add links that open email messages or make phone calls, to help customers contact you.

    • To create a link that opens an email message, enter mailto: followed by the email address, for example mailto:example@example.com.
    • To create a link that makes a phone call, enter tel:, followed by the phone number, for example tel:+0-123-456-7890.

     

    Links to pages within your Shopify store are called internal links. You can use short URLs to create internal links. For example, the URL /collections will point to your store's collections page, external link to Google.

    Note

    You can check the handle of a product, collection, page, or blog by visiting its main page in your Shopify admin, finding the Search engine listing preview section, and clicking Edit website SEO.

    Insert images with the rich text editor

    There are three ways to insert an image using the rich text editor. You can:

      Original Picture

      Insert videos with the rich text editor

      You can insert or embed videos in blog posts, pages, product descriptions, and collection descriptions using the rich text editor.

      If you want to embed a video that you've created, then you first need to upload it to a video streaming site such as YouTube or Vimeo.