Getting Started

info

Still haven't installed the toolkit? Get started here.

Start the Storefront Toolkit

1. Open a command-line window

2. Go to the workspace directory---that is, the themeFolderName directory you created during installation.

3. Type sfb-toolkit start and press Enter. Wait for the command to start the service, indicated by the following message:

       AppDirect Toolkit is running, you can view your storefront preview at: http://localhost:3555/en-US/home

4. Open a browser and go to http://localhost:3555/en-US/home. The storefront opens and the developer tool appears on the right side of the page.

5. You can now edit the storefront pages in the text editor, and see the changes appear in the browser.

   note

   Leave the command-line window open with the start command running. To run other commands, open a new window.

See Use the developer toolbar to learn more about the developer tool.

Next Steps

When the Toolkit starts it launches a web server and provides its URL. You can go to this URL in a web browser to see the effect of your changes to the theme as you make them. You use the developer toolbar to perform various tasks, such as importing data from the marketplace for display in your storefront.

When creating themes for your storefront we recommend that you use a development environment identical to your production environment. In the development environment you can build your theme locally and preview changes in the browser. After you complete your theme you can package it as a .zip file and upload it to your production environment with the Theme manager.

Video tutorials

The following video tutorials demonstrate 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 Theme Editor 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 custom data.
• Manage headers and footers. Explains the unique templating system for headers and footers, and demonstrates how to customize them.
• Overview. Explains how to use the Theme Manager to publish themes and manage theme versions.