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:

• Product descriptions
• Collection descriptions
• Blog posts
• Pages
• Store Policies

If you're using anOnline Store 2.0 theme, then you can addrich text sectionsto your pages or templates with theTheme 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 theShow HTMLbutton 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 likeYoutube,Vimeo, orSoundCloud. These services generate an embed code, which you can copy and paste into your Shopify admin rich text editor.

Steps:

1. Find theembed codefor the media that you want to embed.

2. Select the entire embed code by clicking it and pressingctrl+Aon a PC orcommand+Aon a Mac.

3. Copy the embed code by pressingctrl+Con a PC orcommand+Con a Mac.

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

5. Paste the embed code by pressingctrl+Von a PC orcommand+Von a Mac.

6. ClickSave.

Format text with the rich text editor

With theFormattingbutton, 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 theFormatting按钮。

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)

  标题是用于结构的内容。有6 heading levels.Heading 1is the most important level andHeading 6is 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 textbold, highlight the text and click theBold按钮。

Italicize text

To make text italic, highlight the text and click theItalic按钮。

下划线的文本

To underline text, highlight the text and click theUnderline按钮。

Create a bulleted list

To create a bulleted list, click theBulleted list按钮。

You can type to create the first bulleted list item. To create new list items, press theenterorreturnkey. To finish the list, press theenterorreturnkey twice.

Create a numbered list

To create a numbered list, click theNumbered list按钮。

You can type to create the first numbered list items. To create new list items, press theenterorreturnkey. To finish the list, press theenterorreturnkey twice.

Indent text

Indenting a paragraph gives it a margin on its left side. To indent a paragraph, click theIndent按钮。

Unindent text

Unindenting a paragraph removes any indented margins that it has. To unindent or "outdent" a paragraph, click theOutdent按钮。

Align text

To align text, select the text, click theAlignmentbutton, and chooseLeft align,Center align, orRight align.

Change text colors with the rich text editor

Steps:

1. Highlight the text and click theColor按钮。

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 theColor按钮。

2. Click theBackgroundtab.

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 theClear formatting按钮。

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 theInsert table按钮。

2. ClickInsert tableto insert a table. This creates a table with one row and one column.

After you've created a table, click theInsert tablebutton 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:

1. Highlight the text or image that you want to turn into a link.
2. ClickInsert link.
3. Enter the destination URL for the link in theLink tofield:
   • To link to an external website that is outside of your Shopify store, enterhttps://followed by the web address, for examplehttps://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, entermailto:followed by the email address, for examplemailto:example@example.com.
   • To create a link that makes a phone call, entertel:, followed by the phone number, for exampletel:+0-123-456-7890.
4. Enter a short description of the link in theLink titlebox.
5. Choose how the link will open with theOpen this link inmenu:
   • 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. ClickInsert linkto convert your highlighted text into a link.

Add internal and external links with the rich text editor

Shopify内存储链接页面re called internal links. You can use short URLs to create internal links. For example, the URL/collectionswill 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 withhttp://.

Link to a file in page content

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

Insert images with the rich text editor

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

• upload images
• choose from your product images
• use a public image URL.

Upload images

Steps:

1. In the rich text editor, click theInsert image按钮。

2. In theInsert imagedialog, click theUploaded imagestab.

3. ClickUpload 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 theSizemenu, select the display size of the image. You can selectOriginalto insert the image without altering its display size.

7. ClickInsert imageto place the image into the rich text editor.

Choose from product images

Steps:

1. In the rich text editor, click theInsert image按钮。

2. In theInsert imagedialog, click theProduct imagestab.

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 theSizemenu, select the display size of the image. You can selectOriginalto insert the image without altering its display size.

5. ClickInsert imageto 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 theInsert image按钮。

2. In theInsert imagedialog, click theURLtab.

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

4. ClickInsert imageto 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 theContentfield.
   • To resize the image, click and drag one of the corners.
4. ClickSave.

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 theEdit imagedialog.
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.
   • 添加文本包装,检查Wrap text around image.
3. ClickEdit imageto 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 asYouTubeorVimeo.

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 pressingctrl+Con a PC orcommand+Con a Mac.

1. VisitEmbed 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 thePage URLbox on Embed Responsively by pressingctrl+Von a PC orcommand+Von a Mac.

3. ClickEmbed. 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=0at the end within the quotation marks.

5. Copy all of the code inside theEmbed codebox.

6. In your Shopify admin, click theInsert videobutton in the rich text editor.

7. Pastethe embed code into the box in theInsert videodialog.

8. ClickInsert video.

9. ClickSavewhen 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, clickSettings, then clickFiles.
2. ClickUpload filesto upload the audio file you want to insert or embed in your store.
3. From the欧宝体育官网入口首页section, open the rich text editor for the page or blog post you want to feature the audio file.
4. Copy
   , then paste the code in the rich text editor to embed an audio player on your page.
5. Copy the following code: