Where to use the rich text 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:

Find the embed code for the media that you want to embed:

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

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

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

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

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:

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:

Create a bulleted list

To create a bulleted list, click the 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

To create a numbered list, click the 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:

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

Unindent text

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

Unindenting a paragraph removes any indented margins that it has.

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:

Highlight the text and click the Color button:

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

Change text background colors

Steps:

Highlight the text and click the Color button:

Click Background color…:

Click a color 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:

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

Click Insert table to insert a table:

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.

Insert links with the rich text editor

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:

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

Click Insert link.

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 http:// followed by the web address, for example http://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.

Enter a short description of the link in the Link title box.

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.

Click Insert link to convert your highlighted text into a link.

Add internal and external links with the rich text editor

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

Link to a file in page content

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.

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.

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

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.

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

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:

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.

Click Save.

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.

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:

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

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

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.

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

Bold text

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

Italicize text

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

Underline text

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

Align text

Steps:

From the text editor, highlight the text that you want to align.

Tap the alignment button:

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.

Steps:

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

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

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

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

Insert links with the rich text editor

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

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

Tap the link button:

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

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

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.

Tap Save.

Create internal and external links

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

Bold text

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

Italicize text

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

Underline text

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

Align text

Steps:

From the text editor, highlight the text that you want to align.

Tap the alignment button:

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.

Steps:

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

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

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

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

Insert links with the rich text editor

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

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

Tap the link button:

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

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

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.

Tap the check mark to save your link.

Create internal and external links

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