Using the rich text editor for content

You can use Shopify's rich text editor to format and style the content that appears on your online store.

Where to use the rich text editor

You can use the rich text editor to add or edit text in several places on your store:

If you're using an Online Store 2.0 theme, then you can add rich text sections to your pages or templates with the Theme Editor.

Add HTML content with the rich text editor

You can enter HTML content for your blog posts, pages, product descriptions, and collection descriptions with the rich text editor.

Click the </> Show HTML button to view the HTML code for the content inside the rich text editor.

In the HTML view, you can make many changes to the content in the rich text editor. You can add images, videos, or tables using HTML, and you can debug or fine-tune the layout and content style.

Embed a media widget

If you want to embed a video or music widget, then you need to first host it on a service like Youtube, Vimeo, or SoundCloud. These services generate an embed code, which you can copy and paste into your Shopify admin rich text editor.

Steps:

  1. Find the embed code for the media that you want to embed.

  2. Select the entire embed code by clicking it and pressing ctrl + A on a PC or command + A on a Mac.

  3. Copy the embed code by pressing ctrl + C on a PC or command + C on a Mac.

  4. In your Shopify admin, click the Show HTML button on the rich text editor for the content that you're editing.

  5. Paste the embed code by pressing ctrl + V on a PC or command + V on a Mac.

  6. Click Save.

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.

To choose a format for text, highlight the text and then click the Formatting button.

Formatting options

  • Paragraph

    Most text content of your website is paragraph text. Paragraph text usually has a font size of 10–12 pt, but some themes use different font sizes.

  • Heading (1-6)

    Headings are used to structure content. There are 6 heading levels. Heading 1 is the most important level and Heading 6 is the least important.

  • Blockquote

    A block quote is used to show text that is attributed to someone else, like a quotation or an excerpt from a book or website.

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.

Underline text

To underline text, highlight the text and click the Underline button.

Create a bulleted list

To create a bulleted list, click the Bulleted list button.

You can type to create the first bulleted list item. To create new list items, press the enter or return key. To finish the list, press the enter or return key twice.

Create a numbered list

To create a numbered list, click the Numbered list button.

You can type to create the first numbered list items. To create new list items, press the enter or return key. To finish the list, press the enter or return key twice.

Indent text

Indenting a paragraph gives it a margin on its left side. To indent a paragraph, click the Indent button.

Unindent text

Unindenting a paragraph removes any indented margins that it has. 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.

Change text colors with the rich text editor

Steps:

  1. Highlight the text and click the Color button.

  2. Click a color or enter a hex code to change the highlighted text to that color.

Change text background colors

Steps:

  1. Highlight the text and click the Color button.

  2. Click the Background tab.

  3. Click a color or enter a hex code to change the highlighted text's background to that color.

Clear formatting in the rich text editor

To remove formatting from text or images, highlight the content and then click the Clear formatting button.

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.

Steps:

  1. In the rich text editor, click the Insert table button.

  2. Click Insert table to insert a table. This creates a table with one row and one column.

After you've created a table, click the Insert table button again to modify the table's rows and columns:

  • Insert row above: Place your cursor in a row and click this button to insert a new row above.
  • Insert row below: Place your cursor in a row and click this button to insert a new row below.
  • Insert column before: Place your cursor in a column and click this button to insert a new column before that column.
  • Insert column after: Place your cursor in a column and click this button to insert a new column after that column.
  • Delete row: Place your cursor in a row that you want to delete and then click this button.
  • Delete column: Place your cursor in a column that you want to delete and then click this button.
  • Delete table: Place your cursor anywhere in the table and then click this button to delete the entire table.

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.

Steps:

  1. Highlight the text or image that you want to turn into a link.
  2. Click Insert link.
  3. Enter the destination URL for the link in the Link to field:
    • To link to an external website that is outside of your Shopify store, enter https:// followed by the web address, for example https://www.example.com.
    • To link to a page within your Shopify online store, enter the short URL, for example /collections/summer-collection.
    • 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.
  4. Enter a short description of the link in the Link title box.
  5. Choose how the link will open with the Open this link in menu:
    • the same window: The link will open in a user's existing browser tab or window.
    • a new window: The link will open in a new browser tab or window.
  6. Click Insert link to convert your highlighted text into a link.

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.

To link to a specific page of your online store, such as a collection or product page, use the URL format /page-type/page-handle. For example, to link to a collection you've created called Summer Collection, use the URL /collections/summer-collection.

Links to websites that are outside of your Shopify store are called external links. External links need to be entered in full and begin with http://.

After you upload a file, you can link it to content in the rich text editor to make it available for download from a product or collection description, webpage, or a blog post.

