The Emporix plugin brings your Emporix product and category data into Builder, so you can visually build and manage content using live commerce data from the Emporix Digital Commerce Platform.
Use the Emporix plugin to:
- Use products and categories as inputs in custom components or symbols
- Target content by product or category ID or handle
- Preview product and category pages inside Builder while editing
To get the most out of this document, you should already have:
- An Emporix Tenant
- A Builder account
- Go to the Plugins section in Builder.
- On the Emporix plugin tile, toggle to Enable.
- Click Refresh to apply changes.
- Click Settings on the plugin tile to configure with your Emporix Tenant name and Storefront API key.
The video below shows enabling the Emporix plugin.
The Emporix plugin provides several custom types that you can use in your Models, components, or Symbol inputs:
Emporix Product: provides access to a single product by ID.Emporix Product Preview: dynamically populate a preview URL using the selected product’s handle. This is useful when building product page templates.Emporix Product Handle: enables targeting or input selection using a product’s handle instead of its ID.Emporix Category: provides access to a single category by ID.Emporix Category Preview: dynamically populate a preview URL using the selected category’s handle. Useful for category page templates.Emporix Category Handle: enables targeting or input selection using a category’s handle.
For more information about the shape of values returned by these types, see E-commerce custom types with custom component inputs.
Use Emporix data to target Builder content by product or category. This is helpful when you want content to appear only for specific products or categories, without hard-coding routes or IDs.
1. In your app, set the targeting context with one of the following depending on your setup:
Client-side JavaScript: use builder.setAttributes():
builder.setUserAttributes({
product: currentProduct.id,
category: currentCategory.id,
});Server-side — API or GraphQL: include the relevant attributes in the query to Builder’s Content API.
2. In Builder, create a custom targeting attribute and choose one of the Emporix types:
Emporix Product: target by product IDEmporix Product Handle: target by product handleEmporix Category: target by category IDEmporix Category Handle: target by category handle
For more details, see Targeting with plugins.
Preview Emporix-powered templates directly in Builder by adding preview fields to your component models.
Emporix Product Preview
Use this custom field to dynamically update the preview URL for product pages. For example:
https://www.mystore.com/product/${previewProduct.handle}Add a default value to this field so the editor loads a known product when the template is being developed.
Emporix Category Preview
Use this custom field to update the preview URL for category pages. For example:
https://www.mystore.com/category/${previewCategory.handle}As with products, adding a default value is recommended for template development.
For more on setting up preview URLs, see Setting up E-commerce resource previews.
For more information on using built-in plugins, visit: