Related Products Section
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
🎯 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
Go to Online Store > Themes > Customize
Navigate to Products > Default product
Scroll down to the bottom of the section list
Click Add section
Select Product Recommendations or Related Products
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: [email protected]
💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website
Last updated