Caution

Building templates this way is outdated and could lead to errors

Custom theme for Shoptet templates

When the blank mode is enabled, no CSS neither JavaScript files are served by Shoptet servers. With this tools you can simply create all necessary assets for fully functioning Shoptet online store template.

• you can create userConfig.json and use it as described in example below
• you can use Gulp or other automation tool
• you don't have to use Grunt nor Gulp and compile files directly from command line/editor
• but, first of all, you can use this repository as a inspiration

Prerequisites

Ensure that you have installed NodeJS.

There are many ways how to create assets, in this example is used GruntJS to generate them.

Creating assets

Install Grunt command line interface, which you need to access build tools. You have to execute this command only for the first time, then it's unnecessary.

npm install -g grunt-cli

Move to directory, where you want to create your assets. In this example is called your_directory.

cd your_directory

Clone necessary repositories from GitHub.

git clone git@github.com:Shoptet/templates-assets.git assets
git clone git@github.com:Shoptet/templates-custom-theme.git theme

Move to directory theme, where the build tools are prepared.

cd theme

Install necessary modules to make build tools working. You have to do it only for the first time.

npm install

Finally, create the assets itself.

grunt

Your assets are now ready in your_directory/theme/dist folder.

Upload assets to FTP

Upload following files to FTP to folder assets:

• your_directory/theme/dist/main.css
• your_directory/theme/dist/build.min.js
• resulting path would be e.g. user/documents/assets/main.css

To folder assets also upload:

• shoptet.svg, shoptet.ttf and shoptet.woff from template you are using, e.g. your_directory/assets/11/fonts/shoptet/ to folder fonts
• resulting path would be e.g. user/documents/assets/fonts/shoptet/shoptet.svg
• folder your_directory/assets/00/img

Include assets in your admin

Go to HTML codes page in your admin and paste following code there. Don't forget to replace classic.shoptet.cz by URL of your online store.

Header section

<link rel="stylesheet" href="https://cdn.myshoptet.com/usr/classic.shoptet.cz/user/documents/assets/main.css">

Footer section

<script src="https://cdn.myshoptet.com/usr/classic.shoptet.cz/user/documents/assets/build.min.js">

That's all - now you have online store in blank mode, looking exactly same like in standard mode (only web fonts are intentionally replaced by normal fonts). It's up to you to make it differ.

❗️ Because of high speed cache of Shoptet CDN, it is strongly recommended to use Shoptet CDN for your assets. Ever include your assets in this format: https://cdn.myshoptet.com/usr/YOUR_WEB/user/documents/assets/YOUR_ASSETS.

How to make custom change in theme

Important notice

For continuous development and compatibility of your themes with Shoptet templates, don't ever edit any file in your_directory/assets/ folder.

Very important notice

Really don't ever edit any file in your_directory/assets/ folder.

Example - change primary color of template

cd your_directory/theme
touch project-variables-custom.less
touch project-custom.less
touch userConfig.json

We need to set new value to @colorPrimary variable in project-variables-custom.less:

@colorPrimary: orangered;

Then we need to load original project files along with our newly set variable in project-custom.less:

@import '../assets/11/css/project';
@import 'project-variables-custom';

And finally we have to use our custom file in build process - this is what the userConfig.json does:

{
  "css": {
    "dist/main.css": [
        "../assets/11/css/main.less",
        "project-custom.less",
        "../assets/11/css/font-shoptet.less"
      ]
  }
}

Now recompile your CSS by grunt command and upload it to FTP.

About source LESS files

• main.less is used for layout
• project.less is used for colors
• font-shoptet.less is used for Shoptet icon font

About source JavaScript files

Section concatJS.src of package.json contains all JavaScript files that online store needs to work properly. By default are compiled to build.min.js.