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
Ensure that you have installed NodeJS.
There are many ways how to create assets, in this example is used GruntJS to generate them.
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 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
andshoptet.woff
from template you are using, e.g.your_directory/assets/11/fonts/shoptet/
to folderfonts
- resulting path would be e.g.
user/documents/assets/fonts/shoptet/shoptet.svg
- folder
your_directory/assets/00/img
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.
<link rel="stylesheet" href="https://cdn.myshoptet.com/usr/classic.shoptet.cz/user/documents/assets/main.css">
<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
.
For continuous development and compatibility of your themes with Shoptet templates,
don't ever edit any file in your_directory/assets/
folder.
Really don't ever edit any file in your_directory/assets/
folder.
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.
main.less
is used for layoutproject.less
is used for colorsfont-shoptet.less
is used for Shoptet icon font
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
.