Skip to main content

Install the UI Toolkit

You can install the Storefront Toolkit on either MacOS or on Windows 10.

The Toolkit has certain prerequisite programs that must be in place before you can install it. The Toolkit installation itself is performed from the command line.

A video tutorial of an installation is available here.

Prerequisites​

Before you can install and use the Storefront Toolkit, you must install certain third-party programs as prerequisites. These include the Node.js environment and the node-sass library.

info

For Node.js installation, we recommend that you use the nvm application. This application is a version manager for node.js, designed to be installed per-user, and invoked per-shell. The nvm application works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on Unix, MacOS, and Windows WSL.

To install nvm, run this command at the command line: 

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

After nvm is installed, you can continue with the prerequisites listed in the table below:

For MacOSFor Windows 10
  1. Node.js 16+ (v.18 is recommended). Cross-platform JavaScript runtime environment for servers and applications.
  2. Node-sass. This is a library that provides binding for Node.js to LibSass and it must be installed as a global dependency. To install it, run npm -g install node-sass from the command line.
  3. Text editor—For code, markup, and prose, such as Sublime Text.
  4. Xcode—Development environment for macOS containing a suite of software development tools.

  5. Command line tools. Specifically for Xcode, it includes a package that enables UNIX-style development through Terminal by installing command-line tools and macOS SDK frameworks and headers.

    To download command line tools for Xcode

    1. Click Xcode in the top menu bar, then click Open Developer Tool > More Developer Tools.
    2. Enter your Apple ID password. The Downloads for Apple Developers page opens.
    3. Select and download the Command Line Tools that is compatible with your computer. You must download the package that is compatible with both your macOS and Xcode versions.
    4. Open the Command Line Tools folder and download the file.

  1. Node-sass. This is a library that provides binding for Node.js to LibSass and it must be installed as a global dependency. To install it, run npm -g install node-sass from the command line.

  2. Text editor—For code, markup, and prose, such as Sublime Text.

Install the Toolkit​

After you install the necessary third-party programs, you can install the Storefront Toolkit through the command line.

To install the Toolkit

  1. Open a command-line window.
  2. Type npm install -g @appdirect/sfb-toolkit and press Enter. Wait for the command to finish.
note

If you are upgrading 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.

Set up your workspace​

After the Toolkit has been installed, you can use its setup command to create the workspace. This folder structure will contain a sample theme, which you can use as a starting point for your own theme.

During this setup you must specify the marketplace to which the theme is linked. This enables you to draw on that marketplace for data during theme development.

To set up a theme

  1. Go to the directory to where you want to store your theme content.
  2. Type sfb-toolkit setup themeFolderName and press Enter. You are prompted to agree to the terms of the license agreement, The themeFolderName is the top-level folder for your workspace. It contains a themes folder where your themes are stored.
  3. Type agree and press Enter. You are prompted to select one of the standard marketplace themes as a starting point for your first theme. The choices are classic and Plaza.
  4. Use the arrow keys to highlight the base theme you want, and press Enter.
  5. Type a theme name and press Enter. A folder with the specified name is created on your computer. It includes all of the files required to create a custom theme. You are prompted to type the marketplace path.
  6. Type your full marketplace URL.
    important

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

    Press Enter. You can now import data from the specified marketplace when you Use the developer toolbar in your browser.

Congratulations! You have successfully installed the Storefront Toolkit, continue on to the next section to learn how to use the Toolkit.

Was this page helpful?

Tell us more…

Help us improve our content. Responses are anonymous.

Thanks

We appreciate your feedback!