Starting a Maropost Commerce Cloud theme
To build a new theme, you will want to use the Theme Starter Kit.
npm install -g ntheme
ntheme lets you generate and compile Maropost Commerce Cloud themes!
- generate|g [options] <themeName> Generates a Maropost Commerce Cloud theme based on a Skeletal branch - compile|c [options] Compiles a Maropost Commerce Cloud theme for the theme store - migrate|m [options] Migrates a Maropost Commerce Cloud theme so it can use the other Theme Starter Kit scripts based on a Skeletal branch
Generate a theme
ntheme generate themeName
Note: You would replace
themeName with the name of your new theme.
Compile a theme
cd themeName ntheme compile
For a theme to be published to the Maropost Commerce Cloud theme store, it has to be compiled in a certain way which this module takes care of. In order for the compile script to work correctly, your theme will need:
1. Theme info file
Either your theme can have a
THEME_NAME-netohemeinfo.txt file which is in the templates directory:
themeName └── src └── templates └── THEME_NAME-netohemeinfo.txt
You can follow the Skeletal file as a template:
Or if you do not want to include this file, you can adjust your
package.json to include a
theme_names array of theme names. In most cases you will just have the one theme, so it would be:
"theme_names": [ "THEME_NAME" ]
Ensure you have a stylesheet in
THEME_NAME-style.css. This file should contain all your theme editor styles.
Compiles a theme as if it was installed from theme store, useful for the followings workflows:
- If you want to place your theme up via FTP. This can be useful for starting a theme, as you don't have to install Skeletal on your development site, then sync your theme on top of it. That workflow doesn't work if your master theme is a different branch to Skeletal master.
- Useful while in development because the stylesheet will be renamed from
style.css, which the header template is referencing.
- And useful because this compiled version is the outputted version Maropost Commerce Cloud merchants will get, so it will give you a better understanding of the final product.
ntheme compile -u
Migrate a theme
cd themeName ntheme migrate
If you have an older theme, its package.json might not be setup correctly, this script will update it so it has;
- A compile script so you can run
npm run compile,
- Install Skeletal and ntheme as dependencies,
- Add a generated_themes object.
Set up git
It's important to know that your themes repository should only contain the templates which are different to the templates on Skeletal. This is why your new theme only contains the header, footer and homepage by default:
themeName ├── README.md ├── bin │ └── compile ├── gulpfile.js ├── node_modules ├── package.json └── src ├── scss │ └── app.scss ├── css │ └── THEME_NAME-style.css └── templates ├── cms │ └── home.template.html ├── footers │ └── template.html └── headers └── template.html
This means that if there are any templates that you wish to customise in your theme which are not included by default, you just need to copy them from the latest version of Skeletal into your theme.
Upload your customisations
To actually develop your theme, you need to install the latest version of Skeletal on your Maropost Commerce Cloud website from the theme builder. From here, you need to upload the contents of your theme's
src directory over the top of Skeletal's templates.
You will need to configure your FTP application to upload your files without removing any files that are on the server and not in your local directory. This way, your Maropost Commerce Cloud website will be using all of the default Skeletal templates for any templates that are missing from your theme.
Compile your styles
Any custom styles which you add to your theme should be done in
src/scss/app.scss. This file can be compiled into
app.css by running the
gulp command in your theme:
cd themeName gulp
This will prompt gulp to watch any changes you make to
src/scss/app.scss and automatically compile them. You can add in new build task in the