# Themes in Vue Storefront
This guide is based on
default theme before
1.12 version release. General idea and structure addressed here were created based on the pre-
Vue Storefront allows you to quickly develop your own themes and use our core business logic. All e-commerce features are implemented in core, so you can easily develop fully working online shop only by writing HTML and CSS and inheriting the business logic from the core. Of course, you can easily modify and extend the core logic in your theme.
You can read more about Vue Storefront core components and how to make use of them here
All themes are located in
src/themes folder and you can think about them as separate Vue.js applications that are using Vue Storefront core for out-of-the-box features.
# Switching themes
To use any of the themes located in
src/themes, just change the
theme property in your config file to
name property from package.json file sitting in your theme's root dir. Config files are located in the
config folder. You shouldn't make changes in
config/default.json. Instead just copy the
default.json file to the same folder, name it
local.json and make changes there.
# Creating your own themes
To create your own Vue Storefront theme, you can copy and modify the default theme which is fully-styled and ready to work out of the box (it's the one that you can find on our demo).
To do so:
- Copy the
defaultfolder located in
src/themesand change its name to your new theme's name.
- Change the
nameproperty in your theme's
- Insert this name in the
themeproperty of your config file in
yarn installso lerna can detect a new theme.
- Start developing your own theme for Vue Storefront!
Only official themes tested and accepted by the community should be in a
master branch. Please develop your own themes on separate branches and keep them updated with
master to be sure it works with the newest core.
# Important theme files
Each theme is a separate Vue.js application with its own dependencies, which can make use of the core or even modify it. Below you can find the list of files that are essential for your theme to work:
assets- theme-specific assets
components- theme-specific components
css- theme-specific css files
helpers- helper methods
layouts- layout files
mixins- theme-specific mixins (extends
index.js- here you can register your theme-specific mixins
pages- your shop pages
resource- theme-specific resources (extends
router- theme router
store- theme-specific stores (extends
ui-store.js- here you can extend core
index.js- here you can register theme-specific stores
App.vue- theme's entry component
index.js- theme initialization
package.json- theme-specific dependencies
index.jsyou can extend core service worker here (see Working with Service Workers
webpack.config.js- you can extend core webpack build in this file (extends
core/build/, see Working with webpack)
# Official Vue Storefront themes:
- Capybara (opens new window) - Capybara is a Storefront UI based theme for Vue Storefront.
- Default (opens new window) - Default VS theme always with the newest features. The easiest way to adopt VS in your shop is taking this one and modifying it to your needs (check gogetgold.com (opens new window) as an example)