Custom Theme Tutorial in Venddor IO

Introduction to Custom Themes

In this guide, we'll walk you through a step-by-step process on crafting a fresh theme for Venddor IO. Our tutorial leverages the design insights from the "Free E-commerce PSD Template." Let's delve right in!

Prerequisites

Before starting the theme development process, ensure you have the following:

A working installation of Venddor IO
Basic knowledge of HTML, CSS, and Smarty templates
Familiarity with LESS CSS preprocessor (optional but helpful)
Code editor of your choice
FTP client or direct server access for file uploads

Theme Development Process

Creating a custom theme for Venddor IO involves several key steps:

Setting up the theme directory structure
Configuring the theme settings
Customizing the layout templates
Styling with CSS/LESS
Testing and refinement

It's recommended to start by cloning an existing theme like the responsive theme, rather than creating one from scratch. This gives you a solid foundation to build upon.

Theme Structure Overview

A Venddor IO theme typically consists of the following directories and files:

design/themes/YOUR_THEME_NAME/
  ├── css/                   # CSS and LESS files
  ├── media/                 # Theme images and media files
  ├── styles/                # LESS variables and Theme Editor settings
  ├── templates/             # Smarty template files
  ├── layouts/               # Layout templates
  └── manifest.json          # Theme configuration file

Each of these components plays a critical role in defining how your theme looks and functions.

Example: Customizing the Header

To customize the header of your theme, locate the header template file at:

design/themes/YOUR_THEME_NAME/templates/common/header.tpl

Make your desired modifications to the HTML structure, then customize the styling in:

design/themes/YOUR_THEME_NAME/css/tygh/header.less

Theme Editor Integration

To make your theme customizable through the Theme Editor, you'll need to define style variables in:

design/themes/YOUR_THEME_NAME/styles/data/

These variables will be exposed in the Theme Editor interface, allowing store owners to customize the look of their store without editing code directly.

Testing Your Theme

Once you've created your theme, thoroughly test it across different devices and browsers to ensure compatibility. Pay special attention to:

Responsive behavior across different screen sizes
Product listing and detail pages
Checkout process
Mobile navigation
Loading times and performance