Creating a new theme

By default, Hiweb offers Vue SDK for theme development. This kit includes: pre-defined routes, mixins, helper functions, API functions, cart...

You can choose between using Hiweb Theme SDK or writing your own, or extending our SDK... it's flexible and depends on you.

Ok let's start!

Firstly, let's create a new Vue project using Vue-CLI (https://cli.vuejs.org/guide/installation.html)

VueX is required, so please select VueX while installing

vue create my-first-theme

After your vue project is created, let's install Hiweb Base plugin for Vue.

cd my-first-theme
npm i hiweb-vue-base-storefront

Create a new file options.json in your project root, this file is about to set options for your theme and let users optimize their website. You'll learn more about this later. Your options.json file must now be like this:

{
    "components": {
    },
    
    "pages": {
    }
}

Now open src/main.js and install Hiweb plugin

// main.js
import options from '../options.json'
import hiweb from 'hiweb-vue-base-storefront'

Vue.use(hiweb, {
    store,
    options
})

It's almost done! Next step, we'll define our routes in src/router.js. But now let's start your theme app by running this command

npm run serve