Skip to content
Last update: December 23, 2024

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:

Upload new theme

To upload a theme ZIP file:

  1. Click Content in the main menu.
  2. Select the store from the list in the next blade.
  3. Click on the Themes widget.
  4. In the Themes list blade, click Upload in the toolbar.
  5. Drag and drop or browse the ZIP file.

Upload new theme

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:

ZIP themes

Activate theme

To activate the theme:

  1. Click Content in the main menu.
  2. Select the store from the list in the next blade.
  3. Click on the Themes widget.
  4. In the Themes list blade, click the three dots to the left of the desired theme and click Set active.

activate theme

The theme is now active.

Manage theme assets

To manage the theme assets:

  1. In the Themes list, select the desired store.
  2. Click the three dots to the left of the folder to copy its link or delete it.
  3. Click the three dots to the left of the file to copy its link, download, or delete it.

assets

Add new theme

To add a new theme:

  1. Click Content in the main menu.
  2. In the nest blade, select the store from the list.
  3. Click on the Themes widget.
  4. In the Themes list blade, click Add in the toolbar.
  5. Enter the name of the new theme.
  6. Click Create to create your new theme.

add 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:

purple-pink

Black

Watermelon

Alternatively, you can create your own color scheme using ChatGPT and add it to the themes presets as follows:

  1. Click Content in the main menu.
  2. Select the store from the list in the next blade.
  3. Click on the Themes widget.
  4. In the next blade, select the desired theme.
  5. In the next blade, click configpresets.
  6. 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:

  1. 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):
  2. Go to Stores → Your store → White labeling.
  3. In the White labeling blade, click Pencil next to the Theme preset name.
  4. In the next blade, click Add in the toolbar.
  5. Paste the filename to the new field and click Floppy to save the changes.
  6. Click Save in the toolbar.
  7. In the previous blade, select the newly added theme from the dropdown list.
  8. Click Save in the toolbar.

Your new color scheme has been applied.

Create theme colors using ChatGPT

  1. Copy any existing color scheme.
  2. Paste it into ChatGPT with the following prompt: "Generate colors for an electronic shop. Answer in JSON format."
  3. 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.