Venddor IO's Template Editor Guide

Introduction

For an optimal experience with Venddor IO's Template Editor, ensure that JavaScript is enabled in your browser.

Venddor IO's Template Editor offers a seamless way to modify the source code of theme files directly from the admin interface. This editor works with files housed in the .../design/themes/ directory of your Venddor IO installation.

Before diving into file modifications, it's imperative to acquaint yourself with the fundamental guidelines for making alterations to Venddor IO.

Steps to Edit Files

Navigate to Design → Templates in the admin panel.
Utilize the left panel to navigate to the desired directory and select the file you wish to modify. This panel mirrors the content of the .../design/themes/ directory.
Once you've made the desired changes in the code, click on 'Save changes'.

Venddor IO's Template Editor Interface

On-the-Go Template Modifications

Venddor IO's Template Editor also boasts an on-site editing feature, empowering you to make changes to templates directly from the storefront. Here's how you can use this feature:

Head over to Design → Templates in the admin panel.
Click on the gear icon located at the top right corner.
Select 'On-site template editing'.

This will redirect you to the storefront. Here, various elements will showcase 'Edit' icons adjacent to them. Click on the icon corresponding to the element you're interested in editing and select the template.

A dedicated pop-up window will emerge, where you can delve into the template code modifications. After making the necessary changes, click 'Save'. For the changes to be visible, you might need to clear the cache.

For instant visibility of your edits post-modification, navigate to Design → Themes and toggle the 'Rebuild cache automatically' option to 'On'. While this offers real-time updates, it may affect the platform's performance. Hence, it's advisable to use this only in a developmental environment.

Advanced Features

The Template Editor provides several advanced features that can enhance your workflow:

Syntax Highlighting: Different parts of your code (HTML, CSS, JavaScript) are highlighted in different colors for better readability
Line Numbers: Each line is numbered, making it easier to identify and reference specific parts of your code
Search and Replace: Quickly find and replace text throughout your template files
Code Folding: Collapse sections of code to focus on specific areas

With Venddor IO's intuitive Template Editor, managing and customizing your platform's aesthetic has never been more straightforward.