Add components to your storefront theme

note

This command is available starting sfb-toolkit@5.x.x.

Using the toolkit

An easy way to add a component to your theme is by executing the following command:

sfb-toolkit components-add

Once the command is executed you will be prompted to provide the following data:

1. Name of the new component you wish to add (letters and numbers only).
2. On which storefront page (if any) you want the new component to be added to.
   1. You may choose if the component should be orderable (integrated with our Theme Editor) or non-orderable (stand-alone).

note

The orderable option is only available for themes using @appdirect/sfb-theme-components@0.352 or newer.

Orderable components

Orderable components are components that will be added to the theme and are recognized and configurable through our Theme Editor.

Non-orderable components

Orderable components are components that will be added to the theme but are not recognized and configurable through our Theme Editor.

Remove added components

Orderable components

To remove an orderable component you added please follow these steps:

1. Delete your added component folder found under: workspaceFolder/themes/[yourThemeName]/customComponents/components/[addedComponenNamte]
2. Open workspaceFolder/themes/[yourThemeName]/settings.json
   1. Find the orderableComponents list
   2. Remove the object with the name attribute matching the component you added
3. Open workspaceFolder/themes/[yourThemeName]/customComponents/index.js
   1. Find and remove the component you added

Non-orderable components

To remove a non-orderable component you added please follow thse steps:

1. Delete your added component folder found under: workspaceFolder/themes/[yourThemeName]/customComponents/components/[addedComponenNamte]
2. Open workspaceFolder/themes/[yourThemeName]/content/pages/[pageYouSlectedToAddComponent]/[pageName].html
   1. Remove <component name="yourComponentName" id="yourComponentName"></component>
3. Open workspaceFolder/themes/[yourThemeName]/customComponents/index.js
   1. Find and remove the component you added