> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/product-page/product-recommendations.md).

# Product Recommendations

The product recommendations that display in the section are based on products that are commonly purchased together or products in related collections. For more information, see [Product recommendations](https://shopify.dev/themes/product-merchandising/recommendations).

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

### **How to add the Product Recommendations section?**

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. In the **Templates ->** **Add section ->** choose **Product Recommendations.**

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

## Product Recommendations - Settings Guide

This guide explains all available settings for the **Product Recommendations** in order from top to bottom as they appear in the Theme Editor.&#x20;

#### Product Settings

| Setting | Type      | Description                                                               | Visibility     |
| ------- | --------- | ------------------------------------------------------------------------- | -------------- |
| Product | `product` | Select specific product for recommendations (defaults to current product) | Always visible |
| Type    | `select`  | Choose recommendation algorithm (related/complementary)                   | Always visible |

#### Layout Settings

| Setting                      | Type       | Description                                        | Visibility              |
| ---------------------------- | ---------- | -------------------------------------------------- | ----------------------- |
| Layout style                 | `select`   | Choose between grid or carousel layout             | Always visible          |
| Carousel on mobile           | `checkbox` | Enable carousel behavior on mobile for grid layout | `layout_type == 'grid'` |
| Maximum products to show     | `range`    | Number of products to display (2-25)               | Always visible          |
| Number of columns on desktop | `range`    | Desktop column count (1-6)                         | Always visible          |
| Horizontal gap               | `range`    | Spacing between columns (0-100px)                  | Always visible          |
| Vertical gap                 | `range`    | Spacing between rows (0-100px)                     | `layout_type == 'grid'` |

#### Show More Settings (Grid Layout Only)

| Setting             | Type       | Description                                  | Visibility                                                                |
| ------------------- | ---------- | -------------------------------------------- | ------------------------------------------------------------------------- |
| Enable              | `checkbox` | Enable show more functionality               | `layout_type == 'grid'`                                                   |
| Text                | `text`     | Button text for show more                    | `layout_type == 'grid'`                                                   |
| Font size           | `select`   | Button font size (10px-28px)                 | `show_more_product == true`                                               |
| Font weight         | `select`   | Button font weight (thin to black)           | `show_more_product == true`                                               |
| Width desktop       | `select`   | Button width on desktop (fit-content/custom) | Always visible                                                            |
| Unit                | `select`   | Unit for custom width (pixel/percent)        | `show_more_product_width == 'custom'`                                     |
| Custom width        | `range`    | Custom width percentage (0-100%)             | `show_more_product_width == 'custom' AND unit == 'percent'`               |
| Custom width        | `range`    | Custom width pixels (100-500px)              | `show_more_product_width == 'custom' AND unit == 'pixel'`                 |
| Width mobile        | `select`   | Button width on mobile (fit-content/custom)  | Always visible                                                            |
| Unit mobile         | `select`   | Unit for mobile custom width (pixel/percent) | `show_more_product_width_mobile == 'custom'`                              |
| Custom width mobile | `range`    | Mobile custom width percentage (0-100%)      | `show_more_product_width_mobile == 'custom' AND unit_mobile == 'percent'` |
| Custom width mobile | `range`    | Mobile custom width pixels (100-500px)       | `show_more_product_width_mobile == 'custom' AND unit_mobile == 'pixel'`   |
| Spacing top         | `range`    | Top spacing for show more button (0-100px)   | `show_more_product == true`                                               |

#### Carousel Settings

| Setting             | Type       | Description                                                | Visibility                                                              |
| ------------------- | ---------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
| Loop                | `checkbox` | Enable infinite loop for carousel                          | `layout_type == 'carousel'`                                             |
| Full width          | `checkbox` | Extend carousel beyond page margins                        | `page_width == 'page-width' AND layout_type == 'carousel'`              |
| Navigation          | `select`   | Navigation type (none/arrows/pagination/both)              | `layout_type == 'carousel'`                                             |
| Arrows position     | `select`   | Position of navigation arrows (inside/bottom)              | `layout_type == 'carousel' AND navigation contains 'arrows'`            |
| Pagination type     | `select`   | Style of pagination (bullets/dynamic/progressbar/fraction) | `layout_type == 'carousel' AND navigation contains 'pagination'`        |
| Dots top offset     | `range`    | Spacing above pagination dots (20-100px)                   | `pagination_type == 'bullets' AND navigation contains 'pagination'`     |
| Progress top offset | `range`    | Spacing above progress bar (20-100px)                      | `pagination_type == 'progressbar' AND navigation contains 'pagination'` |

#### Section Layout Settings

| Setting           | Type           | Description                                             | Visibility               |
| ----------------- | -------------- | ------------------------------------------------------- | ------------------------ |
| Width             | `select`       | Section width constraint (page-width/full-width/custom) | Always visible           |
| Custom page width | `range`        | Custom section width (1000-2000px)                      | `page_width == 'custom'` |
| Gap               | `range`        | General element spacing (0-100px)                       | Always visible           |
| Color scheme      | `color_scheme` | Section color scheme                                    | Always visible           |

#### Mobile Layout Settings

| Setting                     | Type     | Description               | Visibility     |
| --------------------------- | -------- | ------------------------- | -------------- |
| Number of columns on mobile | `select` | Mobile column count (1-2) | Always visible |

#### Spacing Settings

| Setting        | Type    | Description                          | Visibility     |
| -------------- | ------- | ------------------------------------ | -------------- |
| Padding top    | `range` | Top padding for section (0-100px)    | Always visible |
| Padding bottom | `range` | Bottom padding for section (0-100px) | Always visible |

### The section accepts various block types for content customization:

| Block Type | Description                | Visibility     |
| ---------- | -------------------------- | -------------- |
| `@theme`   | All theme blocks available | Always visible |
| `@app`     | All app blocks available   | Always visible |
| `text`     | Text content blocks        | Always visible |
| `icon`     | Icon display blocks        | Always visible |
| `image`    | Image content blocks       | Always visible |
| `button`   | Button/CTA blocks          | Always visible |
| `video`    | Video content blocks       | Always visible |
| `group`    | Container blocks           | Always visible |
| `spacer`   | Spacing elements           | Always visible |
| `_divider` | Divider elements           | Always visible |