Using E-commerce Custom Types with Custom Component Inputs
You can integrate your custom component's input fields with your e-commerce platform.
Creators can use these custom fields to select products, collections, and other e-commerce platform resources from a searchable list. Your component receives the selected resource's handle as a prop, which you can use to fetch and consume data from your e-commerce platform.
You can create components using this technique, for example:
- Display a selected product's details.
- Display a selected product collection.
- Combine data from a selected product with data fetched from external platforms to display shipping times, pricing histories, and other information.
Providing a searchable list for selecting e-commerce platform resources reduces the risk of data entry errors when compared to requiring users to manually enter handles or resource IDs and offers better UX when using your components.
Registering your component with custom e-commerce types
You can start by registering your custom component using a custom type provided by the e-commerce plugin.
ProductCollection React component in the example below displays the titles of a product collection's products from a Shopify store.
The component has a string prop called
collection that corresponds to the collection's handle. The component fetches the collection's data from Shopify using a function called
getCollection and stores the collection's products in its local state. Finally, it renders each product's title.
The component is registered using
Builder.registerComponent, which makes the component available for use in the Visual Editor, and it has one input,
collection, with the type
ShopifyCollectionHandle is a custom type provided by the Shopify e-commerce plugin that represents the handle of a Shopify collection. The exact types that you use when registering your components depend on your application and the e-commerce platform with which you're integrating.
👉 Tip: We suggest that you use request object, handle, or list types depending on your use case.
Request object types are versatile: they provide you with an ID, which you can use to fetch resource data from your e-commerce platform. If you set the
noTraverse request option to
false, a request object field will even make the request to your platform for you and inline the result, saving you from making an additional roundtrip.
Handle and list types are convenient when you need to consume a resource's handle—for example, while constructing a product page URL—or multiple resources at once.
You can set the collection by selecting Choose collection in the options pane after having added a
ProductCollection block to your page or section in the Visual Editor.
Selecting Choose collection loads a searchable list with all the collections from your Shopify store available. Choosing one sets your
ProductCollection block's collection field.
Notice that after choosing a collection, the collection field's input is updated to reflect your selection.
Using an e-commerce component input field's value
The value of the component's input is passed to your component as a prop with the same name as the input.
For handle types like
ShopifyCollectionHandle, your component receives a string corresponding to the resource's handle. For list types like
ShopifyCollectionList, your component receives an array of strings corresponding to the IDs of your selected resources.
You can use the handle or IDs to fetch resource data from your e-commerce platform, which can be processed and displayed within your component.