Skip to main content

Using the Theme Editor

This tutorial guides you through using the O2VEND Theme Editor to customize your theme.

Getting Started​

Access the Editor​

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

Editor Interface​

  • Toolbar: Theme/page selection, viewport controls
  • File Explorer: Browse theme files
  • Editor Panel: Edit files
  • Preview Panel: See changes live
  • Settings Panel: Configure theme

Basic Workflow​

Step 1: Select Theme​

  1. Use theme selector in toolbar
  2. Choose theme to edit
  3. Theme loads in editor

Step 2: Choose Page​

  1. Use page selector
  2. Select page to preview
  3. Preview updates

Step 3: Edit Files​

  1. Click file in explorer
  2. File opens in editor
  3. Make changes
  4. Preview updates automatically

Step 4: Save Changes​

  1. Click "Save" button
  2. Changes saved
  3. Ready to publish

Editing a Template​

Example: Customize Homepage​

  1. Open Template

    • Navigate to templates/index.liquid
    • Click to open

  2. Make Changes

    <section class="hero">
      <h1>Welcome to {{ shop.name }}</h1>
      <p>Your custom message here</p>
    </section>

  3. Preview

    • See changes in preview panel
    • Test on different viewports

  4. Save

    • Click Save
    • Changes saved

Adding Widgets​

Step 1: Add Widget​

  1. Click "Add Widget" button
  2. Select section (hero, content, footer)
  3. Choose widget type
  4. Widget added

Step 2: Configure Widget​

  1. Click widget in preview
  2. Settings panel opens
  3. Configure settings:
    • Title
    • Content
    • Display options
  4. Preview updates

Step 3: Position Widget​

  1. Drag widget
  2. Drop in new position
  3. Order updated
  4. Save changes

Configuring Theme Settings​

Step 1: Open Settings​

  1. Click Settings panel
  2. Browse sections
  3. Find setting

Step 2: Modify Setting​

  1. Change value
  2. Preview updates
  3. See changes immediately

Step 3: Save Settings​

  1. Settings auto-saved
  2. Or click Save
  3. Changes applied

Preview System​

Viewport Testing​

  1. Select viewport (Desktop/Tablet/Mobile)
  2. Preview updates
  3. Test responsive design
  4. Verify functionality

Page Testing​

  1. Select different pages
  2. Test each page type
  3. Verify all functionality
  4. Check design consistency

Publishing Your Theme​

Step 1: Review Changes​

  1. Check all modifications
  2. Test in preview
  3. Verify functionality
  4. Test responsive

Step 2: Publish​

  1. Click "Publish" button
  2. Confirm publishing
  3. Theme uploaded
  4. Version created

Step 3: Activate​

  1. Click "Activate" button
  2. Theme becomes live
  3. Changes visible on storefront

Common Tasks​

Change Colors​

  1. Open Settings
  2. Navigate to Colors
  3. Change color values
  4. Preview updates
  1. Open Settings
  2. Find Logo setting
  3. Upload new image
  4. Logo updated

Add Custom CSS​

  1. Open assets/theme.css
  2. Add custom styles
  3. Preview updates
  4. Save file

Modify Header​

  1. Open sections/header.liquid
  2. Edit header code
  3. Preview changes
  4. Save

Tips and Tricks​

Keyboard Shortcuts​

  • Ctrl+S / Cmd+S: Save
  • Ctrl+F / Cmd+F: Find
  • Ctrl+Z / Cmd+Z: Undo
  • Use search in file explorer
  • Find files quickly
  • Navigate easily

Version History​

  • View file versions
  • Restore previous versions
  • Compare changes

Troubleshooting​

Changes Not Showing​

  • Refresh preview
  • Check file saved
  • Verify correct file
  • Clear cache

Editor Not Loading​

  • Check browser console
  • Verify permissions
  • Refresh page
  • Contact support

Next Steps​