What can you do with substitution rules?

Summary

Substitution rules in Clonable let you automatically replace specific text, HTML, or images on your cloned website. This is useful when you want to adjust translations, fix wording, change branding, or modify small elements without editing your original site.

With substitution rules, you define what Clonable should look for and what it should replace it with. This article explains the different types of substitution rules, when to use them, and how to set them up correctly.

Requirements: You need access to a clone and permission to manage substitution rules

FAQ

What is a substitution rule?

A rule that tells Clonable to replace specific content with something else on your clone.

Does this change my original website?

No. Substitution rules only affect the clone.

Can I use substitution rules for full sentences?

Yes, but they work best for specific and clearly identifiable fragments.

⏱️ Reading time: 6–9 minutes

What are substitution rules?

Substitution rules allow you to define:

An Original value (what Clonable should look for)
A Replacement value (what it should become instead)

When Clonable finds the original content on your cloned website, it automatically replaces it with your defined replacement.

This gives you precise control over:

Text fragments
HTML elements
Images
Links
Structured content

All without touching your original website.

To use substitutions properly, it is important to understand how they work. The most important thing to know is that all rules are applied simultaneously. This may sound confusing, so we'd like to explain it to you using an animation. While evaluating rules, the following rules are used to choose between two conflicting rules:

If rule a has more characters matched than rule b, then rule a takes precedence over rule b.
When two rules have the same number of characters matched, the rule higher in the table wins.

Below is an animation in which five (overlapping) rules are applied to a piece of source code. In this animation, the words hit and miss are used to indicate whether or not a rule can match a character. To the right of the rule, you can see how many characters a rule has already matched.

In the animation, you can see that a conflict first arises between the lines bookcase and book. In this case, both rules have matched 4 characters and therefore the order is considered. Because bookcase is above book, the entire match of book is rejected and nothing is done with this rule. A moment later, a conflict arises between the rules cabinet and bookcase. Both rules have a full match. Because in this case bookshelf has matched more characters than book this rule wins and the rule bookshelf will be applied. After one rule is applied, all other rules will be reset and all must start over.

The saving behaviour

Saving substitution rules works in a separate way due to technical reasons. If you add a new substitution rule and then save, all the old substitution rules will first be deleted, and added again. So suppose you have 3 substitution rules, and you add 2 more and then save, 3 rules will first be deleted, and then 5 new ones will be added. This is mainly important to know about the next trap.

Where to find substitution rules

To manage substitution rules:

Open your clone in the Clonable control panel
Go to Customize
Click Substitution rules

Here you can create, edit, or remove rules.

<<[Substitution rules overview screen]>>

Types of substitution rules

Clonable supports different types of substitutions depending on what you want to change.

Text replacements

Use text replacement rules when:

A translation is incorrect
A brand name should stay unchanged
A specific phrase should be rewritten
A recurring word needs to be adjusted

Example

Original:

Summer sale

Replacement:

Winter promotion

Every time “Summer sale” appears on the clone, it will be replaced.

Tip: Be as specific as possible to avoid replacing unintended text.

HTML substitutions

HTML substitutions allow you to replace or remove specific HTML snippets.

This is useful when you want to:

Remove buttons or icons
Replace banners
Modify small layout elements
Change links or attributes

You must copy the exact HTML from the page source, not from developer tools.

Technical note: Small differences in spacing or line breaks can prevent a match. Always use the exact snippet from the page source.

If you want to remove something completely, leave the replacement field empty.

Image replacements

Image substitution rules allow you to swap one image for another.

This is useful for:

Region-specific banners
Localized promotions
Different product visuals per market

You simply replace the original image URL with the new image URL.

Make sure the new image is publicly accessible.

Using regular expressions (Advanced)

Regular expressions allow flexible pattern matching.

Use this only if you:

Understand pattern matching
Need dynamic replacements
Want to match variable content

Technical note: Incorrect regular expressions can break content. Use carefully.

For most users, standard text or HTML replacements are enough.

How to create a substitution rule

Follow these steps:

Open your clone
Go to Substitution rules
Click Add new rule
Enter the Original content
Enter the Replacement content
Configure options if needed
Save the rule

After saving, the rule applies automatically to your clone.

Best practices

To avoid common problems:

Copy exact content when matching HTML
Avoid overly generic words like “the” or “shop”
Test your rule on multiple pages
Check for domain references inside your replacement
Keep rules organized and clearly named

Rule of thumb: The more specific your match, the safer your substitution.

When not to use substitution rules

Substitution rules are not ideal for:

Large content changes
Full page rewrites
Complex dynamic content loaded via JavaScript
Bulk translation management

In those cases, consider:

Translation settings
Glossary rules
JSON translations
The Clone Editor

Troubleshooting

If your substitution does not work:

Check for small spacing differences
Verify casing
Confirm the content exists exactly as entered
Make sure it is not dynamically injected content

If the content is loaded dynamically, a JavaScript-based approach may be required instead of a static substitution rule.