How to Clean Messy HTML Descriptions for Shopify Rich Text

The short answer

Clean Shopify description HTML = keep useful product structure + remove copied presentation clutter and active content + verify the saved description in your theme.

Supplier copy often arrives wrapped in fixed widths, inline font styles, arbitrary classes, tracking attributes, and nested div or span elements. Those details can conflict with your Shopify theme and make product descriptions render with strange spacing, colors, or overflow. Shopify warns that copied content can include unwanted HTML and cause storefront display errors; its rich text editor guide shows how to open the HTML view to inspect and edit that markup.

The Shopify Description HTML Cleaner reconstructs pasted markup from a small allowlist. It removes presentation attributes and active or theme-dependent elements while preserving common text structure, safe links, and images. It does not publish content to your store, upload images, or guarantee how every custom theme will render the result.

What “clean HTML” should mean for a product description

Clean does not mean removing every tag and leaving a wall of plain text. A useful product description may need paragraphs, subheadings, bullet lists, emphasis, a specification table, and links to care or sizing information. The goal is semantic structure that is easy to read and does not carry styles copied from another website.

For example, this source is difficult to maintain because visual styling is mixed into the copy:

<div style="width:980px;font-family:Arial;color:#333" class="supplier-copy">
  <span style="font-size:28px">Everyday Canvas Tote</span>
  <p style="margin:24px 0;color:#777">Reinforced handles and a cotton lining.</p>
</div>

A cleaner version can use a real heading and paragraph, leaving typography and spacing to the theme:

<h2>Everyday Canvas Tote</h2>
<p>Reinforced handles and a cotton lining.</p>

Product templates normally use the product title as the page’s main H1. The cleaner converts pasted H1 tags to H2 so the description does not add a competing primary heading. Review the final heading order against your theme’s product title and any description sections around it.

What the Shopify HTML cleaner keeps and removes

The tool preserves paragraphs, line breaks, H2–H6 headings, ordered and unordered lists, list items, emphasis, blockquotes, horizontal rules, basic tables, links, and images. It unwraps common layout tags such as div, span, and font: the text and supported child elements remain in reading order while the wrapper styling disappears.

It removes style, class, id, data-*, event-handler, and other unapproved attributes rather than trying to guess which supplier CSS is harmless. It drops scripts, embedded documents, forms, controls, SVG, media players, and similar active or theme-dependent elements with their contents. Unknown passive wrappers are unwrapped; comments are removed. Links keep only safe HTTP, HTTPS, mailto, tel, or ordinary relative destinations. An image remains only when it has a safe HTTP or HTTPS source; its alt text and reasonable width or height can be retained.

This allowlist is intentionally conservative. It does not preserve inline colors, custom buttons, video embeds, responsive srcset, arbitrary data attributes, or a supplier’s layout. If your description needs an interactive size chart or rich visual section, use a Shopify theme section, metafield, app block, or another supported content feature instead of embedding a copied widget in the description.

A practical cleanup workflow

1. Save a source copy. Copy the current description HTML or duplicate the product in a test catalog. This gives you a rollback point if a table, link, or image needs a different implementation.
2. Paste the source into the cleaner. Use the left panel for HTML copied from a supplier, document, or previous storefront. The tool processes the input in the browser and shows character and UTF-8 byte counts.
3. Review the cleanup results. Check how many attributes and elements were removed or unwrapped. A large count is not automatically a problem, but it is a reason to inspect whether the source contained a table, media widget, or structure you intended to keep.
4. Read the output. Confirm that headings still describe the right sections, list order is sensible, text is not missing, and links point to the correct destination. The cleaner cannot verify product specifications or claims.
5. Copy the cleaned HTML into Shopify. In the product description editor, open its HTML view, replace the source markup, and save. Shopify’s admin labels may change, so locate the editor’s HTML or code control for the product description you are editing.
6. Preview the saved product. Check desktop and mobile, including tables, lists, line breaks, image loading, alt text, and spacing. Shopify and your theme control final rendering and may normalize markup after save.
7. Edit the words separately. Supplier text may contain unsupported claims, inaccurate specifications, duplicate copy, or wording that does not match your brand. HTML cleanup fixes formatting, not editorial accuracy or originality.

Use the cleaned product description HTML output as a starting point, not a bulk publish command. Test one representative product first, especially if your catalog uses custom description styling or app-generated sections.

Links and images need their own review

Cleaning an image tag does not move the image into your Shopify Files library. The existing URL may be temporary, hot-linked from a supplier, blocked to some visitors, or removed later. Upload approved product images to Shopify or a stable image host, replace the URL, and confirm that the image is useful, correctly cropped, and has descriptive alt text.

The cleaner strips attributes such as srcset, style, class, and alignment. That can change responsive behavior or visual sizing even when the image itself remains. Check large tables and images on small screens; if they overflow, rebuild them with theme components or simpler content rather than putting fixed-width layout rules back into copied HTML.

For links, inspect the destination and the text that describes it. The cleaner permits safe web, email, phone, and relative URLs, but a technically allowed link can still be broken or misleading. Remove tracking URLs and supplier-only links that should not appear on your product page.

Safety and Shopify compatibility limits

The cleaner parses input with a detached browser DOM and creates new output elements from an explicit allowlist; it does not mount the pasted HTML as live page content. It removes known active content, but no sanitizer can guarantee compatibility with every Shopify theme, app, browser, or future editor behavior. Treat the output as a formatting aid and test it after saving.

The tool does not connect to Shopify or save your text, but avoid pasting customer data, private supplier terms, or information you would not want in the current browser session. Character and byte counters are informational; they do not enforce every Shopify field or API limit. If you manage descriptions through an app or integration, verify that system’s own validation rules.

Common cleanup mistakes

• Removing every tag and losing meaningful headings, lists, and table structure.
• Keeping a copied h1 that duplicates the product page’s main title.
• Assuming stripped styling means the page will look correct in every theme.
• Forgetting that an external image URL is not uploaded or hosted by the cleaner.
• Deleting useful links without checking whether product care or sizing depends on them.
• Reintroducing unsafe embeds or scripts to restore a supplier page’s appearance.
• Cleaning HTML but publishing copied product claims without verifying them.
• Applying the result to the whole catalog before testing one representative product.

Frequently asked questions

Why does copied HTML look broken in Shopify?

Copied content can include inline styles, fixed widths, nested wrappers, and editor-specific markup that conflicts with the storefront theme. Shopify recommends reviewing unwanted HTML in the rich text editor’s HTML view.

Will the cleaner preserve my Shopify product images?

It keeps an image only when it has an accepted HTTP or HTTPS src, and can retain alt text and reasonable dimensions. It does not upload or host the image, so verify the source URL or replace it with a stable Shopify image URL.

Can I paste the cleaned HTML directly into Shopify?

You can paste it into the product description’s HTML view, save, and preview the page. Test one product first because the editor and theme may normalize or render markup differently.

Does the cleaner preserve videos or custom buttons?

No. It removes embedded media and unsupported interactive elements. Use a Shopify theme section, app block, or other supported feature for content that needs interaction.