Product Recommendations

How to add section Product Information Tabs to product page

Demo Product Recommendations on website

A Product recommendations section displays an automatically-generated list of product recommendations. Displaying recommended products to customers makes it easier for them to discover new products, and can help to increase online store sales.

To learn more about the Recommendation logic and algorithm criteria, see Shopify Dev Docs.

In the theme editor (Customize), Select Products, then Default product. Add section Product Information Tabs.
Section Product Information Tabs only works on product page (product detail).

Configure section Product Recommendations

Product Settings

In the theme editor (Customize), Select Products, then Default product. Add section Product Information Tabs then locate Product Settings. Here you can make the necessary configurations.

Product Card Settings on section

Skin : Choose skin for product card.
Hover style : Select image effect when hovering.
Aspect Ratio : Configure aspect ratio for card images.
Image Size : Configure image size for card images. See more about the sizes attribute .
Show Rating : Show product rating. For this option to work you need to install the review app. See instructions.
Products limit : Configure the number of product displayed.
Items Gap (px) : Configure the distance between card items.

Product Style

In the theme editor (Customize), Select Products, then Default product. Add section Product Information Tabs then locate Product Style. Here you can make the necessary configurations.

Product Card Style on section

Title color : Configure color for product card title.
Description Color : Configure color for product card description.
Image spacing (px) : Configure spacing for image product.
Price margin top (px) : Configure margin top for price product.
Title margin top (px) : Configure margin top for title product.
Swatch margin top (px) : Configure margin top for swatch product.
Rating margin top (px) : Configure margin top for rating product.
Description margin top (px) : Configure margin top for description product.

Build layout section

Layout slider

You can display block layout grid or slider.If you want to use layout slider see Section Slider Layout

Switch slider or grid

Layout grid

If you use layout grid.At the settings section, You can configure items to display on 1 row for each screen device.

Configure items to display on a row of layout grid

Other configurations of section

You can see the documentation for other section configurations such as: Heading, container, background, animation, padding...