Still haven't installed the toolkit? Get started here.
Start the Storefront Toolkit
Open a command-line window
Go to the workspace directory---that is, the
themeFolderNamedirectory you created during installation.
sfb-toolkit startand 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
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.
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
startcommand running. To run other commands, open a new window.
See Use the developer toolbar to learn more about the developer tool.
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.
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 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 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.
Was this page helpful?
Tell us more…
Help us improve our content. Responses are anonymous.
We appreciate your feedback!