Themes¶
The Virto Commerce Theme is a frontend application for your ecommerce websites. The default Theme is included in the VC Content module and is provided out of the box. The default theme consists of the following folders with files that define the Frontend Application UI:
Folder | Content |
---|---|
assets | Scripts, styles and other assets compiled and minified for production. |
config | The Virto theme settings. It contains: menu.json with the theme menu settings. routes.json (autogenerated) with SPA routes for Storefront application. settings_data.json with theme configurations. You can enable/ disable quotes and product comparison, set limits for the lists, set statuses for quotes and orders, and much more. The presets folder is used to store predefined configurations for the theme. These presets can be quickly applied to the theme to achieve a specific look without having to manually configure all settings. The schemas folder contains JSON schema files that define the structure and possible values for the settings used in the theme. These schemas serve as templates that describe what settings are available, what types of values they can accept, and any validation rules. |
layouts | Layout templates used to render the theme within the Storefront. |
locales | Locale files used to provide translated content for the theme. |
snippets | Liquid snippets, included in Liquid templates. |
templates | Liquid templates, used in SSR and MPA. Each MPA page must have a liquid template here if you want SSR. |
The theme structure should be predefined in advance and is created by a developer.
The Virto Commerce Content module allows you to:
- Add as many themes as needed.
- Set an active theme to be displayed in the Frontend Application.
Managing theme includes:
- Uploading new theme.
- Activating theme.
- Managing theme assets.
- Adding new theme.
- Managing theme color configurations.
Upload new theme¶
To upload a theme ZIP file:
- Click Content in the main menu.
- Select the store from the list in the next blade.
- Click on the Themes widget.
- In the Themes list blade, click Upload in the toolbar.
- Drag and drop or browse the ZIP file.
Once the zip file has been uploaded, it will be unzipped and added to the Themes list.
If a new theme has been created by the developer, it can be uploaded to a new environment using a ZIP file.
You can use the themes designed by Virto Commerce. Each Frontend Application release contains a ZIP file with themes:
Activate theme¶
To activate the theme:
- Click Content in the main menu.
- Select the store from the list in the next blade.
- Click on the Themes widget.
- In the Themes list blade, click the three dots to the left of the desired theme and click Set active.
The theme is now active.
Manage theme assets¶
To manage the theme assets:
- In the Themes list, select the desired store.
- Click the three dots to the left of the folder to copy its link or delete it.
- Click the three dots to the left of the file to copy its link, download, or delete it.
Add new theme¶
To add a new theme:
- Click Content in the main menu.
- In the nest blade, select the store from the list.
- Click on the Themes widget.
- In the Themes list blade, click Add in the toolbar.
- Enter the name of the new theme.
- Click Create to create your new theme.
The new theme appears in the themes list. Now it needs to filled in.
Manage theme colors¶
Users can personalize their store by applying a custom theme or choosing from the ready-to-use color schemes designed by Virto Commerce. Each release includes a set of default color presets, with new ones added several times a year. To access the latest default color presets, users can simply download the updated theme. Currently, the following out-of-the-box color schemes can be applied to your store:
Alternatively, you can create your own color scheme using ChatGPT and add it to the themes presets as follows:
- Click Content in the main menu.
- Select the store from the list in the next blade.
- Click on the Themes widget.
- In the next blade, select the desired theme.
- In the next blade, click config → presets.
- Click Add in the toolbar to enter or copy&paste your new color configuration file. Or click Upload to upload color configuration file.
New color scheme has been added to the presets.
To apply a new color scheme to your store:
- Select one of the out-of-the-box color schemes or your custom scheme and copy its name without extension to the clipboard (for example, watermelon):
- Go to Stores → Your store → White labeling.
- In the White labeling blade, click
next to the Theme preset name.
- In the next blade, click Add in the toolbar.
- Paste the filename to the new field and click
to save the changes.
- Click Save in the toolbar.
- In the previous blade, select the newly added theme from the dropdown list.
- Click Save in the toolbar.
Your new color scheme has been applied.
Create theme colors using ChatGPT¶
- Copy any existing color scheme.
- Paste it into ChatGPT with the following prompt: "Generate colors for an electronic shop. Answer in JSON format."
- Copy the generated color scheme and paste it into the presets folder as described above.
Your ChatGPT-generated colors have been added to the presets.