How to replace a piece of HTML code?

Summary

HTML substitutions let you replace (or remove) specific bits of HTML in your cloned website using substitution rules. The trick is grabbing the exact HTML from the page source (not your browser’s developer tools), then pasting it into a rule as the “original”, and setting what it should become as the “replacement”.

FAQ

Do i need to know HTML to use this?

Yes, but not deeply, but you should be comfortable finding the right element and copying the exact snippet.

Can I copy from developer tools (inspect element)?

Use it to locate the element, but copy the final HTML from the page source, because whitespace and line breaks can differ.

How do I remove something completely?

Set the replacement to empty (leave it blank), so the matched HTML gets replaced with “nothing”.

⏱️ Reading time: 5-7 minutes

Where to find the HTML you need
Why developer tools can mess you up
Example: remove an icon/button from a menu
Create the substitution rule
Common mistakes

Where to find the HTML you need

To create a substitution rule that contains HTML, you first need the exact HTML from the page.

The easiest way:

Open the page you want to change
Inspect the page and find the element you want to replace (right-click Inspect)
Open page source (right-click View page-source)
Search inside the page source (ctrl + f)
Find the snippet you want to replace

Why developer tools can mess you up

Developer tools (inspect element) are great for locating the right element, but not always great for copying the final HTML to use in a substitution rule.

Browsers can display whitespace and line breaks differently in DevTools than in the actual page source. If you copy the “pretty” multi-line version from the DevTools, your substitution may never match the real html.

Use DevTools to identify the element, then copy the final HTML from the page source (ctrl + u) for your substitution rule.

Step 1: find the element with inspect element

Right-click the icon/button
Click inspect (wording varies by browser)
In the highlighted HTML, move up the parent lines until the highlighted area matches exactly what you want to remove

If highlighting starts selecting extra menu items, you went one line too far up.

Step 2: locate the same snippet in page source

Open page source (ctrl + u)
Search for a unique class name or attribute you saw in DevTools (for example, a class like some-button-class)
Copy the full snippet as it appears in the source

In page source, the snippet might be on one long line, even if DevTools shows it split across multiple lines.

Create the substitution rule

Go to your Clone’s substitution rules and create a new rule.

Original

Paste the exact HTML snippet from the page source.

Replacement

Decide what it should become:

to remove it: leave replacement empty
to replace it: paste the new HTML you want instead

Options

Pick options based on what you are matching:

case insensitive: helpful if casing varies
regular expression: only if you know what you are doing (and enjoy suffering)
single word: usually not relevant for HTML snippets

Final check: avoid Clone domains

Before saving, make sure your substitution does not contain the Clone domain.

If it does, replace it with the original domain, otherwise the rule can break when applied.

Common mistakes

These are the usual reasons substitutions “don’t work” (and yes, it’s usually one of these):

copying from devtools instead of page source
matching too much or too little HTML (wrong parent element)
tiny whitespace differences (page source is the truth)
your “original” contains the Clone domain
trying to match dynamic HTML that is injected by javascript

If the content is loaded dynamically, you may need a different approach (like javascript-based editing), not a static HTML substitution.