Skip to main content
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:

CommandDescription
sfb-toolkit setupCreates 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 aboutLists existing themes
sfb-toolkit statusGives information about current configuration
sfb-toolkit updateUpdate current theme's configuration
sfb-toolkit startStarts local server with current theme on https://localhost:3555/en-US/home
sfb-toolkit packageCreates a .zip file with current theme files
sfb-toolkit storybookDEPRECATED Start storybook for the currently selected theme
sfb-toolkit install [module]Installs npm module in the currently selected theme
sfb-toolkit componentsSetup custom components
sfb-toolkit versionShows 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.

Was this page helpful?