Visual Experience Builder

Use Intelligems' Visual Builder to tailor visitors' on-site experience based on their test group.

In Beta: This is the newest and recommended way to make content edits in your store. For the Classic Onsite Editor docs, go here.

What is the Visual Builder?

The Visual Builder allows you to adjust site text, HTML, or CSS for site visitors based on their test or experience group. It embeds your store directly within Intelligems, so you can click any element to edit it and see changes live, without leaving the platform.

The Visual Builder offers the same capabilities as the classic on-site editor. You can switch between the two at any time without losing your work.

---

Why would I need to use the Visual Builder?

Intelligems automatically handles updates for price and shipping tests. The Visual Builder is designed for hardcoded content that doesn't pull from product variants or shipping settings. Common use cases include:

• Announcement bars displaying shipping offers during threshold tests

• Fixed prices on landing pages or product detail pages during pricing tests

• Shipping policy pages during shipping tests

• Shipping announcements on product pages

• Content tests on smaller site components (button CTAs, button colors, product descriptions)

Accessing the Visual Builder

When creating or editing a content experience or test, go to the Modifications tab and select Visual Builder. Your store loads in a full-screen embedded view within Intelligems.

Navigating your store

The Visual Builder has two modes: Select and Navigate.

• Select mode — The default. Click any element on the page to start editing it.

• Navigate mode — Use this to move between pages (e.g., navigate to a product page) before switching back to Select mode to make edits.

Making edits

Text

Click any text element to modify text. You can:

• Edit the text directly and see the change reflected live in the preview

• Hide or show the element using the checkbox

• Find specific text and replace all instances using the Find/Replace fields

• Edit the element selector if needed

• Add an element description for reference

Images

Click any image to open the image configuration sidebar. You can:

• Browse your media library and select a replacement image

• Replace just the selected instance or all instances of that image across the page

• Hide or show the image using the checkbox

Note: In most cases, the Visual Builder will correctly identify a clicked element as an image. In some cases it may not. You can manually adjust the selector if needed.

CSS and JavaScript

Click Edit CSS/JS to edit global CSS and JavaScript for the page.

HTML

Within any modification, toggle to Edit HTML to customize the HTML of a specific element.

Saving your changes

When you're done editing, click Save and exit. This saves all modifications, just as the on-site editor does.

After saving, you still need to Save the test or experience to apply your changes.

Tips and Tricks

• If you are making a text edit and using the Find field, the text is case sensitive. Use your browser's inspector to verify the exact casing in the source—fonts can render differently than the underlying text.

• If targeting a specific element is proving difficult, see our [expanded guide on element selection].

• To limit Visual Builder edits to specific pages, use [Page Targeting].