> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/blocks/product-recommendations.md).

# Product Recommendations

The Product Recommendations block is the “You may also like” strip. It shows a few more products next to the one someone is already looking at.

{% hint style="info" %}
If you want a **full shop grid**, use [Product Query](/north-commerce/blocks/product-query.md). If you want a **home-page slider** of a collection, use [Collection Slider](/north-commerce/blocks/collection-slider.md).
{% endhint %}

## Before you start

1. North Commerce and North Commerce Blocks are installed and turned on
2. You have more than one product. Related products need something else to suggest. See Create a product

## Add it to a page

This belongs on a product page, under the main product.

1. Open the page that has your Product block
2. Click under the Product block
3. Click the **+** button
4. Search for **Product Recommendations**
5. Click it once

![Search for Product Recommendations in the block inserter](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2Flu28DzDKEFKzXO6uKFPr%2Feditor-add-product-recommendations.jpg?alt=media)

The heading starts as **You may also like**. Click it to change the words.

6. Click the Product Recommendations block so it is selected
7. In the right-hand sidebar, pick the layout and which products show
8. Click **Update** / **Publish**

## Layout

Under **Layout**:

* **Layout preset** — **Carousel** (a sliding row), **Grid**, or **List**
* **Cards per view** — 3, 4, or 5 (Carousel only)
* **Corners** — **Rounded** or **Square**

You can also set an **Accent color**.

## Which products show

Under **Products**, pick a **Source**:

* **Related (auto-detect product)** — products that share a category or tag with the product on this page
* **Category** — then pick the category
* **Tag** — then pick the tag
* **Manual selection** — you pick the products yourself

**Products to show** is how many to list (1–20).

{% hint style="success" %}
**Related** only works on a product page. On a regular page, pick **Category**, **Tag**, or **Manual selection**.
{% endhint %}

## What is on each card

You edit one card. Every recommended product uses that same card.

It starts with a photo, title, price, color swatches, and **Product Quick Add**.

Under **Content**, **Quick add** adds a quick-add button on each card (not used in List). If the product has options, a picker opens first.

## What your customer will do

1. Scroll below the product they are looking at
2. See a few more products
3. Click one, or use Quick add

## Make sure it works

Open a product page in a new browser tab.

1. You should see the heading and a few product cards
2. If **Source** is **Related**, the cards should be in the same category or tag
3. Click a card. It should open that product.

## If something looks wrong

* **No products.** You only have one product, or **Related** is on a page that is not a product page. Switch **Source** to **Category** or **Manual selection**.
* **Wrong products.** Click the block and change **Source**.
* **It looks like a big shop.** You wanted [Product Query](/north-commerce/blocks/product-query.md) instead.

SEE ALSO: Product · [Product Query](/north-commerce/blocks/product-query.md) · [Collection Slider](/north-commerce/blocks/collection-slider.md)