Top Products
The Top Products component allows you to showcase your best products on the results page. Here’s a simple guide to help you add and use this component.
Add the Top Products component to the canvas
- Select your experience and go to Experience Designer.
- Choose the Results Page from the page selector above the canvas.
- Locate the Top Products component in the components list under the canvas.
- Drag and drop the component onto the canvas.
Place the Top Products component inside a row or column. It makes styling easier and helps maintain a clean layout.
Choose a layout
The Top Products component offers multiple layouts to suit different webpage styles.
To test a layout, select the Top products component on the canvas and choose one of the layout options from the right-hand menu.
Available layouts
You can use subcomponents strategically to display the most relevant product information.
After selecting a layout in the right-hand menu, you will see the list of available suncomponents below. Switch on the toggle next to a subcomponent like Product Rating to see the styling options.
- Product attributes
This is the most customizable Top Product layout. You can style the left, center, right and bottom sections, and include all available subcomponents, creating a unique design for your Top Product.
- Product hero and Product hero II
Use this layout to highlight a single product prominently.
You can include the Product QR code (turned off by default) and Product Badge.
- Product horizontal and Product vertical
We recommend using Product vertical for more than one Top Product.