MultipurposeSupport

Multipurpose theme documentation

Multipurpose Fashion Theme

Related Products

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Product Recommendation Sections > Related Products

Overview

The Related products section shows products from the same collection as the current product (excluding the current product). It appears on product pages to encourage cross-sell and discovery. Template-restricted: add it to the product template. Uses theme product cards and respects Theme settings.

Where to Add This Section

  1. Go to Online Store > Themes > Customize.
  2. Select Product or Default product template.
  3. Scroll to bottom or desired position.
  4. Click Add section.
  5. Choose Related products.
  6. Save.

📷 Image placeholder: Add a screenshot of Related products on product page.

Placeholder: Related products on product page

Quick Setup (2 Steps)

  1. Add section — Add Related products to product template.
  2. Configure — Set heading, products count, products per row.

Section Settings

Setting Description
Heading Section title (e.g. "You may also like")
Heading size Small, Medium, Large
Heading position Left, Center
Products count Number to show (4–8 typical)
Products per row Desktop columns
Enable swipe on mobile Horizontal swipe
Show divider Divider below heading

Step-by-Step Setup

Step 1: Add the section

  1. Go to Customize > Product template.
  2. Scroll to desired position (often below product description or add to cart).
  3. Click Add section > Related products.
  4. Save.

Step 2: Configure

  1. Heading — "You may also like", "Related products", or similar.
  2. Products count — 4–6 typical; 8 if collection has many products.
  3. Products per row — 3 or 4 for desktop.
  4. Enable swipe on mobile — On for horizontal carousel on phones.
  5. Show divider — Enable if desired for separation.
  6. Save.

Behavior

  • Uses current product's collection (product.collection) to find related products.
  • Excludes the current product from the list.
  • If the product has multiple collections, the theme typically uses the first or main one.
  • Falls back to other products if the collection has few items.
  • Product tile styling comes from Theme settings > Product tiles.

Use cases

  • Cross-sell — Products in the same category
  • Completion — Accessories that go with the product
  • Discovery — Alternative options in the same collection

For merchants

  • Use for cross-sell within a category.
  • 4–6 products is typical.
  • Ensure products have images and are published.
  • Place below product info for maximum visibility.

Common mistakes

Mistake Fix
Section not showing Ensure you're on Product template; add section there
Empty or few products Product's collection needs more products
Too many products Set Products count to 4–6
Wrong placement Drag section to desired position on template

Related Products – FAQs

It automatically displays products recommended by Shopify that are related to the currently viewed product. This helps increase cross-selling and product discovery.

The section uses Shopify’s Product Recommendations API with intent=related. Shopify determines recommendations based on store data and product relationships.

Placeholder cards are shown while recommendations are loading. When the section enters the viewport, it fetches data and replaces placeholders with actual products.

If Shopify returns no related products for the current item, the section automatically hides to prevent empty layout space.

You can configure between 2 and 10 products using the “Products to show” setting in the section options.

Yes. The “Desktop products per row” setting allows you to choose between 2 and 5 products per row. Tablet and mobile layouts adjust automatically.

Yes. Enable the “Swipe on mobile” option to turn the grid into a horizontal scroll carousel on small screens.

Yes. You can edit the heading text, size, and alignment (left, center, right) directly in the section settings.

The section is optimized for performance. It loads recommendations only when the section becomes visible, reducing initial page load impact.

Yes. The section respects the store’s language direction settings and automatically adjusts layout for RTL languages.

Visual Comparison – Recently Viewed vs Related Products

Feature Recently Viewed Related Products
Purpose Helps customers return to products they previously viewed Suggests additional products that are algorithmically related
Data Source Customer browser history (localStorage) Shopify Product Recommendations API
Personalized Per Visitor Yes – Unique for each visitor No – Based on Shopify recommendation logic
Requires JavaScript Yes – Fully JavaScript driven Yes – Uses Section Rendering API fetch
Displays Current Product No – Automatically excluded No – Automatically excluded
May Not Appear If No products have been viewed yet No recommendations are returned
Best For Improving navigation and returning users to previous items Cross selling and increasing average order value
Merchant Control Limited – Based on visitor browsing behavior Limited – Controlled by Shopify recommendation engine
Performance Model Loads product data dynamically after page load Fetches recommended products when section enters viewport
Ideal Placement Lower on product page for return navigation Below product details for upsell suggestions
← Previous: Recently Viewed Next: Product Recommendation Sections →

Questions? Chat with us.

Ask questions about the theme docs

Hi! I'm your theme documentation assistant. Ask me anything about the Multipurpose theme setup, sections, or settings.

AI answers from theme docs