How to Upload Images With the Rich Text Editor

Shopify store owners often find it essential to enhance their store’s appearance by adding images to product descriptions, blog posts, and pages. Using the Rich Text Editor, they can easily upload and format images to complement their content.

In this article, you’ll explore a step-by-step guide on how to upload images with Shopify’s Rich Text Editor, along with troubleshooting tips and answers to frequently asked questions.

Step-By-Step Guide On Uploading Images With the Rich Text Editor

Step 1: Open the Rich Text Editor

• Log into your Shopify admin.
• Go to the Products section if you’re adding an image to a product description.
• Choose the specific product you want to edit.

• Scroll down to the Description box. Inside the description box, you will see formatting tools.
• Click the Insert image icon (a small picture or a photo frame). This will open a new pop-up window for image uploading

Step 2: Select the Uploaded Images Tab

In the pop-up window, there are two main options for inserting an image:

Option 1: Select from existing images that have already been uploaded. These images appear below the upload options.

• Simply click on one of the images displayed to select it.

Option 2: Upload a new image using one of the three methods:

• Click Add image to upload a file from your computer.

Note: Supported formats include JPEG, PNG, GIF, WebP, and SVG​.

• Click Add from URL to insert an image via a web link.
• Drag and drop an image into the designated box to upload it directly.

Upload the new image

Click Done at the bottom-right corner of the window to insert the image into the text editor. The image will now appear within the product description.

Step 3: Editing the Image After Upload

After inserting the image, you can adjust its size, alt text, alignment, and more:

1. 
   

   Double-click the image within the description editor.

   
   
2. 
   

   The Edit image window will open

   
   

Change Image Size: Click the Image size dropdown menu. You can choose from various predefined size options

• Original size: Insert the image in its original resolution.
• Inline (16px): Very small size, often used for icons.
• Icon (32px): Small size, good for icons.
• Thumbnail (50px): Small preview size.
• Small logo (100px): Appropriate for logos.
• Logo (160px): Slightly larger logo size.
• Product thumbnail (240px): Suitable for small product previews.
• Product image (480px): Standard product image size.
• Banner image (600px): Ideal for banners or larger headers.
• Wallpaper (1024px) and Wallpaper (2048px): Very large image options.

Change image size

• Alt Text: Enter a description for accessibility and SEO.
• Alignment: Choose left, center, or right alignment for the image.
• Wrap Text: Check this option if you want the text to wrap around the image.
• Spacing: Adjust the margins around the image by entering values for Top, Bottom, Left, and Right.

Edit image

• Once satisfied with your changes, click Edit image to apply your modifications.

Save edits

Step 4: Review and Save Changes

• Review the Image: After making adjustments
• If the image looks appropriate and fits within your content, proceed to the next step.
• If further adjustments are needed, double-click the image again to reopen the Edit image window.
• Click Save at the top-right corner of your product, blog, or page editor to ensure all changes, including the image, are saved properly.

Save changes

Step 5: Preview the Image on the Live Site (Optional)

• Click the Preview button at the top-right of the page editor. This will open a new tab showing the page as it would appear live.

Preview on the live site

• If you notice any issues with the image in the preview (e.g., sizing or alignment), return to the editor and repeat the steps to adjust the image settings.

Troubleshooting of Uploading Images With the Rich Text Editor

If you encounter issues while uploading images using Shopify’s Rich Text Editor, here are some common problems and their solutions:

When your image upload doesn’t complete, check the following:

• File Format: Ensure your image is in JPEG, PNG, GIF, WebP, or SVG formats. Unsupported formats will prevent uploads.
• File Size: The image file should not exceed 20 MB. Larger files will fail to upload.
• Browser Cache: Clear your browser cache and cookies, which can resolve some temporary upload errors.

If the uploaded image appears blurry or distorted:

• Size Option: Select the Original size during the upload to maintain quality. Other size options may lead to reduced image clarity.
• Resolution: Check that your image resolution is appropriate. Shopify supports up to 20 megapixels, and lower resolutions may be distorted when resized.

When the image doesn’t display on the page:

• Check URL: Right-click on the image placeholder to inspect its URL. Ensure the link starts with “cdn.shopify.com” to confirm it’s correctly hosted.
• Update Browser: Ensure you’re using an updated browser like Chrome or Firefox, as older browsers may struggle to display images correctly.

If the alt text is missing or not visible:

• Verify Alt Text: Ensure you added the alt text while uploading. You can edit the image afterward to add or update the alt text.

If images load slowly, consider these options:

• Compress the Image: Use tools like TinyPNG to reduce the file size while maintaining image quality.
• Resize Before Uploading: Optimize images by resizing them to fit your page requirements before uploading.

FAQs

Can I insert images directly from a URL in the Rich Text Editor?

Yes, Shopify allows you to insert images directly from a URL. When you open the image insertion window, click on the URL tab and paste the image’s URL. Make sure the link is valid and publicly accessible, otherwise, the image won’t display on your store.

How can I remove an image that I’ve inserted using the Rich Text Editor?

To remove an image, simply click on the image within the Rich Text Editor and hit the delete or backspace key. Alternatively, you can right-click on the image and select Remove to delete it from the content area without affecting the original file stored in Shopify’s files.

Can I align the images inserted in the Rich Text Editor?

Yes, you can align images using the alignment options within the Rich Text Editor. After inserting the image, click on it and use the toolbar to align it to the left, center, or right. You can also add spacing by hitting the return key above or below the image.

How can I replace an image after it has already been inserted?

To replace an image, click on the image inside the editor and use the Insert image icon again. This will allow you to upload a new image or choose one from the Uploaded Images tab. Select the new image, adjust the size, and click Insert to replace the old one.

Does Shopify automatically compress images uploaded through the Rich Text Editor?

Shopify does not automatically compress images for optimal load times. You should resize and compress your images before uploading them to ensure fast page loading speeds. Shopify supports up to 20 MB per image, but smaller, optimized images will improve overall store performance.

In conclusion

Uploading images using Shopify’s Rich Text Editor is a simple yet powerful tool to enhance your store’s content. By following the correct steps and troubleshooting common issues, you can seamlessly integrate images into your product descriptions, pages, or blog posts to create a more engaging and visually appealing store.

Related Posts:

• How To Use Shopify Image Editor: A Detailed Guide
• How to Move and Resize an Image in the Rich Text Editor on Shopify