The variant editor lets you build the variant for a test without leaving Shogun. Describe the change you want in chat and Shogun's AI makes it, or select part of the page and edit its sections and settings yourself. You see every change on a live preview of your store as you work.
To open it, click Edit in Shogun on a variant. The editor is in beta, and you have unlimited use of it during the beta. Use Email us feedback at the top of the editor to tell us what's working and what isn't.
Before you start
Your store uses an Online Store 2.0 theme. On older themes, the Edit in Shogun option is turned off.
You're setting up a Page Test, Template Test or Split URL Test. Theme Tests aren't supported yet.
The page you're testing doesn't use a Shopify Liquid template. Liquid pages can't be edited with Edit in Shogun, so choose a page that uses a standard Online Store 2.0 template.
Use a wide browser window. In a narrow window the editor shows only its side panel and hides the preview.
Open the editor
1. Create or open a test
Start a new Page, Template or Split URL Test, or open one that's still a draft.
2. Choose the variant's template
On the variant's card, use Select a template to choose the template the variant should use. The editor opens on that template, and its file name shows in the editor's toolbar, so you always know which one you're editing.
3. Click Edit in Shogun
On the variant's card, click Edit in Shogun. The first time, a "Try our new advanced editor" note points to this button. Choose Edit in Shopify instead if you'd rather make the changes in Shopify's theme editor.
On the variant card, click Edit in Shogun. The first time, a note introduces the new editor.
Find your way around
The editor has a preview of your page (the canvas) and a side panel with three tabs:
Chat: describe the change you want and the AI makes it.
Structure: the page's sections and blocks, and the settings for whatever you've selected.
History: your AI changes and saves, with the files each one changed.
The toolbar above the canvas lets you:
Show or hide the side panel.
Switch between desktop and mobile previews, or expand the preview to full screen.
Refresh the preview.
Switch between Select mode, where clicking the page selects that element, and Browse mode, where you can click links and use the page normally.
Open a full Preview of the variant in a new tab.
The variant editor: side panel on the left, live preview of your variant on the right.
Make changes with AI
In the Chat tab, type what you'd like to change, for example "Give my add to cart button a thick shadow and 12px rounded corners". If you're not sure where to start, pick one of the example prompts.
A change typically takes about a minute. When it's done, the AI summarizes what it changed and lists the modified files. Use the thumbs up or down under the reply to tell us how it did.
By default, a request applies to the entire page. To focus it on one part of the page, click that part on the canvas first, or click the sparkle icon next to a section in the Structure tab. The chat box then reads "Ask Shogun to edit this element" or "Ask Shogun to edit this section" and shows what you've selected. Clear the selection to go back to the whole page. Smaller, specific requests work best.
Click part of the page to focus your request on it. The AI lists the files it changed.
You can chat in your own language, and the AI replies in the same language. Your chat stays in place when you close the editor and come back.
Edit sections and settings yourself
In Select mode, click any part of the page on the canvas. Shogun outlines it, shows its place in the page along the bottom of the canvas, and highlights it in the Structure tab. The Structure tab shows the settings of the section it belongs to, so you can change them directly. Changes show on the canvas straight away.
Select part of the page to see where it sits and what you can change.
If a setting can't do what you want, click the sparkle icon next to it to ask the AI instead.
Add, hide and manage sections
The Structure tab lists your page from the top: the theme's header, then each section in the template, then the footer.
Add a section: click Add section at the end of the template's sections. Search or pick from your theme's sections, including any custom ones. The new section appears on the canvas, ready to edit.
Add a block: expand a section and click Add block.
Hide or show a section: hover over it and click the eye icon. Hidden sections are greyed out in the list.
More options: hover over a section and click ⋮ to Duplicate, Rename or Delete it, or Open code to see its code.
If you need something that isn't in your theme, click Something missing? Let's generate it to ask the AI to build it.
Add section lists your theme’s sections, including Shogun sections saved earlier.
Hover a section to drag, hide, ask AI or open more options.
Click ⋮ to duplicate, rename or delete a section, or open its code.
Save or discard your changes
While you work, your changes go into a temporary copy of the template, so the preview stays up to date without touching your real template. An Unsaved changes label shows above the canvas until you save.
Save writes your changes to the variant's template in your theme. Shogun confirms which files it saved, and you can choose Keep editing or Back to test. The changed files belong to this variant's template only, so other pages aren't affected, and shoppers don't see the variant until you start the test.
Discard throws away everything since your last save and leaves the template as it was. It's the quickest way to undo changes you don't want to keep. Discarded changes can't be recovered.
If you try to leave the editor with unsaved changes, Shogun asks whether to save or discard them. Unsaved changes don't carry over to your next editing session, so save before you close the editor.
History
The History tab lists your changes by time, newest first, and stays in place between editing sessions. It shows two kinds of entry:
AI changes you haven't saved yet, with what changed and the files affected, for example "Collapsible content (shogun): Edited section code".
Saves, with the template that was saved.
Changes you make yourself in the Structure tab aren't listed until you save. The latest entry is marked Current.
To go back to an earlier AI change, click Restore on its entry. Shogun shows how many files will change and how many later edits will be overwritten. Click Restore again to confirm, or Cancel.
Each earlier AI change has a Restore button. The newest is marked Current.
Shogun tells you what restoring will change before you confirm.
Restoring adds a "Restored to" entry at the top of History, marked Current. The later changes stay in the list, so you can restore them again if you change your mind. Saves can't be restored. To undo everything since your last save, use Discard.
Restoring adds a new entry marked Current. Later changes can still be restored.
What changes in your theme
Saving always updates the variant's template file. What else changes depends on how you edited:
Adding your theme's own sections and changing their settings only updates the template file.
When the AI changes a section's code, Shogun makes a copy of that section and changes the copy, so your original section and other pages that use it aren't affected. The copy has "(shogun)" after its name, for example "Collapsible content (shogun)", and is saved to your theme's sections folder with a file name starting
shg-.
Because these Shogun sections are part of your theme, they also appear in the Add section list in Shopify's theme editor, so you can reuse them on other pages.
Removing Shogun sections
Deleting a section in the editor removes it from this variant's template. Any Shogun section files stay in your theme, so they're still available to reuse in Shopify's theme editor. If you don't need a Shogun section any more, you can delete its shg- file from your theme in Shopify's code editor. Check that no other template uses it first.
When the test ends
If the variant wins and you publish it, the Shogun sections it uses stay in your theme, because the page needs them. They're yours to keep, reuse or delete.
What you can't edit yet
Your header, footer and other parts of the theme shared across every page. These show as locked groups in the Structure tab.
Sections added by other apps. These show as "Added by an app — can't edit".
Theme-wide settings, such as colors and fonts.
Pages that use a Shopify Liquid template.
Theme Tests.