The Visual Editor is how you build and adapt experiences directly on top of your live site. Pick elements with a click, rewrite copy, change styling, hide what isn't working, and drop in new widgets like countdowns, banners and popups - all done in-situ on your site.
What you can do
The editor gives you a single in-context workspace, allowing you to create, customise and preview experiences without needing developer resource.
How to launch the Visual Editor
The Visual Editor is available in the campaign flow. From 'Add Content' when setting up an experience - select 'Visual Editor' to begin making in-page changes from scratch. If your site is built on Shopify, make sure to read the specific section later in this article.
Selecting and editing elements
Click 'Select element' in the sidebar and then hover anywhere on your site. Elements highlight in orange as you move across them. Click one to select it - a breadcrumb at the top confirms exactly what you've grabbed (for example div.hero > h2:nth-child(1)).
Once selected, you can:
Edit text - rewrite the copy of any element without touching the surrounding markup. Changes apply immediately against the real page.
Edit styling - change font family, font colour, font size, and font style on the selected element. See the result in context.
Hide the element - a soft hide, not a deletion. The element disappears from the page but you can bring it back at any time from the View Changes panel.
Show in element tree - jump straight to the element in the structural tree (useful for finding parents or siblings).
Browsing the page with the element tree
The Element Tree gives you a structural view of the whole page - body, headers, hero, features, footer - with expand, click-to-select, and search by tag or class. Useful when the element you want is tricky to click directly, overlapped by something else, or you need to grab a parent rather than the child you can see.
Adding widgets
Open the widget gallery from 'Add Widget' in the sidebar and drop in pre-built components without writing any code. Widget types include:
Countdown banners - sticky timers for promotions, with headline, end date, timezone, and expired-state behaviour
Promo banners - flexible content banners with headline, supporting text, and a call-to-action
Positioning widgets - modals, sticky banners, overlays, and tooltips anchored to any element on the page using a 'Visually Pick' selector
Form layouts - form sections with controllable layout, alignment, and field presets
Each widget has its own configuration panel - placement, copy, dates, CTAs, styling - so you can tune behaviour without writing any code. Widgets can be edited or removed at any time from the View Changes panel.
Building experiences for different audiences
Campaigns can have multiple experiences. From the dropdown at the top, you can:
Add a new experience
Rename a experience to something meaningful
Switch between experiences to see how each one looks
Delete experiences you no longer need
Alternatively, you can still add new experiences and select segments within the in-platform campaign editor.
Previewing at any screen size
Toggle between desktop and mobile in the top right to see how the experience reflows at different breakpoints. Rotate to landscape, switch back and forth, and the preview matches what your shoppers will see. Flip into preview mode (pencil icon) to view the page without the editing side menu.
Tracking and saving changes
The View Changes panel lists every change you've made in the current variant - style edits, hides, widget inserts - each with its element selector and a quick action to edit or remove the change. Undo and redo are one click away.
Changes you make in the Visual Editor are not saved automatically. When you're ready, click Save in the top right to update the campaign record - this also regenerates the campaign script with your latest changes.
Saving follows the same status logic as the rest of the platform. If your campaign is in draft, saving keeps it in draft. If it's live, saving updates the live record. There's no separate publish step or QA mode within the editor itself.
If you try to leave by clicking "back to experience" or closing the tab, you'll be warned if you have unsaved changes so nothing gets lost by accident.
How to use the Visual Editor with Shopify
If your store is built on Shopify, you'll need to install a Chrome extension called Intent Studio to use the Visual Editor. This is specific to Shopify and is not required if you're on a different platform.
Step 1: Install the Intent Studio Chrome Extension
Download and install the Intent Studio extension from the Chrome Web Store here
Once installed, you will be able to access Intent Studio in your Chrome toolbar. If you don't see it, click the puzzle piece icon in the top-right of Chrome and pin it.
Step 2: Launch the Visual Editor
Log in to the Made With Intent platform and navigate to the experience you want to edit. Click Launch Visual Editor as normal - this will open your Shopify storefront in a new tab.
Step 3: Grant permissions for your store
When the new tab opens, the Intent Studio extension will prompt you to grant permissions to run on your store's domain.
Click the Intent Studio icon in your Chrome toolbar
When prompted, click the toggle and then allow to grant the extension permission to run on this site
The page will automatically reload with the Visual Editor loaded and ready to use
Note: You only need to do this once per domain, per device. After permissions have been granted, launching the Visual Editor will load straight into the editor without this step.