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 size	The heading size setting offers three options to control the size of your heading: Small Medium Large
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 25 products.
Number of slides	Use the slider to choose the number of product cards for desktop per 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	Image Ratio controls how your images look based on their shape. Here are the options: Adapt to Image: Keeps the original shape of the image, no cropping. Portrait: Makes the image taller. Square: Makes the image a perfect square. Custom: Allows to set image height in the next option.
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: Default Arch Blob Chevron left Chevron right Diamond Parallelogram Round To view the changes: Select the Standard style in the Theme Settings under the Product Card tab to explore different image shapes. If the style is set to Card, ensure the product background is different from the card background in color scheme.
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.
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”.
Quick add	Enables or disables buy buttons in product cards. None – button hidden. Standard – button visible.

Mobile layout

Setting	Description
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).

Button settings

Settings	Description
Enable button	Enable this option to add a button to the section.
Button label	Sets the button label to indicate where the button leads.
Button style	In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button link (paste a link or search)	Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL.
Button type	Button type: Choose how the button will be displayed: Button – a solid button. Button with icon – a button that includes an icon. Link – text styled as a hyperlink. Link with icon – a hyperlink that includes an icon.
Icon	Select an icon from the dropdown list; it will be displayed in the button before the text.

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.