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.
- 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 relate them to this product as recommendations. Related products can also be auto-generated. To hide auto-generated recommendations, check the box at the end of the product list. To show them, leave the box unchecked.
- 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 font family |
In Theme Settings, you can assign a different font family to headings and body text. This option allows you to customize the visual style of your heading by selecting heading or body styles. For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve. |
| Heading size | The heading size setting offers three options to control the size of your heading:
|
| 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. |
| Enable slideshow | Activate this option to display products in a slideshow format on desktop screens and mobile devices. |
| Number of slides | You can set the number of products displayed per slide. It can show between 1 and 5 products, full visibility of all products, or a portion of the last. |
| 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 | Image Ratio controls how your images look based on their shape. Here are the options:
|
| Custom image height | Set a custom image ratio and adjust its height using a convenient slider. |
| Image shape | You can check and choose from the following shapes for product cards in the dropdown:
To view the changes:
|
| Heading size | The heading size setting offers four options to control card heading size:
|
| Font weight | Font weight defines the thickness or boldness of card heading. Available options:
|
| Show second image on hover | Check this option to display a second image on hover. This will only apply if the product page includes more than one image. |
| Show vendor | Show the vendor of the product after product title. |
| 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. |
| Enable quick view button | Activate this option to display a “Quick View” button next to the “Add to Cart” button on product cards with variants. The Quick View button opens a pop-up where customers can:
If disabled, only the “Add to Cart” button will appear, allowing customers to add products to their cart without the quick checkout or variant selection pop-up. |
| Show type | You can show or hide the product type (e.g., headphones) added on the product detail page using this button. |
| Show color variants | Enable this option in each block to show color swatches. This option works with Color Variant Name option. In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section. Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”. |
Mobile layout
| Setting | Description |
| Number of columns on mobile | Select the preferred column layout for mobile devices:
|
| Number of slides | Using this option, you can configure the number of product cards displayed on the page at once for mobile devices. This option allows you to display a non-integer number of product cards, for example, three full cards and a partial fourth card (such as half of it). |
Section padding
| 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 “Section top padding” setting, but controls the space at the bottom of the section. |
| Top padding mobile | The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider. |
| Bottom padding mobile | The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices. |