warning

This document is applicable to custom components created using toolkit version @appdirect/sfb-toolkit@4.x.x or earlier and @appdirect/sfb-theme-components@0.0.344 or earlier.

Add components to your storefront theme

To add a component to a page template, add a component HTML tag like this:

    <component name="ImageBanner" id="ImageBanner"></component>

Components Properties

• name The exported name of the component.
• id A chosen unique identifier across all pages to identify the component.

Use the Theme Editor

To use the Theme Editor, place the component on a supported page template so that the editor can detect it. These are the pages that the editor currently supports:

• content/pages/home/home.html
• content/pages/listing/listing.html
• content/pages/profile/profile.html
• content/pages/profile/profile-editions.html

You can add components to any theme template file (layout, macros, or pages) and it will be rendered properly, but the Theme Editor capabilities are restricted to the pages above.