# Related Products Section

> **What You'll Learn**
>
> * How to display related products with horizontal scrolling carousel
> * Advanced customization options for layout, typography, and spacing
> * How to configure product recommendations and navigation
> * Best practices for improving cross-selling and upselling

***

## 🎯 What is the Related Products Section?

The **Related Products Section** is a dynamic product recommendation carousel that appears on product pages to showcase related, complementary, or similar products. This section uses Shopify's built-in product recommendation engine to automatically suggest relevant products to customers, helping increase average order value and improve the shopping experience.

**Key Features:**

* Automatic product recommendations based on Shopify's algorithm
* Horizontal scrolling carousel with navigation arrows
* Customizable product display options (titles, prices, badges)
* Advanced typography and spacing controls
* Mobile-responsive design with touch navigation
* Real-time product data loading

Available in:

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

> 💡 **Note**: This section is only available on product pages and uses Shopify's product recommendations API.

***

## 🔧 How to Add Related Products Section

1. Go to **Online Store > Themes > Customize**
2. Navigate to **Products > Default product**
3. Scroll down to the bottom of the section list
4. Click **Add section**
5. Select **Product Recommendations** or **Related Products**
6. Configure the display options and styling

> ⚠️ **Important**: This section only appears on actual product pages, not in the theme editor preview when viewing collections or the homepage.

***

## 📋 Content & Display Options

### **Section Header**

**Section Title**

* Customize the heading text (e.g., "You May Also Like", "Related Products")
* Leave blank to hide the section header entirely
* Default: "Related Products"

**Products Limit**

* Set the maximum number of products to display (1-8 products)
* Shopify automatically filters and selects the most relevant products
* Default: 4 products

### **Product Information Display**

**Show Product Titles**

* Toggle product names on/off
* Essential for product identification
* Recommended: Keep enabled

**Show Product Prices**

* Display product pricing below titles
* Helps customers make informed decisions
* Includes sale price display when applicable

**Show Compare-at Price**

* Display original price when products are on sale
* Shows crossed-out pricing for transparency
* Automatically appears only when products have sale pricing

**Product Badges**

* **Show Sold Out Badge**: Indicates unavailable products
* **Show Sale Badge**: Highlights discounted items
* **Show Pre-Order Badge**: Marks upcoming products

***

## 🎨 Layout & Design Configuration

### **Product Grid Layout**

**Products per Row (Desktop)**

* Set how many products display across desktop screens (1-6 products)
* Default: 4 products
* Recommendation: 3-4 for optimal visual balance

**Products per Row (Mobile)**

* Control mobile display (1-3 products)
* Default: 2 products
* Mobile automatically enables horizontal scrolling

**Product Text Alignment**

* Align product titles and prices: Left, Center, or Right
* Center alignment creates a more polished appearance
* Left alignment offers better readability for longer product names

### **Navigation Controls**

**Arrow Navigation**

* Built-in left/right arrows for desktop navigation
* Customizable arrow color to match brand
* Automatically appears when more products exist than displayed

**Touch/Swipe Navigation**

* Native touch scrolling support on mobile devices
* Smooth momentum scrolling for better user experience
* No additional setup required

***

## ✏️ Typography Customization

### **Font Sizes**

All text elements can be customized separately for desktop and mobile:

**Section Title Size**

* Desktop: 16-32px range
* Mobile: 14-24px range
* Default: 20px desktop, 18px mobile

**Product Title Size**

* Desktop: 12-20px range
* Mobile: 10-16px range
* Default: 14px desktop, 12px mobile

**Product Price Size**

* Desktop: 12-18px range
* Mobile: 10-14px range
* Default: 14px desktop, 12px mobile

### **Font Weight Options**

**Bold Section Title**

* Toggle to make section header bold (700 weight)
* Helps section stand out from product content
* Recommended for clear visual hierarchy

**Bold Product Title**

* Make product names bold for emphasis
* Useful for minimalist designs where text needs more presence
* Consider readability impact on longer product names

**Bold View Link**

* Make arrow navigation controls bold
* Subtle enhancement for navigation visibility

***

## 🎨 Color Customization

### **Background & Section Colors**

**Background Color**

* Set section background color
* Use transparent for seamless page integration
* Consider subtle background colors for section definition

**Section Title Color**

* Customize header text color
* Should contrast well with background
* Typically matches primary brand color

**Arrow Color**

* Set navigation arrow color
* Should be visible against background
* Often uses accent color or neutral gray

### **Product Information Colors**

**Product Title Color**

* Color for product names
* Usually neutral (black, dark gray) for readability
* Should maintain good contrast for accessibility

**Product Price Color**

* Color for pricing information
* Often matches product title color for consistency
* May use accent color to highlight pricing

### **Product Badge Colors**

Each badge type has separate text and background color controls:

**Pre-Order Badge**

* Text color and background color
* Often uses blue or neutral tones
* Should communicate "coming soon" clearly

**Sold Out Badge**

* Text color and background color
* Typically uses gray or muted colors
* Communicates unavailability clearly

**On Sale Badge**

* Text color and background color
* Usually uses red, orange, or brand accent
* Creates urgency and highlights savings

