Skip to main content

Editor - Getting Started

The O2VEND Theme Editor is a powerful visual editor for customizing themes. This guide will help you get started.

What is the Editor?​

The O2VEND Theme Editor allows you to:

  • Edit theme files directly in the browser
  • Configure theme settings visually
  • Edit widgets and sections
  • Preview changes in real-time
  • Publish themes to your store

Accessing the Editor​

The editor is accessible at:

https://your-store.o2vend.com/editor

Or via the O2VEND Back Office:

  1. Log in to your O2VEND account
  2. Navigate to Themes
  3. Click "Edit Theme"

Editor Interface​

The editor consists of several key areas:

1. Toolbar​

  • Theme Selector: Switch between themes
  • Page Selector: Choose which page to preview
  • Viewport Controls: Desktop, Tablet, Mobile views
  • Save Button: Save changes
  • Publish Button: Publish theme to live

2. File Explorer​

  • Browse all theme files
  • Edit Liquid templates
  • Manage assets (CSS, JS, images)
  • View file structure

3. Preview Panel​

  • Live preview of your store
  • Responsive viewport controls
  • Real-time updates

4. Settings Panel​

  • Theme configuration
  • Widget settings
  • Section settings

First Steps​

1. Select a Theme​

Use the theme selector in the toolbar to choose which theme to edit:

// Themes are loaded from:
// - Local themes: /themes/{theme-name}/
// - Tenant repository: themes/{theme-name}/

2. Choose a Page​

Select which page to preview:

  • Home (index)
  • Product
  • Collection
  • Cart
  • Checkout
  • Custom pages

3. Edit Files​

Click on any file in the file explorer to edit:

  • Liquid templates (.liquid)
  • CSS files (.css)
  • JavaScript files (.js)
  • Configuration files (.json)

4. Preview Changes​

Changes are reflected immediately in the preview panel.

5. Save Changes​

Click "Save" to save your changes. Changes are saved to the tenant repository.

Editor Modes​

Edit Mode​

  • Full editing capabilities
  • File management
  • Widget editing
  • Settings configuration

Preview Mode​

  • View-only mode
  • Test user experience
  • Check responsive design

File Management​

Browsing Files​

The file explorer shows the complete theme structure:

theme-name/
  layout/
    theme.liquid
  templates/
    index.liquid
    product.liquid
  sections/
    header.liquid
  snippets/
    product-card.liquid
  assets/
    theme.css
    theme.js
  config/
    settings_schema.json

Editing Files​

  1. Click a file to open it in the editor
  2. Make your changes
  3. Changes are auto-saved (or click Save)
  4. Preview updates automatically

Creating Files​

  1. Right-click in file explorer
  2. Select "New File"
  3. Enter filename
  4. Start editing

Deleting Files​

  1. Right-click on file
  2. Select "Delete"
  3. Confirm deletion

Widget Editing​

Adding Widgets​

  1. Click "Add Widget" button
  2. Select widget type
  3. Configure widget settings
  4. Widget appears in preview

Editing Widgets​

  1. Click on widget in preview
  2. Edit settings in settings panel
  3. Changes reflect immediately

Removing Widgets​

  1. Click on widget
  2. Click "Delete" button
  3. Confirm deletion

Theme Configuration​

Settings Schema​

Theme settings are defined in config/settings_schema.json:

{
  "sections": [
    {
      "name": "Colors",
      "settings": [
        {
          "type": "color",
          "id": "primary_color",
          "label": "Primary Color",
          "default": "#000000"
        }
      ]
    }
  ]
}

Editing Settings​

  1. Open Settings panel
  2. Navigate to setting category
  3. Modify values
  4. Preview updates automatically

Preview System​

Viewport Controls​

Switch between viewport sizes:

  • Desktop: 1920px width
  • Tablet: 768px width
  • Mobile: 375px width

Page Selection​

Preview different pages:

  • Home page
  • Product pages
  • Collection pages
  • Cart
  • Checkout
  • Custom pages

Refresh Preview​

Click the refresh button to reload the preview with latest changes.

Publishing​

Publishing to Tenant Repository​

  1. Make all desired changes
  2. Click "Publish" button
  3. Confirm publication
  4. Theme is uploaded to tenant repository

Activating Theme​

  1. After publishing, click "Activate"
  2. Theme becomes live
  3. Previous theme is backed up

Version Management​

  • Each publish creates a version
  • Previous versions can be restored
  • Version history is maintained

Best Practices​

  1. Test Before Publishing: Always preview changes before publishing
  2. Use Version Control: Publish frequently to create versions
  3. Backup First: Backup current theme before major changes
  4. Test Responsive: Check all viewport sizes
  5. Validate Code: Ensure Liquid syntax is correct
  6. Test Functionality: Verify all features work

Troubleshooting​

Editor Not Loading​

  • Check browser console for errors
  • Verify you have edit permissions
  • Ensure tenant repository is accessible

Changes Not Saving​

  • Check tenant repository access
  • Verify network connection
  • Check browser console for errors

Preview Not Updating​

  • Refresh the preview
  • Check for JavaScript errors
  • Verify file syntax

Next Steps​