Design Studio
A live visual editor for your store's fonts, colors, header, homepage sections, banners, page content, and footer.
The Design Studio is where you control how your storefront looks. You edit settings on the left, and a live preview of your real store on the right updates as you go.
The Design Studio is currently in beta. If something doesn't look or save the way you expect, please submit a support ticket so we can fix it.
Opening the Design Studio
In your admin sidebar, click Design Studio. It opens on the Site workspace.
Workspaces
The Studio is split into six workspaces. Switch between them with the tabs along the top.
| Workspace | What it controls | Preview shows |
|---|---|---|
| Site | Fonts, colors, spacing, header, logo, and button/card/form styles | Home page |
| Home | Hero Builder link, homepage sections (order, headings, visibility), featured products, custom sections, legacy carousel | Home page |
| Shop Pages | Banners for the Shop, Search, Cart, and Checkout pages | Shop page |
| About | About banner, About text, and team members | About page |
| Contact | Contact banner, where contact-form messages go, form text, and business details | Contact page |
| Footer | Footer text, layout, colors, and social links | Home page |
The large homepage hero is designed separately in the Hero Builder. Open it from the Hero Builder button in the Studio toolbar or from the Home workspace.
Live preview
- Use the desktop, tablet, and phone buttons in the toolbar to resize the preview.
- Most text and style changes appear in the preview straight away. Some changes, such as which featured products are shown, only appear after you save, because the preview reloads after each save.
- Visits from the preview are not counted in your Analytics.
Saving
Each workspace has its own Save button at the top of the settings panel (for example Save Home). The status next to it shows Saved or that you have unsaved changes.
- Saving publishes the changes to your live store immediately. There is no separate draft or publish step.
- Save before you switch tabs. If you try to leave a workspace with unsaved changes, the Studio asks whether to Save and continue or discard them.
Image uploads at a glance
| Image | Where | Max file size | File types |
|---|---|---|---|
| Store logo | Site | 5 MB | JPG, JPEG, PNG, BMP, SVG, WebP |
| Page banners | Shop Pages, About, Contact | 5 MB | JPG, JPEG, PNG, BMP, SVG, WebP |
| Legacy carousel images | Home | 5 MB | JPG, JPEG, PNG, BMP, SVG, WebP |
| Custom section images | Home | 5 MB | JPG, JPEG, PNG, BMP, SVG, WebP |
| Team photos | About | 5 MB | JPG, JPEG, PNG, BMP, SVG, WebP |
| Hero Builder images | Hero Builder | 5 MB | JPG, PNG, WebP |
You upload one image at a time. Files are checked to make sure they really are images, so a renamed file of another type will be rejected.