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

# Related Products

Based on the product currently being viewed, this section displays similar products, or products that are frequently bought together with this product. If you want to add related products on product detail pages on top of the automatically generated recommendations Shopify provides, You must install [Shopify Search & Discovery](broken://pages/WAfZn55HbeW8WxpceKJk).

The **Related products** section enable only for product template.

## Section settings

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></td></tr></tbody></table>

## Section header settings

<table><thead><tr><th width="265">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td>Add text to display as a caption.</td></tr><tr><td>Heading</td><td>Add text to display as a heading.</td></tr><tr><td>Heading size</td><td><p>Change the size of the heading:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Description</td><td>Add text to display as a description.</td></tr><tr><td>Alignment</td><td><p>Determine the section header alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Main section settings

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Maximum products to show</td><td>Determine the maximum of products can be shown. Can be from 2 to 10, increasing arithmetically of 1.</td></tr><tr><td>Section layout</td><td><p>Change the section layout:</p><ul><li><strong>Grid</strong></li><li><strong>Slider</strong></li></ul></td></tr><tr><td>Number of columns</td><td>Determine the number of columns can be shown per row. Can be from 1 to 5, increasing arithmetically of 1.<br>(<em>Number of columns is automatically optimized for mobile</em>)</td></tr></tbody></table>

## Product card settings

<table><thead><tr><th width="293">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image</strong>: use the aspect ratio of the product image.</li><li><strong>Square</strong>: Crop the images to use a 1:1 ratio.</li><li><strong>Portrait</strong>: Crop the images to use a 2:3 ratio.</li></ul></td></tr><tr><td>Image border thickness</td><td>Set the width of an image's four borders. Can be from 0px to 10px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Image border opacity</td><td>Set the opacity level for an image's four borders. Can be from 0% to 100%, increasing arithmetically of 5%. </td></tr><tr><td>Image corner radius</td><td>Set the radius of the image's corners. Can be from 0px to 40px, increasing arithmetically of 1 pixel. </td></tr><tr><td>Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td>Show badges</td><td>Display badges of the products.</td></tr><tr><td>Show vendor</td><td>Display vendors of the products.</td></tr><tr><td>Show product rating</td><td>Display the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.</td></tr><tr><td>Show color swatch</td><td>Display swatches allows you to see color options.</td></tr><tr><td>Content alignment</td><td><p>Determine the content alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>