# 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).
### **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.**
## 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.
#### 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 |
---
# Agent Instructions: 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:
```
GET https://halosoft.gitbook.io/ella-7-documentation/product-page/product-recommendations.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.