HomeEngagementContentDiscoveryOther Resources

The React [Reference SPA](🔗) provisioned with every new Bloomreach Headless Experience Manager environment comes with a set of components designed and selected to showcase our best features. These components can be used, re-used, changed, and removed in any Bloomreach Headless Experience Manager project. To understand more about these components and the use-cases they cover, this page provides a detailed list.

For more information regarding managing components and the differences between page-specific and shared components, please check the following page:

  • [Manage Components on a Page](🔗)

ComponentTypeParametersDescriptionCode in GitHub
Banner carouselPage-specificContent:<br><br><ul><li> **Banners***</li> <ul><li> Title</li> <li>Content</li> <li>Image</li> <li>Cta</li> <li>Link</li></ul></ul>Properties:<li> **Appearance**</li> <ul><li>Content Alignment</li> <li>Slide Interval (milliseconds)</li></ul>The Banner carousel allows dropping onto a page an information driven carousel, including up to 50 banners with a set interval. Multiple images or banners are shown simultaneously in a carousel. You can find an example of the Banner carousel component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel](🔗)
Banner CTAPage-specificContent:<br><br><ul><li>Title</li><li>Content</li><li>Cta</li><li>Link</li></ul><br>Properties: This component has no editable propertiesThe Banner CTA displays key information in a wide format, often with a call to action, text and a button to engage audiences. You can find an example of the Banner CTA component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/BannerCTA](🔗)
Banner galleryPage-specificContent:<ul><li>Title</li><li>**Banners***</li><ul><li>Title</li> <li>Content</li><li>Image</li><li>Cta</li><li>Link</li></ul></ul>Properties:<li>**Appearance**</li> <ul><li>Slide Interval (milliseconds)</li></ul></ul>The Banner gallery displays banners in a grid with horizontal and vertical axis or a custom template. You can find an example of the Banner gallery component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/MultiBannerCarousel](🔗)
Category highlightPage-specificContent: <ul><li> Title</li><li>Commerce connector</li><li>**Category**</li><li> Category (Category Picker)</li></ul><br>Properties: This component has no editable propertiesThe Category highlight creates a category based navigation in a grid which direct users to category based product listing pages. You can find an example of the Category highlight component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/CategoryHighlight](🔗)
Pathways & RecommendationsPage-specificContent: <ul><li> **WidgetCompound**</li><ul><li> Widget\* (Widget Picker)</li> <li>Widget Algorithm</li></ul><br> <li>**ProductCompound**</li><ul><li>Product (Product Picker)</li><li> Product Variant (Product Picker)</li></ul><br><li> **CategoryCompound**</li> <ul><li>Category (Category Picker)</li></ul><li>Keyword</li></ul><br>Properties:<br><br><ul><li> **Appearance**</li><ul><li>Title</li> <li>Number of Products*</li><li>Show Product Title</li> <li>Show Price</li> <li>Show Product ID</li><li>Show Description</li><li>Slide Interval (milliseconds)</li></ul>The [Pathways & Recommendations](🔗)  component displays similar products on product detail pages in a grid which is horizontally scrollable. You can find an example of the Pathways & Recommendations component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/PathwaysRecommendations](🔗)
Product gridPage-specificContent:<li>Title</li><li>Type*</li> <li>Search term</li><li>**Category**</li> <ul><li>Category (Category Picker)</li></ul><br>Properties:<li>**Appearance**</li><ul> <li>Page size\*</li><li>Filters</li> <li>Show pagination</li> <li>Show total</li><li> Show sorting</li> <li>Show facets</li></ul><li>**Search and Merchandising**</li> <ul><li>View ID</li></ul>The Product grid component showcases different products from a commerce backend into a grid based on pre-defined search query. You can find an example of the Product grid component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/ProductGrid](🔗)
Product highlightPage-specificContent:<br><ul><li>Title</li><li>Commerce connector*</li><li> **Product**</li><ul><li>Product (Product Picker)</li><li>Product Variant (Product Picker)</li></ul></ul><br>Properties: This component has no editable propertiesThe Product highlight component highlights a set of products creating a grid which links to the highlighted products' detail pages.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/ProductHighlight](🔗)
Title & textPage-specificContent:<br><ul><li>Title</li><li>Text</li></ul><br>Properties:<ul><li>Text alignment</li><li>Title size</li><li>Style</li></ul>The Title & text component allows adding a title and a text onto a page and format it in different heading styles. You can find an example of the Title & text component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/TitleAndText](🔗)
Banner carouselSharedProperties:<br><ul><li> **Appearance**</li><ul><li>Content Alignment</li><li>Slide Interval (milliseconds)</li></ul> <li>**Banners**</li><ul><li> Banner 1*</li><li>Banner 2</li><li>Banner 3</li><li>Banner 4</li><li>Banner 5</li></ul>The Banner carousel allows dropping onto a page an information driven carousel, including up to 50 banners with a set interval. Multiple images or banners are shown simultaneously in a carousel. You can find an example of the Banner carousel component on the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SingleBannerCarousel](🔗)
Banner gridSharedProperties:<ul><li> **Appearance**</li><ul><li>Title</li></ul> **Banners**<ul><li> Banner 1*</li><li>Banner 2</li><li>Banner 3</li><li>Banner 4</li><li>Banner 5</li> <li>Banner 6</li><li>Banner 7</li><li>Banner 8</li></ul></ul>The Banner grid displays banners in a grid defined with horizontal and vertical axis or a custom template. You can find an example of the Banner grid component in the [About Us page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/BannerCollection](🔗)
ContentSharedProperties: This component has no editable propertiesThe Content component allows visualizing on a page where content will be displayed. You can find an example of the Content component in the [Terms of Use page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Content](🔗)
Document catalogSharedProperties<ul><li> **Appearance**</li><ul><li>Title</li><li>Show Pagination</li> <li>Show Total</li></ul><li> **Content selection**</li><ul><li>Documents path</li><li>Include document subtypes</li><li>Document types\*</li></ul> <li>**Sorting**</li><ul> <li> Sort field</li> <li>Sort order</li></ul><li> **Pagination**</li><ul><li>Hide past items</li><li> Hide future items</li><li> Field that contains document date (for hiding)</li> <li>Nr. of posts to show</li></ul></ul>The Document catalog component <br><br>shows a list based on a feed or pre-defined variables. This component can be used for news articles, blogs etc. You can find an example of the Document catalog component in the [Articles page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/PageCatalog](🔗)
Google mapsSharedProperties:<br><ul><li> **Position**</li> <ul><li>Latitude</li> <li>Longitude</li> <li>Address</li></ul><li>**Appearance**</li> <ul><li>Default Zoom\*</li><li> Show Marker</li><li> Map Type\*</li></ul><li> **Settings**</li><ul><li> Google Maps API Key</li></ul></ul>The Google maps component displays map and location(s) based on Google maps. You can find an example of the Google maps component in the [About Us page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Map](🔗)
ImagesSharedProperties:<ul><li> Image 1\*</li><li>Image 2</li><li>Image 3</li><li>Image 4</li></ul>The Images component adds one or more images onto a page. You can find an example of the Images component in the [About Us page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Images](🔗)
Page navigationSharedProperties:<ul><li> Link 1\*</li><li>Link 2</li><li>Link 3</li><li>Link 4</li><li>Link 5</li></ul>The Page navigation component creates a menu from up to 5 links. You can find an example of the Page navigation component in the footer of the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/blob/main/components/Navigation.tsx](🔗)
Product detailsSharedNon-editable componentThe Product details component allows visualising on a page where product details will be displayed. You can find an example of the Product details component in [any Product page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Product](🔗)
Search barSharedProperties:<ul><li>document\*</li><li>suggestionsEnabled</li><li> suggestionsLimit\*</li></ul>The Search bar component typically located in shared containers returns products from the commerce backend based on a search query. This includes Discovery optimized autosuggest and autocomplete for keywords, products, and other search results. You can find an example of the Search bar components in the header of the home page of the Reference SPA.[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/SearchBar](🔗)
VideoSharedProperties:<ul><li>URL\*</li></ul>The Video component places a video from a given URL (e.g. YouTube) onto a page. You can find an example of the Video component in the [About Us page of the Reference SPA](🔗).[https://github.com/bloomreach/bloomreach-reference-spa/tree/main/components/Video](🔗)