Configure a search experience component
Feature availability is part of a phased rollout. Your organization may not see this functionality yet. It will become available when your environment is included in the rollout.
After you have created a source, you can add a search experience component to you page to make it easy for users to find content on your website. The search experience component is preconfigured with the settings you enabled when you created the source, such as what data is visible, and which fields can be used as search keywords.
See getting started with search experiences to ensure search is functional in your environment.
The Search Experience component is disabled in Page Builder and Preview mode. Search functionality is available only on published pages.
Create a search experience component
To create a search experience component:
-
On the menu bar, click Page Builder .
-
In the Page builder, click the page you want to add the component to.
-
Click Add , and select Search Experience from the Components drop-down list.
-
When prompted, assign a compatible content item, or create a new one by clicking Add .
ImportantThe first time you create a compatible content item, you must include a JSON template in that item.
-
Click Assign.
Configure data from your search source
After you have added a search experience component to a page, select a source to connect to the component, and map the data from your source.
To configure data from your search source:
- Click on the search experience component to open the component settings in the right-hand pane.
- On the Search Configuration Manager tab, select the desired source from the Search source drop-down list.
- Use the Component Type switch to select either a Search component or a More like this component.
- Use the drop-down list associated with each heading, such as Tags or Title, to map and apply preconfigured styling to your fields.
- Optionally, use the Suggest features switches to turn on advanced settings that will apply to this component, such as Preview and Autocomplete.
- Optionally, in the Content tab, select the component version or create a new one.
Configure layout and styling
After you have connected a source to your search experience component, you choose how the search results will look on the page.
To configure layout and styling:
- On the Design tab, in the Layout drop-down list, configure the styling of the component. For example, its size, position, and alignment.
- On the Styling tab, configure the styling of the content in the component. For example, the spacing and alignment.
- On the Advanced Styling tab, use the fields to enter specific styling configurations:
- Columns - the number of columns in the search experience component. You can choose 1, 2, or 3 columns; the default is 3.
- ID - the ID attribute for your component that you can see in the deployed site's HTML.
- CSS Styles - additional classes you can use to apply custom styling, for example, mt-30 adds a 30px top margin.