Understanding Live Preview Mode in the OS 3.0 Theme Editor (Limited Access)
Live preview mode is a preview option in the OS 3.0 theme editor that shows your changes faster while you design your store. When it's on, the preview updates quickly as you edit text, colors, spacing, and other settings, so you don't have to wait for each change to finish rendering. This article explains how live preview mode differs from default mode, how to turn it on and switch between modes, and which settings support live preview.
| Note: This feature is currently in Beta and is available to selected merchants only. If you don't see this option in the theme editor, contact your SHOPLINE account manager to request access. |
Live Preview Mode vs. Default Mode
By default, the theme editor previews your changes in Default mode. In this mode, the preview updates only after the system finishes rendering each change.
Live preview mode is a faster way to preview. When it's on, the preview shows your changes more quickly when you edit common settings such as text, colors, font size, and spacing.
Live preview mode works best when you need to adjust content and styles repeatedly while designing your store, for example:
- Editing headings, body text, and button text
- Adjusting colors, background colors, and color schemes
- Adjusting styles such as spacing, alignment, and font size
- Quickly checking how the page looks after you change a setting
The main differences between the two modes are:
| Comparison | Default mode | Live preview mode |
| Preview | Updates after the system finishes rendering | Updates faster when you change supported settings |
| Best for | Everyday store design | Repeatedly adjusting text, colors, styles, and other settings |
| Supported scope | Supports all theme editor features | Mainly supports settings that don't need to load store data |
| How to turn on | Used automatically when you open the editor | Switch on manually; you can switch back to Default mode at any time |
Turning On Live Preview Mode
To turn on live preview mode:
- From your SHOPLINE admin, go to Online Store > Design to open the theme editor.
- In the theme editor, click the preview mode icon (an eye inside a window) in the top toolbar to switch from Default mode to Live preview mode.
- The page refreshes and starts loading automatically. Once loading is complete, you can continue editing your theme.
After it's turned on, the preview updates faster when you edit settings that support live preview.
Settings Supported by Live Preview Mode
Live preview mode mainly supports common settings such as text, colors, and styles. Settings that need to load store data, such as images, products, and menus, don't support live preview yet.
Settings That Support Live Preview
The following settings are commonly used to adjust page content and styles. They include, but are not limited to:
- Text: Single-line text, multi-line text, rich text
- Color: Color picker, gradient color picker, color scheme
- Font and layout: Font picker, padding, text alignment, horizontal alignment, vertical alignment
- General options: Slider, dropdown menu, switch
- Other: Payment icons, group headers
Settings That Don't Support Live Preview Yet
The following settings need to load images, products, or other resources from your store, so they don't support live preview yet. They include, but are not limited to:
- Images and videos: Image picker, video picker, external video link
- Products: Product picker, product list picker, collection picker
- Blogs and pages: Blog post picker, blog collection picker, custom page picker
- Navigation and links: Menu picker, link (URL) field
- Code: Sline code field, HTML code field
- Website icon: Website icon (favicon) upload
| Note: When you edit the settings above, the preview still refreshes the same way it does in Default mode. |
FAQs About Live Preview Mode
Q1: Why can't I see the option to switch to live preview mode?
Live preview mode currently supports OS 3.0 themes only. If you don't see the option, upgrade your store theme to an OS 3.0 theme first.
Q2: Why does the page refresh after I turn on live preview mode?
When you switch rendering modes, the system needs to reload the editor for that mode, so the page refreshes. You can continue editing after it reloads.
Q3: Why don't some settings update in real time after I change them?
Live preview mode mainly supports settings such as text, colors, and styles. Settings such as images, products, collections, menus, and videos need to load store data, so they don't support live preview yet.
Q4: What does it mean when I'm asked to save before switching modes?
If the current page has unsaved changes, the system won't let you switch modes until you save, so your changes aren't lost. Save your changes first, then switch modes.
Q5: Which rendering mode will the theme editor use the next time I open it?
If you haven't cleared your browser cache, the editor uses the mode you were in when you last exited. If you've cleared your cache, it goes back to Default mode.