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.

Custom components

warning

While custom components allow for great flexibility please check the risks associated with using them.

The Plaza theme enables you to create themes using our React components library, which is included in the latest sfb-toolkit version. The toolkit includes components that you can use to quickly build and customize your storefront pages through the Theme Editor. For example, you can integrate the Slider, Carousel, ProductBanner, and many more components with your Plaza theme.

If none of the components in our library suit your needs, you can create custom components. Custom components are components that you can create and customize through the schema object.

The Getting Started section contains everything you need to know to start building your custom components according to our guidelines and best practices.

Installation

warning

Once custom components are installed there is currently no command to automatically reverse this action! See here for instructions on how to manually remove them.

To setup your theme to use custom components, execture the following command:

sfb-toolkit components

For a more in depth explanation on this command please see here.

sfb-toolkit storybook (DEPRECATED)

sfb-toolkit storybook

This command enables theme developers to visualize all available component documentation through Storybook UI. The Storybook includes both sfb-theme-components and the custom components that you have created.

Reuse our UI library components

You can reuse existing components (atoms or components) from our UI library for your custom components. For example, if you want to reuse the Button atom in your custom component, add the following import:

import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';

For each component documented in Storybook UI, you can find under Usage Example an example of how you can reuse/import one of our components in your custom components.

Availability

@appdirect/sfb-toolkit@2.0.5