Rich text editor

You can use Shopify's rich text editor from your admin, to format and style the text that appears on your storefront. The rich text editor looks like a text box and a bar with multiple formatting buttons:

Rich text editor

Where to use the rich text editor

You can use the rich text editor to add to or edit the following sections of your store:

Add HTML content

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:

Click show html

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, you must first host it on a service like Youtube, Vimeo, or SoundCloud. These services generate an embed code, which you will copy and paste into your Shopify admin rich text editor.

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

    Embed code sample
  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:

    Paste an embed code
  6. Click Save on the page you are editing to save the changes that you made using the rich text editor.

Format text

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

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

Rich text editor 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:

Rich text editor bold button

Italicize text

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

Rich text editor italic button

Create a bulleted list

Rich text editor bulleted list example

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

Rich text editor bulleted list button

You can type to create bulleted list items. 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

Rich text editor numbered list example

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

Rich text editor numbered list button

You can type to create 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

To indent a paragraph, click the Indent button:

Rich text editor indent button

Indenting a paragraph gives it a margin on its left side.

Unindent text

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

Rich text editor outdent button

Unindenting a paragraph removes any indented margins that it has.

Align text

Rich text editor alignment example

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

Rich text editor alignment button

Change text colors

To change text colors:

  1. Highlight the text and click the Color button:

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

    Rich text editor text color dialog

Change text background colors

To change the background color of text:

  1. Highlight the text and click the Color button:

    Rich text editor color button
  2. Click Background color…:

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

    Rich text editor background color dialog

Clear formatting

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

Rich text editor clear formatting button

Insert tables

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.

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

    Click insert table
  2. Click Insert table to insert a table:

    Click insert table in the table menu

    This creates a table with one row and one column.

When you have 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 that row.
  • Insert row below: Place your cursor in a row and click this button to insert a new row below that row.
  • 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 and click this button to delete that row.
  • Delete column: Place your cursor in a column and click this button to delete that column.
  • Delete table: Place your cursor anywhere in the table and click this button to delete the entire table.

You can insert links in blog posts, pages, product descriptions, and collection descriptions with the rich text editor.

  1. Highlight the text or image that you want to turn into a link.

  2. Click the Insert link button:

    Click insert link
  3. In the Insert link dialog, type the destination URL for the link in the Link to box.

    Links to websites that are outside of your Shopify store must begin with http://.

    Insert link dialog
  4. Type 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

  1. 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.

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.

Links to websites that are outside of your Shopify store are called external links. External links must begin with http://.

Inserting images

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

Note

While you can have only 250 images associated with every product (including all its variants) there's no limit to the number of images you can use on other parts of your store.

Uploading images

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

    Rich text editor insert image button
  2. In the Insert image dialog that opens, click the Uploaded images tab.

  3. Click Upload file.

    Click upload file
  4. Choose a .jpg or .png image file from your computer.

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

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

    Tip

    Choosing a size for your image does not overwrite the original image size. You can insert the same image on different pages of your store at different sizes.

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

Choose from product images

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

    Rich text editor insert image button
  2. In the Insert image dialog that opens, click the Product images tab.

  3. Click the image that you want to insert:

    Select the product image

    If you don't see the product image you want to insert, you can use the arrow buttons to look on different pages:

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

    Tip

    Choosing a size for your image does not overwrite the original image size. You can insert the same image on different pages of your store at different sizes.

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

Insert using an image URL

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

    Rich text editor insert image button
  2. In the Insert image dialog that opens, click the URL tab.

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

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

Resizing images

Images can be resized after you insert them into the rich text editor. Resizing an image in this way does not overwrite its original image size.

  1. In the rich text editor, click to select the image:

    Select the inserted image
  2. Click the Edit image button:

    Rich text editor insert image button
  3. From the Image Size menu, click to select the image size that you want:

    Edit image select image size
  4. Click Edit image to update the image size in the rich text editor.

Wrapping text around images

You can wrap text around images in your blog posts, pages, product descriptions, and collection descriptions with the rich text editor.

  1. Insert an image with the rich text editor.

  2. Click the image, then click the Edit image button.

    Rich text editor insert image button
  3. In the Edit image dialog, click to choose the alignment of the image, and check Wrap text around image.

    Rich text editor text wrapping controls

    For example, if you want your image to be left-aligned so that text wraps around the right side, click the left alignment button and check Wrap text around image.

  4. Click Edit image to save the changes to the image.

Inserting videos

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, you will first need to upload it to a video streaming site such as YouTube or Vimeo.

To insert a video:

  1. Copy the video's URL by pressing ctrl + C on a PC or command + C on a Mac.

    Tip

    If your theme is Brooklyn, Classic, Pop, or Supply, you can instead copy your video's embed code from Youtube or Vimeo and skip to step 7. Your theme automatically makes embedded videos responsive.

  2. Visit Embed Responsively. Embed Responsively is a tool that will give you an improved embed code for your video.

  3. On Embed Responsively, click to select the video website where your video is located.

  4. 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.

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

  6. If your video is from YouTube and you don't want it to show related videos when it's finished playing, find the video's URL in the embed code, and then copy and paste ?rel=0 at the end within the quotation marks:

    Embed code example

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

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

    Click insert video
  9. Paste the embed code into the box in the Insert video dialog.

  10. Click Insert video.

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

Tip

You can generate embed code directly from YouTube, but the embedded video won't be as responsive to different screen sizes. Watch this YouTube video to find out how to generate embed code both with and without related videos.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free