Build a test by selecting parts of your live page

The visual editor works like selecting in a design tool: you point at the part of the page you mean. Then you either describe the change in plain words and Varly's AI builds it, or you edit the text, link, image or style yourself. You don't need to know any code. Varly checks the new version on desktop, tablet and mobile, and shows you both versions before anything goes live.

Start a test with the editor

1. Open Optimize → Experiments and click New test.
2. Keep Change this page selected under What do you want to test?. (To compare with another page that already exists, choose Send visitors to another page (split URL); see Test a different page with a split URL test.) Give the test a name, and paste the address of the page you want to change, for example a product page. Similar pages, such as all your product pages, are tested together.
3. Click Create and mark changes. The test page opens with the status Marking changes.
4. Click Open the visual editor. Your page opens in a new tab with the Varly toolbar at the bottom.

You can also open the editor for a test that came from an idea, as long as it isn't running.

Select what should change

The toolbar has two modes:

Mode	What it does
Select	Drag a box around a part of the page, or click one element. The page itself doesn't react: links and buttons don't work in this mode.
Browse	Use the page normally, for example to open another page. Your selections stay.

Press S for Select and B for Browse.

In Select:

1. Hold down the mouse button and drag. A dashed box shows what you select. Everything that falls inside the box is part of the selection, for example a heading and a button.
2. Let go. A panel opens with two tabs: Describe it and Edit directly.
3. In Describe it, type the change. Be as specific as you can, for example: “Change the heading to Free delivery on everything and the button to Shop the summer sale.” The buttons below the field give you a start, such as Change the text to… and Make it stand out more.
4. Click Add change, or press ⌘/Ctrl + Enter.

Each change gets a number and a dashed box on the page. Click the number to read it again or to delete it. Changes in the toolbar lists them all, also those on other pages.

Click Done to close the editor. Your selections are saved as you go.

Edit directly

Use Edit directly when you know exactly what you want. It needs no AI key, costs nothing and gives the same result every time. Without an AI key, the panel opens on this tab.

Click one element, choose Edit directly, and change what you need:

• Text: the new text. It replaces everything inside the element, including icons.
• Link address (links) or Image address and Image description (alt text) (images). Use a full address that starts with https://, or a path on your site such as /collections/sale.
• Text color, Background, Font size (px), Font weight, Padding, Margin and Corner radius.
• Hide this element.
• Custom CSS: style rules for this element, written as property: value pairs, for example letter-spacing: 0.02em. For safety, Varly refuses @import, url(), braces and comments.

You see the result on the page right away. Click Apply change to keep it, or Cancel to undo it. Direct edits show Edited directly in the list.

Does your test have more than one variant? Choose the one you edit in the toolbar, for example Editing: Variant B, or All variants.

Add your own code

Click Code in the toolbar to write JavaScript or CSS for a variant, right on your page. It works like the Custom code card on the test page in Varly:

1. Pick the variant, then JavaScript or CSS.
2. Type or paste your code, or write what you want under Describe the change and click Write the code with AI.
3. Click Try on this page to see the result in your own browser. Reload the page to undo it.
4. Click Save.

Only Owners and Editors can change code. The code runs on your visitors' pages, so only add code you understand and trust. Before the test can launch, Varly checks the code on desktop, tablet and mobile: click Save and check on the test page in Varly. See Write your own JavaScript and CSS for the helpers, examples and what Varly blocks.

Build the new version

Back in Varly, the test page shows every change with its number, the selected elements and who added it. Delete a change with Delete.

The test only runs on its own page (or group of pages); the header of the test page says which. If you made a change on another page, the list marks it Not on the test page: visitors won't see it. Delete it, or make the change on the test page.

Click Build the new version. Varly opens your page, the AI carries out every written change as literally as possible, your direct edits are added as they are, and you see screenshots of the original and the new version on every device. With only direct edits, no AI is used. Then check the preview link and launch the test.

You can mix both: let the AI build the bigger change, then fine-tune it with direct edits and click Update the new version. The AI's work is kept as long as your written changes stay the same.

Under What changes, the list of technical changes marks each one AI or Direct edit. Click Remove to take one out; Varly then checks the version again on every device, without AI.

Common problems

• The editor doesn't appear on my page. Check that the snippet is on that page and tracking is on (Install → 3. Turn tracking on). The editor link works for 12 hours; open it again from Varly when it has expired.
• “This editor link has expired.” Click Open the visual editor in Varly again.
• “This test is running.” You can't add changes while a test runs. Pause it first.
• A change isn't in the new version. The AI only changes what it can find on the page. Make the instruction more specific, or select a smaller part, and rebuild.
• "Not on the test page". You made the change while browsing another page in the editor. The test doesn't run there, so delete the change and make it on the test page.
• The build failed. The red card says which page Varly couldn't open and why. Fix the cause and click Try again in that card.
• “Written changes are built by AI, and there is no AI key yet.” Ask an owner to add a key, or delete the written changes and use Edit directly instead.
• A new image doesn't show. Some themes show a different image per screen size. Check the preview on every device, and select the image that is actually visible.
• The Code panel says the code editor could not load. Your site's security settings may block it. Use the Custom code card on the test page in Varly instead.