# 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fc0Q2hYpGslYbMzRFbzQM%2FRelated%20Product%201.gif?alt=media&#x26;token=5b25e5e4-2a43-4ec1-ad47-abcf585e1558" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F4TFbPaczpIdTlwVeChGb%2FRelated%20Product%201.png?alt=media&#x26;token=d4232849-3088-4b34-bd6a-f767b40a00b8" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FGJoJP7RokncoyUbr84XO%2FRelated%20Product%202.png?alt=media&#x26;token=81b6e82a-d87b-4248-a34d-b54a514bf2e8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZoJPC7A5dmN8JydbKQMx%2FRelated%20Product%203.png?alt=media&#x26;token=b403641e-2b52-4c67-b93f-faffe80475ba" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FpCuVPls3uCfkzZpz30GB%2FRelated%20Product%204.png?alt=media&#x26;token=4c48fa35-3b75-4985-9925-1b10a457cc9a" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FhDuBGFAtQfv0AtiY2gWo%2FRelated%20Product%205.png?alt=media&#x26;token=3eeb00f1-414e-4324-ab42-49bc9e2c3aa0" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FNGkvTSmrp7XSEq2yyCEr%2FRelated%20Product%206.png?alt=media&#x26;token=ab1ef1e9-c0fd-42c6-8f56-162a36227512" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FSKeRBTfMt29skWcc9pxm%2FProduct%20Bundles%207-1.png?alt=media&#x26;token=4f275fdf-1f66-44f1-8690-a233fd23f025" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FRPFXoCYdQ4xX4X42kb6n%2FProduct%20Bundles%208-1.png?alt=media&#x26;token=cfbb4262-3b25-4b59-8c18-5885d931d87b" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FHok3qfIL9LKx44AJPurv%2FRelated%20Product%207.png?alt=media&#x26;token=866efc93-b4fd-4ca4-9372-02ca6202bc40" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FQ5IqvHvNrSLbofvNg9g3%2FRelated%20Product%208.png?alt=media&#x26;token=ca62cf54-41cb-417d-a46d-fb5353302c9b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FI86EM8nPVoJHleXUcdYw%2FRelated%20Product%209.png?alt=media&#x26;token=88a2ece9-f58f-4c57-a3ba-277e56bb7bf1" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FI2vJsHMCDwV6FEojt4w9%2Fimage%201038.png?alt=media&#x26;token=fdade919-a3fc-4dbf-a5d1-852d50408e87" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FRMMJIcLgiuelCRAA3lP7%2FRelated%20Product%2010.png?alt=media&#x26;token=496b94b6-f3bf-4b41-8b00-246b67148ba0" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FNNBi7ZnoDhuR4u1SLAnz%2Fimage%201036.png?alt=media&#x26;token=3be4023d-23b6-4e08-8981-ad0bef4262e3" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F4YS0SUkL1PhtaREJEPyC%2Fimage%201037.png?alt=media&#x26;token=78798fba-b4ac-4ead-a6ca-012b1f012e2f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fe5UuJh1gyQTOzk3MH4Ve%2FRelated%20Product%2011.png?alt=media&#x26;token=6d9f77af-af1b-41f3-a694-25115f2dc922" 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.