Work with the Storefront Toolkit

With the Storefront Toolkit a front-end developer creates, tests, and packages a theme on a local machine.

A front-end developer who works in the Toolkit should be familiar with web page development, and be comfortable working with CSS, HTML, and JavaScript.

This section provides an overview of the different aspects of working with the Toolkit, from the initial installation to the point when a theme is finished and you can put it in a .zip package for upload to the marketplace Theme Manager. It contains links to resources and to other topics that provide specific instructions on each of the tasks.

• To work with the Storefront Toolkit, you must install it on your local machine and set up a workspace and initial theme.
  You can install the Storefront Toolkit on a Mac, or on Windows. You must first install Node.js (version 18.x or 16.x for Storefront Toolkit 4.x.x and after, or version 10.x or 12.x for earlier Toolkit versions) and Node-sass as prerequisites. If you are working on a Mac, you must also install Xcode and its related command line tools.
  After you have installed the Toolkit, you can run the setup command to set up the file structure for your theme. During this setup, you must:
  • specify a workspace folder
  • accept the license agreement
  • specify a name for your first theme
  • specify the marketplace where the theme will be deployed
    There are instructions to Install the Storefront Toolkit, and you can view a video demonstration of an installation and setup here.
• To use the Toolkit, open a command window, navigate to the workspace directory, and Start the Toolkit via the command line. This starts the web server with the theme you specified during the Toolkit setup, and provides the URL you can enter in your browser to display the theme as you work on it.
  While working in the Toolkit, you can open another command window to use Command-line commands and options.
• Use a text editor to Create the pages, starting with the Home page and other required pages. From there you can expand outward to create other pages for your theme as you need.
  While working in the Toolkit you use a text editor to create and modify pages in the theme, save the changes, and test the results by viewing them in a browser.
  The Nunjucks HTML templating engine supports many different Template engine features that you can use in your theme. You can also Use page objects to represent variable data from the marketplace.
• Use the developer toolbar data viewer function to view real data from your marketplace.
  You can Use the developer toolbar to perform various functions, including to Use AppDirect data from the marketplace to populate your page objects so you can get a more accurate idea of what your theme will look like in production.
• When the theme is complete, Create a theme package to compress it into a .zip file.

After the package is ready, a user with the Marketplace Manager role can upload the theme and Work with the Theme Manager to fine-tune it and publish it on the marketplace.

Video tutorials

The following video tutorials demonstrate some of the basic steps required to get started with the Storefront Toolkit.

• Installation. Demonstrates how to install the Storefront Toolkit on OSX.
• Base theme overview. Describes the base theme and its different components, which are provided with the toolkit.
• Storefront Toolkit toolbar. Describes the toolbar that you can view in the browser preview.
• Toolkit commands overview. Explains how to use the available commands to improve your workflow.
• Modify your first page. Demonstrates how to customize your theme, using the home page as an example.
• HTML templating engine. Describes the Storefront Builder templating engine and the features available to use in your templates.
• Custom pages and profile page overrides. Explains how to create custom pages and use AppDirect custom data.
• Manage headers and footers. Explains the unique templating system for headers and footers, and demonstrates how to customize them.
• Theme Manager overview. Explains how to use the Theme Manager to publish themes and manage theme versions.