Introduction

Shoper CLI is a command-line interface tool that enables developers and integrators to efficiently work with graphic themes in stores based on the Shoper platform. CLI speeds up development processes, allows for automation of typical tasks, and supports CI/CD.

System requirements

• Node.js: min 21.19.5, preferably a recent LTS or higher
• Operating system: Windows (preferably PowerShell), macOS or Linux
• Access to Shoper store with permissions - Full access to Configuration (appearance)

Theme directory structure

The skin directory structure is essential for a correct understanding of Shoper CLI operation and Storefront theme logic.

• /macros
  • /custom
• /modules
  • /module-name-1
  • /module-name-2
  • /module-name-3
  • …
• /settings

• /styles

  • /src

• /macros - directory with macro files, provided with the store and theme, macro files documentation.

/macros/custom - directory with custom macro files

1. /settings - directory with skin configuration files

2. /settings/details.json

The file allows changing the "name" and providing a "description".

• /settings/schema.json - Configuration schema file that allows providing custom settings in the theme settings in Shoper Visual Editor.

• /modules/settings.json The settings.json file contains values assigned to settings defined in schema.json – these are the current module configurations used in the visual editor (SVE).
• /modules/thumbnail.jpg - Theme thumbnail, which is displayed in the list of skins in the Shoper administration panel.

1. /modules - directory with module directories and files. Documentation describing Storefront modules.

Content:

• /modules/module-name/module.js - Module JS file, see documentation.
• /modules/module-name/module.twig - Module Twig file, see documentation.
• /modules/module-name/schema.json - Module configuration schema file, see documentation.
• /modules/module-name/settings.json - File with module configuration settings, see documentation.
• /modules/module-name/translations.json - File with module configuration settings, see documentation.

See how to add a new custom module step by step using Shoper CLI.

1. skinstore

2. /styles - directory with CSS responsible for theme styles. Documentation.

3. /styles/custom.less - Custom CSS / LESS theme style, analogous to the custom CSS tab in theme editing.

• /styles/schema.json This is the schema.json file that can be added by the Skinstore store, allowing you to define your own controls in the Shoper Visual Editor – in the Colors and styles tab.
• /styles/settings.json The settings.json file contains values assigned to settings defined in schema.json – these are the current configurations used in the visual editor (SVE).
• /styles/src - Directory with Less theme files, read-only.