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.

For Plain Jane and Plain Jane Interactive

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

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.

  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

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?