**Compare-at Price Color**

* Color for crossed-out original pricing
* Typically gray or muted to de-emphasize
* Should be readable but less prominent than sale price

***

## 📏 Advanced Spacing Controls

### **Section Spacing**

**Top Spacing**

* Desktop: 0-200px range, default 20px
* Mobile: 0-100px range, default 16px
* Controls space above the entire section

**Bottom Spacing**

* Desktop: 0-200px range, default 20px
* Mobile: 0-100px range, default 16px
* Controls space below the entire section

### **Internal Spacing**

**Header to Products Spacing**

* Range: 8-80px, default 32px
* Space between section title and product grid
* Helps create visual separation and breathing room

**Image to Info Spacing**

* Range: 8-80px, default 24px
* Vertical space between product image and text information
* Affects the visual connection between image and details

**Title to Price Spacing**

* Range: 4-40px, default 8px
* Space between product name and pricing
* Keep minimal for tight information grouping

**Product Gap**

* Desktop: 8-160px range, default 16px
* Mobile: 8-160px range, default 16px
* Horizontal space between products in the carousel

***

## 🚀 How Product Recommendations Work

### **Shopify's Algorithm**

The Related Products section uses Shopify's machine learning algorithm to determine which products to show:

**Recommendation Factors:**

* Products frequently bought together
* Products viewed together in the same session
* Similar product categories and tags
* Complementary product relationships
* Customer behavior patterns

**Automatic Updates:**

* Recommendations improve over time as more data is collected
* No manual configuration required for product relationships
* Algorithm adapts to seasonal trends and customer preferences

### **Fallback Behavior**

When insufficient data exists for recommendations:

* Section may display products from the same collection
* Random products from store inventory may appear
* Section can be hidden if no suitable products found

***

## 📱 Mobile Optimization

### **Responsive Design**

**Mobile Layout**

* Automatically adjusts products per row for mobile screens
* Touch-friendly navigation with swipe gestures
* Optimized spacing for touch targets

**Performance Optimization**

* Lazy loading for improved page speed
* Compressed images for faster loading
* Minimal JavaScript for smooth scrolling

**User Experience**

* Smooth momentum scrolling
* Clear visual indicators for more products
* Easy-to-tap product images and information

***

## 💡 Best Practices

### **Content Strategy**

**Section Placement**

* Add near the bottom of product pages
* Place after main product content but before footer
* Consider adding after product reviews if available

**Product Information**

* Always show product titles for clarity
* Include prices for transparent shopping experience
* Use badges strategically to highlight key information

### **Design Recommendations**

**Visual Hierarchy**

* Keep section title clear but not overpowering
* Ensure product images are the primary focus
* Use consistent spacing throughout the section

**Color Strategy**

* Maintain brand consistency with existing product page colors
* Ensure sufficient contrast for accessibility
* Use sale badges sparingly to maintain impact

### **Performance Considerations**

**Image Optimization**

* Ensure related products have optimized images
* Use consistent aspect ratios for visual harmony
* Compress images without sacrificing quality

**Loading Strategy**

* Section loads after main product content
* Graceful fallback if recommendations fail to load
* Minimal impact on page load speed

***

## 🔧 Troubleshooting

### **Section Not Appearing**

**Check Product Status**

* Ensure viewing an actual product page (not collection)
* Verify product is published and available
* Check that store has multiple products for recommendations

**Theme Configuration**

* Confirm section is added to product template
* Verify section isn't hidden or disabled
* Check that product recommendation limits aren't set to 0

### **No Products Showing**

**Data Requirements**

* Store needs sufficient product data for recommendations
* Algorithm requires time to learn customer behavior patterns
* Consider manually adding products to collections as fallback

**API Limitations**

* Shopify's recommendations API has daily limits
* High-traffic stores may occasionally see empty sections
* Algorithm performance improves with store age and traffic

### **Styling Issues**

**Responsive Problems**

* Test on actual mobile devices, not just browser resizing
* Check that mobile spacing values are appropriate
* Verify touch targets are large enough for easy interaction

**Color Contrast**

* Ensure text remains readable on chosen backgrounds
* Test with accessibility tools for WCAG compliance
* Consider different lighting conditions for mobile viewing

***

## 📊 Performance Impact

### **Loading Behavior**

**Asynchronous Loading**

* Section content loads after page initial render
* Doesn't block main product page content
* Graceful degradation if API calls fail

**Data Usage**

* Minimal additional data transfer
* Cached product information when possible
* Optimized API calls to Shopify's servers

### **SEO Considerations**

**Content Value**

* Provides additional internal linking opportunities
* Helps search engines understand product relationships
* Can improve time on site and reduce bounce rate

**Page Speed**

* Minimal impact on core page load metrics
* Section loads progressively
* Optimized for mobile Core Web Vitals

***

The Related Products section is a powerful tool for increasing sales and improving customer experience. When properly configured, it can significantly boost average order value while providing genuine value to customers by surfacing relevant product options.

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# 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://docs.openspaces.design/readme-1/sections-and-features/related-products-section.md?ask=<question>
```

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.