Shoper CLI usage examples - Step by step

Changing theme name

1. go to / settings / details.json
2. edit details.json according to JSON structure and save changes

1. send changes to the server shoper theme push

shoper theme push

1. observe the change in the store

Editing custom CSS

1. go to styles and edit the custom.less file
2. make changes, then save
3. send changes to the server shoper theme push

shoper theme push

1. Observe changes in the store

Adding a new custom macro

1. Go to the macros directory located in the skin directory.
2. Option 1
   • If there is no custom directory in the macros directory, create it.
   • In the custom directory, create a file with the .twig extension.
   • Provide macro file logic according to documentation.
   • Save
3. Option 2
   • Create a macro in the administrator panel
   • Download the theme shoper theme pull.
   • Copy the file with the twig extension in the custom directory.
   • Provide macro file logic according to documentation.
   • Save
4. Send changes to the server shoper theme push

shoper theme push

Adding a new custom module

1. Go to the modules directory located in the skin directory.
2. Copy an existing custom module, giving it a new, unique name. If a custom module does not yet exist, it is best to create a custom module from the administrator panel, see the help article.
3. Make the necessary changes in the source code of the new module.
4. Then open the settings.json file.
5. Remove the id and code fields from the new module's configuration.
6. Below is an example of what the key structure should look like after editing:

1. Send changes to the server

shoper theme push

1. Observe changes

Real-time theme development with watch

Instead of manually running shoper theme push after every change, you can use watch mode to automatically detect and upload changes.

1. Pull or init a theme

shoper theme pull [id]

1. Navigate to the theme directory

2. Start watch mode with live browser preview

shoper theme watch --open

1. A browser window opens with the theme preview. Edit any theme file in your editor - for example, modify styles/custom.less or a module's module.twig file.

2. Watch mode detects the change, uploads the modified file to the store, and refreshes the browser preview automatically.

3. If you close the browser by accident, type /open in the terminal to reopen it.

4. Continue editing - multiple rapid changes are batched together (750ms window) so that only one push happens per batch.

5. When done, type /quit or press Ctrl+C to stop watching.

For technical details (batching, queuing, interactive commands), see theme watch reference.