Skip to main content

Editor - Widget Editing

Widgets are dynamic content blocks that can be added and configured visually in the O2VEND Theme Editor. This guide covers widget editing.

Widget Overview​

Widgets provide:

  • Dynamic content management
  • Visual configuration
  • No code editing required
  • Flexible page layouts

Adding Widgets​

From Settings Panel​

  1. Open Settings panel
  2. Navigate to page section
  3. Click "Add Widget"
  4. Select widget type
  5. Configure settings
  6. Widget appears in preview

From Preview​

  1. Click "Add Widget" button in preview
  2. Select section (hero, content, footer)
  3. Choose widget type
  4. Configure settings
  5. Save

Widget Types​

Available widget types include:

  • Product Widgets: Product displays, carousels
  • Category Widgets: Category lists, carousels
  • Brand Widgets: Brand displays
  • Content Widgets: Carousels, galleries, HTML
  • Navigation Widgets: Headers, footers, menus
  • Special Widgets: Discount timers, recently viewed

See Widgets documentation for complete list.

Editing Widgets​

Select Widget​

  1. Click widget in preview
  2. Widget highlighted
  3. Settings panel opens
  4. Edit configuration

Widget Settings​

Each widget has specific settings:

Product Widget:

  • Title
  • Product selection
  • Display style (grid, list, carousel)
  • Number of products
  • Show price, title, description

Carousel Widget:

  • Images/content
  • Autoplay
  • Navigation arrows
  • Dots indicator
  • Speed

HTML Widget:

  • HTML content
  • CSS styling

Live Preview​

  • Changes reflect immediately
  • Preview updates automatically
  • Test different configurations

Widget Configuration​

Basic Settings​

All widgets have:

  • Title: Widget title (optional)
  • Section: Where widget appears
  • Position: Order in section

Widget-Specific Settings​

Configure based on widget type:

{
  "type": "ProductWidget",
  "settings": {
    "title": "Featured Products",
    "products": ["prod-1", "prod-2"],
    "display_style": "grid",
    "columns": 3,
    "show_price": true,
    "show_title": true
  }
}

Widget Positioning​

Reorder Widgets​

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

Widget Sections​

Widgets organized by section:

  • Hero: Top banner area
  • Content: Main content
  • Footer: Footer area
  • Sidebar: Sidebar content

Widget Forms​

Visual Forms​

Widgets use visual forms for configuration:

  • Text inputs
  • Dropdowns
  • Checkboxes
  • Image pickers
  • Color pickers

Form Validation​

  • Required fields validated
  • Format validation
  • Error messages shown
  • Cannot save invalid data

Widget Templates​

Widget templates are located in the widgets/ directory of your theme. Each widget type has its own template file that defines how the widget is rendered.

Widget Rendering​

Widgets rendered automatically:

{% for widget in widgets.hero %}
  {% render 'widget', widget: widget %}
{% endfor %}

Widget Management​

Duplicate Widget​

  1. Right-click widget
  2. Select "Duplicate"
  3. Copy created
  4. Edit as needed

Delete Widget​

  1. Select widget
  2. Click "Delete" button
  3. Confirm deletion
  4. Widget removed

Widget Visibility​

Control widget visibility:

  • Show on specific pages
  • Hide on mobile/desktop
  • Conditional display

Widget Best Practices​

1. Use Appropriate Widgets​

Choose widgets that fit your needs:

  • Product widgets for products
  • Carousel for images
  • HTML for custom content

2. Limit Widget Count​

Don't overload sections:

  • 3-5 widgets per section
  • Balance content
  • Maintain performance

3. Consistent Styling​

Use consistent styling:

  • Match theme colors
  • Consistent spacing
  • Unified design

4. Mobile Responsive​

Ensure widgets work on mobile:

  • Test all viewports
  • Responsive images
  • Touch-friendly controls

Widget Examples​

  1. Add Product Widget
  2. Select "Featured" collection
  3. Set display to grid
  4. 4 columns
  5. Show price and title
  1. Add Carousel Widget
  2. Upload images
  3. Add text overlays
  4. Enable autoplay
  5. Set navigation

Category Showcase​

  1. Add Category List Widget
  2. Select categories
  3. Set to carousel
  4. Show images
  5. Link to categories

Widget Troubleshooting​

Widget Not Displaying​

  • Check widget is in correct section
  • Verify template includes widgets
  • Check widget settings
  • Review console for errors

Widget Not Saving​

  • Check form validation
  • Verify required fields
  • Check network connection
  • Review error messages

Next Steps​