Complementary products settings
Complementary products are products that are often bought in addition to a selected product. They're often referred to as something that “pairs well with" the current product. You can display complementary products on the product page to help customers discover new products.
Steps to Add Complementary Products:
- Go to Apps → search for Search Discovery App.
- Install the app.
- Open the app to see the full list of sections.
- Click on Recommendations.
- Find the specific product row you want to edit and go to the Complementary Products section.
- Use the Search field to select products to add as complementary products.
How to configure the Complementary products section
Basic Components
The “Complementary products” section consists of general settings.
To start customizing your collection, click on the “Complementary products” section to access its settings.
General settings
| Setting | Description |
| Color scheme |
Apply color scheme for the complementary products section from the available color schemes list. Read 'Color scheme' article to learn more about color schemes. |
Top divider
| Setting | Description |
| Show divider | Enable this option to show a divider at the top of this section. |
| Line opacity | Adjust the transparency of the divider line. |
| Thickness | Set the thickness of the line. |
| Top | Space above the divider line. |
| Bottom | Space below the divider line. |
| Top mobile | Space above the divider line on mobile devices. |
| Bottom mobile | Space below the divider line on mobile devices. |
The Subheading, Heading, and Description settings are used across multiple sections, blocks, and templates. To avoid repeating this information, the article is provided in the Global settings category.
For more details, read this article: "Subheading, heading, and description"
Layout
| Setting | Description |
| Maximum products to show | Select how many products (1–10) to display in the section using either a grid or carousel layout. |
Grid style
| Layout style | Grid: Shows products in a static grid layout. |
| Desktop columns | You can display 1 to 3 products per row. |
| Desktop horizontal spacing | Set the space between products in the same row. |
| Desktop vertical spacing | Set the space between rows of products on desktop. |
| Mobile vertical spacing | Set the space between rows of products on mobile. |
Carousel style
| Layout style | Carousel: Displays products in a slider. Customers can browse items by sliding through them using navigation arrows, a mouse or a Slider progress bar at the bottom. |
| Desktop columns | You can display 1 to 3 products per row. |
| Desktop horizontal spacing | Set the horizontal space between product cards on desktop. |
| Show scrollbar | Enable this option to display a scrollbar for the product cards. The scrollbar becomes visible when the number of products exceeds 1–3 items, depending on the desktop column settings. |
Product card
| Setting | Description |
| Color scheme | Applying a color scheme from the available list to product cards automatically updates all associated colors—such as background, heading, price, and compare button—across all product cards on your site. |
| Show vendor |
Click “Show vendor” to display the product vendor on product cards in this section. Note: The product vendor must first be added on the product page in the admin. |
| Show type |
Click “Show type” to display the product type on product cards in this section. Note: The product type must first be added on the product page in the admin. |
| Show price | Click “Show price” to display the product price. |
Padding
Padding is the space inside a section that separates the content from the section’s edges.
See this article to set paddings: Section padding