A custom product recommendation section, like a "You May Also Like" feature, can boost your Shopify store’s sales by encouraging cross-selling. In this step-by-step tutorial, we’ll show you how to create a dynamic product recommendation section using Liquid code—no apps needed. Perfect for store owners looking to increase average order value!

Why Add a Product Recommendation Section to Your Shopify Store?

Increase Sales: Suggest related products to encourage additional purchases.
Enhance User Experience: Help customers discover relevant items easily.
Cost-Effective: Avoid app fees with Shopify’s built-in theme editor.
SEO Benefits: Keep users engaged longer, improving dwell time for rankings.

For more Shopify customization ideas, check out our others Shopify Sections Guide.

Prerequisites

Before starting, ensure you have:

A Shopify account with admin access.
Basic knowledge of HTML, CSS, and Shopify’s Liquid.
A duplicated theme for safety (always back up before editing code).

Step 1: Understand Product Recommendations in Shopify

A product recommendation section displays related products on a product page, typically based on collections, tags, or manual curation. We’ll use Liquid to fetch products from the same collection as the current product, creating a dynamic "You May Also Like" section.

Learn more about Liquid in Shopify’s Liquid Reference.

‍

Step 2: Access Your Shopify Theme Editor

Log in to your Shopify admin panel.
Navigate to Online Store > Themes.
Find your active theme, click Actions, then select Edit Code.

‍

Step 3: Create the Product Recommendation Section

We’ll build a custom section that displays up to four related products in a grid format.

3.1: Create a New Section File

In the theme editor, locate the Sections folder.
Click Add a new section and name it product-recommendations.
Add the following Liquid code:

{% schema %}
{
  "name": "Product Recommendations",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "You May Also Like"
    },
    {
      "type": "number",
      "id": "product_limit",
      "label": "Number of Products to Show",
      "default": 4
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f9f9f9"
    }
  ],
  "presets": [
    {
      "name": "Product Recommendations",
      "category": "Product"
    }
  ]
}
{% endschema %}

<div class="product-recommendations" style="background-color: {{ section.settings.background_color }};">
  <div class="recommendations-container">
    {% if section.settings.section_title != blank %}
      <h2 class="recommendations-title">{{ section.settings.section_title }}</h2>
    {% endif %}
    <div class="recommendations-grid">
      {% assign current_product = product %}
      {% assign collection = product.collections.first %}
      {% if collection %}
        {% for product in collection.products limit: section.settings.product_limit %}
          {% if product.handle != current_product.handle %}
            <div class="recommendation-item">
              <a href="{{ product.url }}" class="recommendation-link">
                {% if product.featured_image %}
                  <img src="{{ product.featured_image | img_url: '300x' }}" alt="{{ product.title | escape }}" class="recommendation-image">
                {% endif %}
                <h3 class="recommendation-title">{{ product.title }}</h3>
                <p class="recommendation-price">{{ product.price | money }}</p>
              </a>
            </div>
          {% endif %}
        {% endfor %}
      {% else %}
        <p>No related products found.</p>
      {% endif %}
    </div>
  </div>
</div>

<style>
  .product-recommendations {
    padding: 40px 20px;
  }

  .recommendations-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .recommendations-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
  }

  .recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .recommendation-item {
    text-align: center;
  }

  .recommendation-link {
    text-decoration: none;
    color: inherit;
  }

  .recommendation-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
  }

  .recommendation-title {
    font-size: 16px;
    margin: 10px 0 5px;
    color: #333;
  }

  .recommendation-price {
    font-size: 14px;
    color: #555;
  }

  @media (max-width: 768px) {
    .recommendations-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

‍

Save the file.

Code Breakdown

Schema Settings: Defines customizable fields for the section title, product limit, and background color, accessible in the theme customizer.
Liquid Logic: Fetches products from the current product’s first collection, excluding the current product to avoid duplication.
HTML Structure: Creates a responsive grid for product cards with images, titles, and prices.
CSS Styling: Ensures a clean, mobile-friendly layout with a grid system and subtle hover effects.

‍

Step 4: Add the Section to Your Product Page

In the theme editor, click Customize (or go to Online Store > Themes > Customize).
Navigate to a Product page template.
Click Add Section in the sidebar.
Select Product Recommendations under the Product category.
Customize settings (e.g., change the title or number of products).
Click Save.

Alternative Method: If your theme doesn’t support adding sections to product pages, add this line to product.liquid where you want the section:

{% section 'product-recommendations' %}

‍

Step 5: Test Your Recommendation Section

Preview a product page to ensure the "You May Also Like" section displays related products.
Verify that clicking a product link navigates to the correct product page.
Test on mobile and desktop to confirm the grid layout is responsive.
Check that the section skips the current product and respects the product limit.

‍

Step 6: Customize Further (Optional)

Refine Recommendations: Modify the Liquid code to filter by tags instead of collections (e.g., {% for product in collections.all.products | where: 'tags', 'related' %}).
Add Styling: Adjust the background-color, font-size, or gap in the CSS to match your brand.
Track Performance: Use Shopify Analytics to monitor clicks on recommended products and measure uplift in sales.

For more advanced section ideas, explore our Shopify Sections Guide.

‍

Troubleshooting Tips

No Products Showing? Ensure the product is assigned to a collection. If not, add a fallback message or use collections.all.
Duplicate Products? Double-check the if product.handle != current_product.handle condition.
Layout Issues? Adjust the grid-template-columns or gap in the CSS for better spacing.
Theme Conflicts? Test with a default Shopify theme (e.g., Dawn) to isolate issues.

For additional help, see Shopify’s Theme Development Documentation.

‍

Conclusion

Adding a custom product recommendation section to your Shopify store is a powerful way to drive cross-sales and enhance the shopping experience. With the Liquid code provided, you can create a dynamic "You May Also Like" feature without apps, saving costs and maintaining control. Implement it today and watch your average order value grow!

How to add a Custom Product Recommendation Section on Shopify