> 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.