Cloning a Theme in Venddor IO

Getting Started with Theme Creation

Embarking on the journey to craft a personalized theme for Venddor IO? Begin by leveraging the foundational design of the default Responsive theme.

Creating a custom theme by cloning an existing one saves development time and ensures compatibility with Venddor IO's core functionality.

Initiating the Theme Creation

Navigate to Design → Themes within your Venddor IO Administration panel.
Click on the gear icon located at the upper right and select Clone theme.
Ensure that the Responsive theme is active. If not, activate it before proceeding with cloning.

It's recommended to clone from the Responsive theme as it's designed to be fully compatible with all Venddor IO features and provides a solid foundation for customization.

Customizing Your Cloned Theme

A dialog box will prompt you to provide details for your new theme:

Directory: This will be the name for your theme's directory under design/themes. For smooth functioning, use lowercase letters and replace spaces with underscores. For instance, consider naming it custom_theme.
Name: This will be your theme's display name within the Administration panel. For our example, we can go with "Customized Theme".
Description: Jot down a brief description for your theme to distinguish it later.

After filling in the details, hit the Save button.

Example Configuration:

Directory: my_custom_theme
Name: "My Online Store Theme"
Description: "A customized responsive theme for our online electronics store"

Post-Cloning Actions

Successfully executing the above steps will produce a theme named "Customized Theme" inheriting attributes from its parent theme, Responsive. Correspondingly, a new folder, named after the directory you specified, will be generated under the design/themes directory.

This new theme is now a blank canvas, waiting for your custom touch. In our upcoming guide, we'll explore how to tailor the layout via the Administration panel and strategically position the blocks to align with your envisioned design.

Post-creation, your theme isn't set to active by default. To bring it to life, head to Design → Themes and activate your freshly baked theme.