> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/related-products.md).

# Related products

**Related products** is the row of other items shown under the buying block on a product page. It gives a customer who is not convinced by this product somewhere to go instead of leaving the store, and it lets a customer who is convinced find the matching pieces. Shoppers see it after they have scrolled past the price and the description.

Because Shopify picks the products from the same catalogue relationships used elsewhere in the store, the row stays relevant without you maintaining a list per product.

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

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector and select **Products**, then **Default product**.
3. In the left sidebar, click **Add section** and choose **Related products**.
4. Drag it under **Product information**, adjust the settings, then click **Save**.
   {% endhint %}

*Result:* a row of suggested products appears below the buying block in the preview.

## Section settings

### General setting <a href="#general-setting" id="general-setting"></a>

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the row stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the products run close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: they line up with the buying block above, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the row fills the whole screen and rescales itself to fit it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colours behind the row, taken from the schemes in <strong>Theme settings > Colors</strong>. A different scheme from the section above marks the row as a change of subject.</td></tr><tr><td><strong>Heading</strong></td><td>The line customers read above the row, for example <em>You may also like</em>. Phrase it as a suggestion rather than a label.</td></tr><tr><td><strong>Description</strong></td><td>An optional line under that heading, useful when you want to say why these products are shown.</td></tr><tr><td><strong>Heading size</strong></td><td>How large that line appears. Keep it smaller than the product title above so the row reads as secondary content.</td></tr><tr><td><strong>Alignment</strong></td><td><p>Where the heading and the line under it sit above the row.</p><ul><li><strong>Left</strong>: reads first and lines up with the products underneath.</li><li><strong>Center</strong>: suits a short heading on a wide row.</li><li><strong>Right</strong>: keeps the text clear of carousel arrows placed on the left.</li></ul></td></tr></tbody></table>

### Collection <a href="#collection" id="collection"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Maximum items to show</strong></td><td>How many suggested products the row can hold in total. Minimum: 2. Maximum: 12. Keep it low if you want customers back on the product they came for.</td></tr><tr><td><strong>Items per row on desktop</strong></td><td>How many products a desktop customer sees at once before scrolling or clicking through. Minimum: 2. Maximum: 6. More per row means smaller images.</td></tr><tr><td><strong>Column gap</strong></td><td><p>How much air sits between the products.</p><ul><li><strong>No gap</strong>: the products touch, giving a dense grid.</li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong>: each product stands on its own, which suits a short row.</li></ul></td></tr></tbody></table>

### Carousel settings <a href="#carousel-settings" id="carousel-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel</strong></td><td>Puts the products in a slider a customer swipes through, instead of a grid that adds height to the page. Useful when you show more items than fit in one row.</td></tr><tr><td><strong>Show navigation</strong></td><td>Adds the previous and next arrows, so desktop customers have something to click rather than relying on a swipe.</td></tr><tr><td><strong>Navigation position</strong></td><td><p>Where those arrows sit. Only matters when <strong>Show navigation</strong> is on.</p><ul><li>Default: beside the products, where the hand already is.</li><li>Section header: up on the heading line, which keeps the row itself clean.</li></ul></td></tr><tr><td><strong>Show pagination</strong></td><td>Adds the row of dots under the slider, telling customers how much more there is to see.</td></tr><tr><td><strong>Reveal next slide</strong></td><td>Leaves part of the following product visible at the edge, a visual hint that the row scrolls.</td></tr><tr><td><strong>Items per row on mobile</strong></td><td>How many products fit across a phone screen. One keeps images large, two lets customers compare at a glance.</td></tr></tbody></table>

### Section padding <a href="#section-padding" id="section-padding"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Adds space above the row. Increase it when the suggestions crowd the buying block above.</td></tr><tr><td><strong>Bottom</strong></td><td>Adds space under the row, separating it from the footer or from the recently viewed row.</td></tr></tbody></table>

### Impact outside the theme editor <a href="#impact-outside" id="impact-outside"></a>

The section applies to every product using the **Default product** template, and each product page fills it with its own suggestions. The products themselves are drawn by Shopify, so what appears depends on your catalogue rather than on the theme editor. Each card follows the settings in **Theme settings > Product cards**, which is where the image ratio, badges, and quick add behaviour of the row are decided.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Recently product](/velare/customize-your-pages/product-page/page-template-sections/recently-product.md): the other recommendation row, built from what this customer already viewed
* [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md): the buying block this row sits under
* [Product cards](/velare/customize-your-pages/product-cards.md): how each product in this row is presented
* [Complementary products](/velare/buy-and-install/create-required-metafields/metafields/complementary-products.md): the hand picked alternative shown inside the buying block


---

# 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/related-products.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.