AI Visual Builder
The AI Builder lets you describe changes to your storefront and have them applied automatically.
Accessing the AI Builder
Open any test or personalization experience and navigate to the Visual Builder
Click the AI Assistant button in the toolbar
Type your prompt describing the change you want to make
Review the result — the change will be previewed live on the page
Click Save and exit when you're done, then save your test or experience to apply the changes
How it works
When you submit a prompt, the AI Builder analyzes your site, including fonts, colors, and existing component styles, and generates a style guide it uses to ensure any new or modified elements match your storefront. For complex requests, it verifies its own output before returning results.
Your Shopify products, collections, and pages are already loaded into its context, so it knows your catalog before you ask.
Every change the AI Builder creates is a standard Intelligems modification under the hood:
Text and copy changes are created as text modifications, just like those added manually in the Visual Builder
Inserted elements are created as generic components — AI-generated HTML/CSS components with editable properties
Reordering and structural changes are applied as CSS/JavaScript modifications
This means all AI-generated changes are visible and editable in the Visual Builder after the fact. You don't have to re-prompt to make a small tweak, although you can.
Because every AI-built change is a standard mod, you can also:
Test it. Run an A/B test between an AI-built mod and your control using the same Intelligems testing flow you already use.
Personalize it. Show the mod to a specific audience: first-time visitors, mobile users, or any segment you can target with Intelligems.
What can the AI Builder do?
The AI Builder handles a wide range of on-site modifications, including changes that would otherwise require custom code or developer involvement.
Edit text
Change copy anywhere on the page.
Try: "Change 'Top-rated' to ‘Most Loved’ on the home page"
Show or hide elements
Conditionally show or hide any page element.
Try: "Hide the sale banner on all product pages"
Insert new elements
Add new content to the page that matches your site's existing style — trust badges, announcements, sections, and more.
Try: "Add a trust badge under the buy button that says 'Free returns, no questions asked'"
Reorder page sections
Move elements or sections to a different position on the page.
Try: "Move the reviews section above the product description"
Bulk changes
Apply the same modification across multiple matching elements at once.
Try: "Remove all sale badges claiming more than 80% off across the page"
Replace images
Swap out images with alternatives from your Shopify media library — or upload a reference image directly.
Try: "Swap the hero image with the summer campaign photo from my media library"
Ask for ideas
Not sure where to start? Ask the AI what to try, not just what to build. It can suggest changes based on your page or your last prompt.
Try: "What should I test on this page?" or "What else should I do based on the last change we made?
Uploading images
You can upload images directly into the AI Builder chat. This works in two ways:
As a reference for style or content. Upload a design mockup, brand asset, or screenshot and ask the AI Builder to match it. For example: "Make the announcement bar look like this" with a screenshot attached.
To swap in a specific image. Upload the image you want to use and ask the AI Builder to place it. For example: "Replace the hero image with this" with your new photo attached.
Supported file types include images, PDFs, CSVs, and markdown files.
Editing AI-generated changes
After the AI Builder creates a modification, you can edit it directly in the Visual Builder without re-prompting:
Generic components expose editable properties like text content, font color, background color, or images. Click the component in the builder to see what's adjustable.
Text modifications can be updated just like any manually added text mod. See the Visual Experience Builder documentation for details.
CSS/JS modifications can be opened and edited in the code editor. See the Visual Experience Builder documentation for details.
Ask for controls. If you want to adjust a property without re-prompting, ask the AI to build settings into the mod. For example: "Add a setting so I can change the badge color without re-prompting." The settings will appear as editable properties on the component, just like a generic component.
Tips
Be specific in your prompts. The more context you give, the better the result. "Add a trust badge under the 'Safe and Secure Checkout' badge that says 'Free of synthetics and toxins'" will produce a better match than "add a trust badge."
The AI Builder uses your live site for context. Changes are previewed on your real storefront, so results reflect your actual page content and structure.
For bulk changes, describe the pattern clearly. Prompts like "remove all product badges that claim a sale over 80% off" work well when the pattern is consistent across the page.
You can layer prompts. Each prompt adds to the existing set of modifications in your experience. There's no need to re-describe previous changes.
Upload images for richer context. Attaching a screenshot or asset gives the AI Builder a clearer target to work toward.
Things to note
The AI Builder is in early beta and improving rapidly. A few things to keep in mind:
Not all structural changes are possible via prompt. Some complex layouts may require manual adjustments or custom code
Results may vary on highly customized or non-standard Shopify themes
For manual edits, see the Visual Experience Builder documentation.
Last updated
Was this helpful?