# Product recommendations

{% hint style="success" %}
**Tip:** Drag and drop the section to the desired position on a page. If the section is unnecessary, you can hide it. Hover over a section title and click the eye icon to hide a section.
{% endhint %}

In the **"Heading",** you can place a title for the section.

The title font size can be changed to "Small", "Medium", or "Large" in the **"Size"** drop-down.

If you need to set up the title color, use the **"Color"** picker. Here you can paste the hex code into the related field or choose the color using the paint palette. The color settings will be used for both desktop and mobile.

### Section layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the **"Layout"** drop-down.

Use the **"Mobile alignment"** settings to change the alignment of the heading and description to "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

To add a divider between sections, use the **"Dividing line"** to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Content

{% hint style="info" %}
More about the algorithm for displaying recommended products can be read in the following [<mark style="color:blue;">article</mark>](https://shopify.dev/themes/product-merchandising/recommendations).

Additionaly, you can customize the recommended products using the Shopify Search & Discovery app. Read the details on the [<mark style="color:blue;">help page</mark>](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations).
{% endhint %}

Here you can apply general settings to products displayed in the section.&#x20;

The number of products per row can be set in the **"Products in row"** drop-down. Decide if to display 2, 4, or 6 items per row.

To control the number of products displayed in the section, use the **"Maximum products to show"** scale. It can be changed from 2 to 12 items.

**Enable swipe on mobile**

Check the box to add scrollbars instead of displaying the list of collections on mobile view.

The **"Image ratio"** can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle". For each image ratio, you can check [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

If you need to add an extra space between images on both desktop and mobile, enable **"Add image padding"**. Here is how it might be displayed on the page:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FvX3KvwrcNTtiNC7Jouvd%2Fproduct%20recommendations_padding.png?alt=media&#x26;token=1550567e-6626-4173-af44-c68ba2b1ceda" alt=""><figcaption></figcaption></figure>

The second image of a product will be displayed when hovering over a product card when the **"Show second image on hover"** option is ticked.

Use the **"Information align"** drop-down to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.

To display a brand for each product, tick the **"Show vendor"** option.

In the following examples, you can view how the Product recommendations might look on a desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FWrabzYE6z0tY3UVXZvE5%2Fproduct%20recommendations_desktop.png?alt=media&#x26;token=cdd2f080-3442-4b17-aa39-03707e11851a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FvyzuHGypp5noemOtkulq%2Fproduct%20recommendations_mobile.png?alt=media&#x26;token=e57ad4d8-3d4d-4367-a2b3-bd408b6f0400" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}