Related products
Presenting recommended products to your customers simplifies the process of discovering new products and can significantly boost sales in your online store. Learn more about product recomendations.
How to Add the Search & Discovery App in Shopify
- Log in to Your Shopify Admin:
Open your Shopify admin panel by logging in with your credentials.
Navigate to the Shopify App Store:
- In the admin panel, go to the Apps section.
Click on the “Visit Shopify App Store” button.
Search for the Search & Discovery App:
- In the Shopify App Store, use the search bar to type in “Search & Discovery”.
Press Enter to search.
Select the Search & Discovery App:
- From the search results, find the “Search & Discovery” app.
Click on the app to open its details page.
Add the App to Your Store:
- On the app details page, click the “Add app” button.
- You will be redirected to your Shopify admin, where you need to confirm the installation.
Click on the “Install app” button to complete the process.
Configure the App:
- Once the app is installed, you can access it from your Shopify admin under the Apps section.
How to Add Related Products Using the Search & Discovery App in Shopify
- Log in to Your Shopify Admin:
Open your Shopify admin panel by logging in with your credentials.
Navigate to the Apps Section:
- In the admin panel, go to the Apps section.
Click on the “Search & Discovery” app to open it.
Access Recommendations:
- In the Search & Discovery app, click on the “Recommendations” section.
- Find the Specific Product:
- Click on a specific product from the list to open the page and add recommendations.
- in search field, browse and add different products to be related to this product as recommendations.
- Save Your Changes:
- After adding the related products, make sure to save your changes.
List of products for adding recommendations after clicking and opening detail page.
Search field for adding products as recommendations.
| Setting | Description |
| Heading | To add a heading to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. |
| Heading size | The heading size setting offers three options to control the size of section headings:
|
| Description | To add a description, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text such as making it bold, italic, or adding a hyperlink. |
| Heading alignment | You can use this option to align the heading, or both the heading and description, to the left, center, or right. |
| Maximum products to show | This setting determines the maximum number of products that will appear on the page. You have the flexibility to select a range from 2 to 10 products. |
| Number of columns on desktop | Use the slider to choose the number of columns for desktop view. You can select a range from 2 columns to a maximum of 5 columns. |
| Color scheme | Choose an appropriate color scheme for related products section. *Applying a color scheme automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes. |
Product card
| Setting | Description |
| Image ratio | The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from:
|
| Show second image on hover | You can see the second image on hover if on the detail page of this product are 2 or more images in the list. |
| Show vendor | Show the vendor of the products under the image. |
| Show product rating | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and Metafield definitions for reviews.rating_count and reviews.rating. |
| Show quick add button | Mark the checkbox to give customers the opportunity to add the product to their cart by hovering over the image and clicking the “Add To Cart” button, or to see more product details by clicking the “Quick View” button. |
Mobile layout
| Number of columns on mobile | You can choose the number of columns for mobile display in this setting:
|
Section paddings
| Setting | Description |
| Top padding | The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider. |
| Bottom padding | The “Bottom padding” setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the section. |