Using the rich text editor

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

Tip

When working with the rich text editor, press enter or return to create a new paragraph. To insert a line break without forcing a new paragraph, press and hold shift, and then press enter or return.

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:

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:

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

  1. Find the embed code for the media that 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 that you're editing to save your changes.

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:

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

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

Rich text editor bulleted list button

You can type to create bulleted list items:

Rich text editor bulleted list example

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:

Rich text editor numbered list button

You can type to create numbered list items:

Rich text editor numbered list example

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 with the rich text editor

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 in the rich text editor

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

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

To insert a table:

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

To insert a link:

  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, enter 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. 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.

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 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:

  1. Copy the URL for the file that you want to link.

  2. In your Shopify admin, click the product, collection, webpage, or blog post where you want to add the file.

  3. In the rich text editor, enter or choose link text. For example, you might add a link to a PDF size chart from the link text, Click here to download our sizing chart.

  4. Select the link text.

  5. Click Insert link:

    Insert pdf
  6. In the Link to field, paste the URL for the file that you want to link.

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

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.

Upload images

To upload an image:

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

    Rich text editor insert image button
  2. In the Insert image dialog, 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, 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 doesn't 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

To choose an image from your 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, 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 that you want to insert, then you can use the arrow buttons to look on different pages:

    Insert product image page buttons
  4. From the Size to insert menu, 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.

Use an image URL

To insert an image using a public URL:

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

    Rich text editor insert image button
  2. In the Insert image dialog, 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.

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:

  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. Make your changes:

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

To edit an image in the rich text editor:

  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 change the image a new image URL.
    • 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.

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, then 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.

    Note

    You might encounter playback issues on certain iPhone models when vertically viewing videos that were embedded using code from Embed Responsively.

  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 embed videos from YouTube.

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.

To embed an audio file:

  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" />

    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.

  6. Click Save.

  7. Click View to make sure your audio file plays correctly.

Tip

You can embed code for audio files directly from Soundcloud, but Soundcloud's audio player might not function correctly on all devices. For more information, visit Soundcloud's help center.

Where to use the rich text editor

You can currently use the rich text editor in the Shopify app to add descriptions to your products. If you want to add text to pages, blogs, or collections, then you need to do so from your Shopify admin in a web browser.

Format text with the rich text editor

You can use the rich text editor to format your text in several ways:

Bold text

To make your text bold, highlight the text and then tap the bold button:

Bold button iphone

Italicize text

To italicize your text, highlight the text and then tap the italic button:

Italic button iphone

Underline text

To underline your text, highlight the text and then tap the underline button:

Underline button iphone

Align text

To change the alignment of your text:

  1. From the text editor, highlight the text that you want to align.
  2. Tap the alignment button:
    Alignment button iphone
  3. Tap one of the alignment options to select left alignment, center alignment, or right alignment.

Tip

You can select a different alignment option for each line in the text editor.

Create lists

You can use the text editor to add bulleted and numbered lists to your text.

To add a list to your text:

  1. From the text editor, tap the list button to show the two list options:

    List button iphone

  2. Tap the bulleted list or numbered list option to select the type of list that you want to add.

  3. Enter your list items. After each item, tap return to move to the next line and enter another item.

  4. When you're finished entering your list, tap return twice.

You can use the text editor to add links to your text:

  1. From the text editor, select the words that you want to make a link.

  2. Tap the link button:

    Link button iphone

  3. From the Insert link screen, enter the URL of the link.

  4. Enter a link title, which is used for accessibility and SEO.

  5. By default the link's destination will open in the same window. To set the link to open in a different window, enable the Open link in a new window option.

  6. Tap Save.

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://.

Where to use the rich text editor

You can currently use the rich text editor in the Shopify app to add descriptions to your products. If you want to add text to pages, blogs, or collections, then you need to do so from your Shopify admin in a web browser.

Format text with the rich text editor

You can use the rich text editor to format your text in several ways:

Bold text

To make your text bold, highlight the text and then tap the bold button:

Bold button android

Italicize text

To italicize your text, highlight the text and then tap the italic button:

Italic button android

Underline text

To underline your text, highlight the text and then tap the underline button:

Underline button android

Align text

To change the alignment of your text:

  1. From the text editor, highlight the text that you want to align.
  2. Tap the alignment button:
    Alignment button android
  3. Tap one of the alignment options to select left alignment, center alignment, or right alignment.

Tip

You can select a different alignment option for each line in the text editor.

Create lists

You can use the text editor to add bulleted and numbered lists to your text.

To add a list to your text:

  1. From the text editor, tap the list button to show the two list options:

    List button android

  2. Tap the bulleted list or numbered list option to select the type of list that you want to add.

  3. Enter your list items. After each item, tap return to move to the next line and enter another item.

  4. When you're finished entering your list, tap return twice.

You can use the text editor to add links (hyperlinks) to your text:

  1. From the text editor, select the words that you want to make a link.

  2. Tap the link button:

    Link button android

  3. From the Insert link screen, enter the URL of the link.

  4. Enter a link title, which is used for accessibility and SEO.

  5. By default the link's destination will open in the same window. To set the link to open in a different window, enable the Open link in a new window option.

  6. Tap the check mark to save your 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://.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free