Steps:

  1. From your Shopify admin, go to Content > Files.
  2. Copy the URL for the file that you want to link.
  3. In your Shopify admin, click the product, collection, webpage, or blog post where you want to add the file.
  4. In the rich text editor, enter or choose link text.
  5. Select the link text.
  6. Click Insert link
  7. In the Link to field, paste the URL for the file that you want to link.
  8. Click Insert link. In the rich text editor, linked text displays in blue and is underlined.

Insert images with the rich text editor

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

Upload images

Steps:

  1. In the rich text editor, click the Insert image button.

  2. In the Insert image dialog, click the Uploaded images tab.

  3. Click Upload file.

  4. Choose a WebP, HEIC, SVG, GIF, JPEG or PNG image file from your computer.

  5. Click the image that you uploaded to select it.

  6. From the Size menu, select the display size of the image. You can select Original to insert the image without altering its display size.

  7. Click Insert image to place the image into the rich text editor.

Choose from product images

Steps:

  1. In the rich text editor, click the Insert image button.

  2. In the Insert image dialog, click the Product images tab.

  3. Click the image that you want to insert.

    If you don't see the product media that you want to insert, then you can use the arrow buttons to look on different pages.

  4. From the Size menu, select the display size of the image. You can select Original to insert the image without altering its display size.

  5. Click Insert image to place the product image into the rich text editor.

Use an image URL

To insert an image using a public URL:

  1. In the rich text editor, click the Insert image button.

  2. In the Insert image dialog, click the URL tab.

  3. Enter the publicly accessible URL of your image file.

  4. Click Insert image to insert the image in the rich text editor at its original size.

Move and resize an image in the rich text editor

After you add an image into a product or collection description, webpage, or a blog, you can move it to another location in the content.

Steps:

  1. In your Shopify admin, click the product, collection, webpage, or blog post that includes the image that you want to move or resize.
  2. In the rich text editor, click the image.
  3. Do either of the following:
    • To move the image, click and drag it to another location in the Content field.
    • To resize the image, click and drag one of the corners.
  4. Click Save.

Edit an image in the rich text editor

You can change the size, text wrapping, and alignment of an image within the rich text editor. You can also edit the image URL, or add or edit image alt text.

Steps:

  1. Double-click the image in the rich text editor to open the Edit image dialog.
  2. Use the size and alignment options to edit the image:
    • To change the size of the image, select a size option.
    • To improve your online store's SEO and accessibility, add or edit image alt text.
    • To add spacing, enter the number of pixels of space that you want on each side.
    • To change the alignment of the image, select from the icons representing left, center, or right alignment.
    • To add text wrapping, check Wrap text around image.
  3. Click Edit image to save your changes.

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.

YouTube does not allow you to disable related videos, but you can specify that the related videos should be from the same channel as the video that just played.

Steps:

  1. Copy the video's URL by pressing ctrl + C on a PC or command + C on a Mac.
  1. Visit Embed Responsively. Embed Responsively is a tool that will give you an improved embed code for your video.
  1. On Embed Responsively, click to select the video website where your video is located.

  2. Paste the video's URL that you copied into the Page URL box on Embed Responsively by pressing ctrl + V on a PC or command + V on a Mac.

  3. Click Embed. Embed Responsively will create the embed code for you.

  4. If the video is from YouTube and you want to show only related videos from the same YouTube channel, then find the video's URL in the embed code. Copy and paste ?rel=0 at the end within the quotation marks.

  5. Copy all of the code inside the Embed code box.

  6. In your Shopify admin, click the Insert video button in the rich text editor.

  7. Paste the embed code into the box in the Insert video dialog.

  8. Click Insert video.

  9. Click Save when you are finished to save your changes to the item you were editing.

Insert audio files with the rich text editor

You can use the rich text editor to insert or embed audio files in blog posts, pages, product descriptions, and collection descriptions.

Steps:

  1. From your Shopify admin, click Settings, then click Files.
  2. Click Upload files to upload the audio file you want to insert or embed in your store.
  3. From the Online Store section, open the rich text editor for the page or blog post you want to feature the audio file.
  4. Copy <div id="player"><audio controls="controls">, then paste the code in the rich text editor to embed an audio player on your page.
  5. Copy the following code:
    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  6. Paste this code in your rich text editor after the code for the audio player, and then replace https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 with the URL you created for your audio file when you uploaded it to Shopify. You can find your audio file's URL at any time on the Files page.
  7. Click Save.
  8. Click View to make sure your audio file plays correctly.

Add or remove internal comments in the rich text editor

You can use comment tags <!-- and --> for internal text that you don't want to publish to your store.

Steps:

  1. In your rich text editor, click the Show HTML button.

  2. To add an internal comment, enclose the text that you want to keep hidden within <!-- and -->. For example: <!--yourtext-->.

  3. Click Save.

HTML tags that are enclosed within the comment tags are saved as internal text. For those HTML tags to work properly, you need to remove the comment tags <!-- and --> around them.

Ready to start selling with Shopify?Try it free