How to use the editor
Navigate the Clyro editor: chat, preview, code, and settings.
The editor has four main areas: the chat, the preview, the code tab, and the sidebar settings. Here is what each one does.
The chat
This is where you talk to the AI. Type what you want and hit Enter. The AI reads your theme files, makes the changes, and shows them in the preview. You can see exactly what files it is editing in real time.
The preview
A live preview of your theme. It updates automatically as the AI makes changes. You can:
- Switch between pages (Home, Product, Collection, Cart, etc.)
- Toggle device view (desktop, tablet, phone)
- Use inspect mode to click on elements and see which section they belong to
The code tab
Shows all your theme files in a tree view with a code editor. Available on paid plans.
- Browse all Liquid, JSON, CSS, and JS files
- Edit files directly in the Monaco editor
- Save with
Ctrl+S/Cmd+S - The editor is read-only while the AI is working to avoid conflicts
The sidebar
The right sidebar shows the settings for each section on the current page. You can:
- Drag sections to reorder them
- Open a section to edit its settings (colors, text, images)
- Add or remove blocks within a section
- Add new sections from the available templates
Changes you make in the sidebar update the preview instantly. No need to save.
The changes tab
Shows a diff of everything the AI changed compared to the original theme. Useful to review what happened before downloading. Available on paid plans.
The export button
Top right corner. Click it, optionally rename the file, accept the Terms of Service, and hit Export. You get a .zip file ready to upload to Shopify. The system validates your theme before packaging it. If there are errors, it will send them to the chat so the AI can fix them.