Whenever you are building theme for your client or yourself this guide will provide instructions on how to create a theme.
There are several ways how the theme can be developed. You can start of with one of the sample themes provided with a product or download one from our appstore or get on from Shopify themesВ as these themes are fully supported. In this documentation, we will consider a default theme for VirtoCommerce storefront.
CMS Content storage structure
- Install prerequisites.
- Clone repo.
- In Visual Studio, go to Team Explorer в†’ Clone в†’ Enter https://github.com/VirtoCommerce/vc-default-theme.git as URL and 'C:\vc-default-theme' (for example) as path.
- Or execute command
(where 'C:\vc-default-theme' is path to folder where you want to clone repo).
git clone https://github.com/VirtoCommerce/vc-default-theme.git "C:\vc-default-theme"
- Link you theme repo to store. Execute:
(where C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content is path to CMS content storage configured at platform & storefront deployment steps, 'Electronics' is your store name and 'C:\vc-default-theme' is path to your theme repo).
mklink /d "C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content\Themes\Electronics\default" "C:\vc-default-theme"
- Open theme folder in your IDE
- In Visual Studio (including 2017) go to File в†’ Open в†’ Website
- In Visual Studio Code, go to File в†’ Open в†’ Folder
- Select C:\vc-default-theme (where C:\vc-default-theme is path to folder where you want to clone repo) and open it.
- Install Node.js dependencies.
- In Visual Studio all dependencies will be installed automatically. Just wait a few minutes.
- In Visual Studio Code and other editors, you need to run
to install Node.js dependencies.
You need to have local installation of storefront. Follow this article step-by-step to install storefront from binaries or source code.
Visual Studio 2015.3 and above (up to Visual Studio 2017.3 at least)
If you have Visual Studio 2015 with Update 3 and above, you don't need install any prerequisites. Latest versions of Node.js and Gulp already included in your Visual Studio installation and supported in built-in Task Runner Explorer.
Visual Studio from 2015 up to 2015.2
Task Runner Explorer, Node.js and Gulp already included in your Visual Studio installation. However, you need update your Node.js to at least 4.0.0. 1. Update Node.js to v4.0.0 at least (we recommend latest LTS version). Use C:\Program Files\nodejs installation path (change Program Files to Program Files (x86) on 64-bit machine). 2. Add Node.js installation path to External Web Tools or move $(PATH) to top:
Visual Studio from 2013.3 up to 2013.5
npm install gulp -g
Visual Studio Code and other editors
- Install Node.js v4.0.0 or above (we recommend latest LTS version)
npm install gulp -g
Liquid is the templating engine that powers Virto Commerce templates. Go to Liquid documentation.