warning

This document is applicable to custom components created using toolkit version @appdirect/sfb-toolkit@4.x.x or earlier and @appdirect/sfb-theme-components@0.0.344 or earlier.

note

If you have recently upgraded your Toolkit to version 4.0 from an earlier version, you may receive warnings and error messages when you start it. For instructions on how to resolve these warnings and errors, see Upgrading to 4.0 and later.

Storefront Toolkit

The Storefront Toolkit consists of a set of tools that developers can use to build storefront themes. In general, the theme customization process includes running commands from the command line, manually updating various storefront HTML and CSS files, and previewing changes on a local server.

To create themes using the Storefront Toolkit, you must install third-party programs to run a development environment in which you can develop and preview themes before they are available in the production environment.

Command-line commands and options

This section explains how to use the different Storefront Toolkit commands available through the command line.

When you work with the developer tool, you typically require two command-line windows. In the first window, you start the tool; in the second, you can run other commands (create new themes, update the theme configuration, and so on).

You can use the command line to do the following:

Command	Description
sfb-toolkit setup	Creates a new project/environment where Developer can store themes
sfb-toolkit create [name]	Creates a new theme
sfb-toolkit checkout [name]	Changes context to the theme [name]
sfb-toolkit about	Lists existing themes
sfb-toolkit status	Gives information about current configuration
sfb-toolkit update	Update current theme's configuration
sfb-toolkit start	Starts local server with current theme on https://localhost:3555/en-US/home
sfb-toolkit package	Creates a .zip file with current theme files
sfb-toolkit storybook	DEPRECATED Start storybook for the currently selected theme
sfb-toolkit install [module]	Installs npm module in the currently selected theme
sfb-toolkit components	Setup custom components
sfb-toolkit version	Shows version of sfb-toolkit

For a full list of commands, use the help option:

    sfb-toolkit --help

See the Toolkit commands overview for a video tutorial on how to use commands to improve your workflow.

Create themes

Use the following procedure to create themes. You can create as many custom themes as required. Each theme appears as a separate folder at the root of the themes folder you created during installation (see Install the Storefront Toolkit).

To create a theme

1. Open a command-line window.

2. Go to the themes directory you created during installation.

3. Type sfb-toolkit create themeName and press Enter. You are prompted to select one of the standard marketplace themes as a starting point. The choices are classic and Plaza.

4. Use the arrow keys to highlight the theme you want, and press Enter.A folder with the specified theme name is created, and you are prompted to type the path to your marketplace.

5. Type your full marketplace URL.

   important

   Ensure that you include https:// in the URL.

   Press Enter. Your context changes to the new theme, and you can now import data from the specified marketplace.

List themes

Use the following procedure to list all of the custom themes that you have created, and determine which is currently the default theme used when you start the Storefront Toolkit.

To list themes

1. Open a command-line window.
2. Go to the themes directory you created during installation.
3. Type sfb-toolkit about and press Enter. All available themes are listed. The current theme is highlighted.

Switch between themes

You can switch between your various custom themes at any time. When you switch between themes, you can refresh the browser preview page to view the newly selected theme.

To select a theme

1. Open a command-line window.
2. Go to the themes directory you created during installation.
3. Type sfb-toolkit checkout themeName, where themeName is the name of one of the available themes, and press Enter. Your context changes to the specified theme.

View theme configuration

Use the following procedure to change the configuration of the current theme. The configuration consists of the marketplace URL as well as the path to the PageObjects, which control the flow of data between the marketplace and the toolkit.

To view theme configuration

1. Open a command-line window.
2. Go to the themes directory you created during installation.
3. Type sfb-toolkit status and press Enter. The marketplace and PageObjects paths are listed.

Update your marketplace URL

Use the following procedure to update the marketplace URL of the current theme.

To update the theme configuration

1. Open a command-line window.

2. Go to the themes directory you created during installation.

3. Type sfb-toolkit update and press Enter. You are prompted for a marketplace path.

4. Type the full marketplace URL.

   important

   Ensure that you include https:// in the URL.

   Press Enter. The configuration is updated.