Skip to main content

Editor - Preview System

The preview system allows you to see your changes in real-time across different devices and pages. This guide covers the preview functionality.

Preview Overview​

The preview panel shows:

  • Live preview of your store
  • Real-time updates
  • Multiple viewport sizes
  • Different page types

Viewport Controls​

Desktop View​

  • Width: 1920px (default)
  • Full desktop experience
  • Test desktop layouts
  • Verify desktop functionality

Tablet View​

  • Width: 768px
  • Tablet experience
  • Test responsive design
  • Verify touch interactions

Mobile View​

  • Width: 375px (iPhone)
  • Mobile experience
  • Test mobile layouts
  • Verify mobile functionality

Switching Viewports​

  1. Use viewport selector in toolbar
  2. Select Desktop, Tablet, or Mobile
  3. Preview updates instantly
  4. Test interactions

Page Selection​

Available Pages​

Preview different page types:

  • Home - Homepage (index)
  • Product - Product detail page
  • Collection - Category/collection page
  • Cart - Shopping cart
  • Checkout - Checkout page
  • Search - Search results
  • Custom Pages - Custom content pages

Switching Pages​

  1. Use page selector in toolbar
  2. Select page type
  3. Preview updates
  4. Test page functionality

Live Updates​

Real-Time Preview​

  • Changes reflect immediately
  • No refresh needed
  • Instant feedback
  • See results instantly

Auto-Refresh​

  • Preview refreshes automatically
  • On file save
  • On widget changes
  • On settings update

Manual Refresh​

  1. Click refresh button
  2. Preview reloads
  3. Latest changes shown
  4. Cache cleared

Preview Features​

Interactive Preview​

  • Click links
  • Test forms
  • Interact with widgets
  • Test functionality

Scroll Preview​

  • Scroll to see full page
  • Test scroll behavior
  • Verify sticky elements
  • Check scroll performance

Zoom Controls​

  • Zoom in/out
  • Focus on details
  • Check alignment
  • Verify spacing

Preview Settings​

Preview Options​

  • Auto-refresh: Enable/disable auto-refresh
  • Show grid: Display layout grid
  • Show outlines: Show element outlines
  • Performance mode: Optimize for performance

Preview Quality​

  • High quality: Full quality preview
  • Performance: Optimized preview
  • Low bandwidth: Reduced quality

Testing in Preview​

Functionality Testing​

Test all functionality:

  • Navigation
  • Forms
  • Add to cart
  • Search
  • Filters

Design Testing​

Verify design:

  • Colors
  • Typography
  • Spacing
  • Alignment
  • Responsive design

Performance Testing​

Check performance:

  • Load time
  • Scroll performance
  • Animation smoothness
  • Image loading

Preview Limitations​

Not a Real Store​

Preview is for testing:

  • Not actual storefront
  • Limited functionality
  • Test data only
  • No real transactions

Browser Differences​

Test in actual browsers:

  • Preview may differ
  • Test in real browsers
  • Verify compatibility
  • Check all browsers

Preview Best Practices​

1. Test All Viewports​

Always test:

  • Desktop
  • Tablet
  • Mobile
  • Different screen sizes

2. Test All Pages​

Verify all page types:

  • Homepage
  • Product pages
  • Collection pages
  • Cart and checkout

3. Test Interactions​

Test user interactions:

  • Click links
  • Submit forms
  • Add to cart
  • Use search

4. Check Performance​

Monitor performance:

  • Load times
  • Scroll smoothness
  • Animation performance
  • Image loading

Preview Troubleshooting​

Preview Not Loading​

  • Check browser console
  • Verify theme access
  • Refresh preview
  • Check network connection

Preview Not Updating​

  • Refresh manually
  • Check for errors
  • Verify file saves
  • Clear browser cache

Preview Looks Different​

  • Check viewport size
  • Verify page selection
  • Test in real browser
  • Check browser differences

Next Steps​