> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/in-app/library/product-blocks/related-products.md).

# Related Products

## **What is Related Products?**

We’ve all been there. You land on a product page, convinced you've found exactly what you need. But then, you scroll down and a carousel of intriguing alternatives catches your eye.

Ever stop to think about what's actually going on there?

It's just a gallery of other products but that little box is one of the most powerful tools on your entire website.

<figure><img src="/files/N2VFfYFYlcqyrYmpntK1" alt=""><figcaption></figcaption></figure>

Too many store owners see this as just a decorative row of pictures. Big mistake. That little section is your 24/7 sales associate, and it's brilliant at its job. When a customer is hesitant, it can show them a similar item that might be the perfect fit, saving a sale you were about to lose.&#x20;

And for the customer who's ready to buy, it can suggest the perfect accessory or complementary item, effortlessly increasing the value of their order.

That's why we create the **Related Product** features to turn that simple product gallery into a powerful sales-boosting machine. Let's get started.

[**Click here to see the demo link ->**](https://library.smind.io/products/mh40-wireless?view=related-product-1)

## How To Install Related Product?

Step 1: In Shopify Admin, going to Smind Section app and find **Related Products 1-1** in Product Block tab of Library. Click Install and Customize it.

<figure><img src="/files/VjZnV4iTHGCFFfrzzIUN" alt=""><figcaption></figcaption></figure>

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Related Products 1**

<figure><img src="/files/e9SeKZk082ZcSKfcPfry" alt=""><figcaption></figcaption></figure>

Step 3: Copy the block ID. For example: smi-block-related-products-1

<figure><img src="/files/VdGe5SoAJHSBPv39oyTE" alt=""><figcaption></figcaption></figure>

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

<figure><img src="/files/3gM7gBDFzFSVg9uznwP1" alt=""><figcaption></figcaption></figure>

Step 5: And insert the block ID of **Related Products** to the Section ID. You can change the block name if you want.

<figure><img src="/files/jwMSTcZ4XnIGrewCyqY1" alt=""><figcaption></figcaption></figure>

Step 6: Now you have to change the content for this feature

* **Block ID:** This is a unique identifier for this specific block.
* **Content max-width:** This setting limits the maximum width of the content inside the block.

<figure><img src="/files/iuF9jHlBLt4dTpLeYnUJ" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You have to add related products to a main product on the Search & Discovery app before installing this product block to make sure it works for your store.
{% endhint %}

* To add related products in Shopify, install the **Search & Discovery app**

<figure><img src="/files/FeRN9mFc7CGyQZNfRdLO" alt=""><figcaption></figcaption></figure>

* In the Search & Discovery app, go to the **Recommendations** section and click **Add recommendations.**

<figure><img src="/files/m4BFBufzJfT4LWqzXK0c" alt=""><figcaption></figcaption></figure>

* Select the **main product** for which you want to display related products. In the Add **Related Products** section, browse for and select the products you want to be complementary. Click Save to store your selections.

<figure><img src="/files/KQ2XaVmb1UrvpMAZXwyj" alt=""><figcaption></figcaption></figure>

Step 7: Continue to customize this product block after saving these related products.

#### Heading

These options control the title of the section.

* **Heading:** This is the text for the section's title.
* **Heading size:** This controls the font size of the heading.
* **Heading alignment:** Aligns the heading text to the Center.

<figure><img src="/files/eu8NkcxYtyp7DHAK32F5" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/X3XWujOWru0mfz06nqlz" alt=""><figcaption></figcaption></figure>

#### Container

These settings customize the appearance of the box that contains the related products.

* **Grid view:** When disabled, the products are displayed in a list format. If it were enabled, the products would appear in a grid.
* **Thickness:** The thickness of the container's border.
* **Thickness opacity:** The transparency of the border.
* **Corner radius:** The roundness of the container's corners.
* **Content padding:** The space between the container's border and the content inside.
* **Item gap on desktop:** The space between each product on desktop screens.
* **Item gap on mobile:** The space between each product on mobile screens.
* **Shadow:** Adds a shadow effect to the container.
* **Shadow opacity:** Controls the transparency of the shadow.

<figure><img src="/files/DqPfT1cuRFpSCOm9PMvz" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/HNKq5q75QlaWxkTjXIMe" alt=""><figcaption></figcaption></figure>

#### Slider

These settings control the product carousel.

* **Auto rotate slides:** This is disabled. If enabled, the slider would automatically cycle through the products.
* **Change slides every:** Sets the time before the slide changes.
* **Number of products per page:** This determines how many products are visible at once in the slider.
* **Pagination:** This controls the style of the navigation indicators for the slider.

<figure><img src="/files/ruFEqwnhDMSqxCpc9KM0" alt=""><figcaption></figcaption></figure>

#### Product settings

These settings apply to the individual product items within the slider.

* **Use image corner radius from theme settings:** This is disabled, allowing for a custom corner radius on product images that is independent of the main theme settings.
* **Image width:** Controls the width of the product images.
* **Media ratio:** Sets the aspect ratio for the product images.

<figure><img src="/files/pPPCz3FQZIVa0ABYlzLX" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/XnetQ3sdIlApcUrN1Brz" alt=""><figcaption></figcaption></figure>

**Color**

This section allows for detailed color customization of the block.

* **Color Scheme:** Applies a predefined set of colors from your theme's settings.
* **Custom color:** If enabled, it would let you override the theme's color scheme with manual color choices.

**Block spacing**

These settings control the space around the entire block.

* **Top margin**: This adds a certain of pixel of empty space above the block, separating it from the content above.
* **Bottom margin**: This adds a certain of pixel of empty space below the block, separating it from the content below.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.smind.io/in-app/library/product-blocks/related-products.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.