How To Set Up Magento 2 Related Products Slider To Boost Sales?

How To Set Up Magento 2 Related Products Slider To Boost Sales?

Want to boost your store's product visibility and increase sales? The Magento 2 Related Products Slider helps you display relevant products effectively.

This tutorial will cover how to set up and configure a related product slider in Magento 2.

Best Magento Hosting now

Key Takeaways

  • Enhance customer experience and boost sales.
  • Magento 2 auto related products slider helps boost product visibility.
  • Encourage customers to make additional purchases.
  • Configure and customize your store's needs.
  • Display related products seamlessly across your store.
  • Work on product, category, and CMS pages.

Reasons To Automatic Related Products Blocks

1. Boost Sales by Expanding the Shopping Cart Size

Offering more product suggestions can significantly increase revenue. Customers are introduced to additional products, encouraging them to purchase more. It helps clear out inventory faster and provides customers with valuable complementary items.

For example, if a customer is buying a smartphone, showing related items can prompt additional purchases. Examples include phone cases, screen protectors, or wireless earbuds. This not only increases the average order value but also enhances the customer's overall product experience.

2. Enhance Site Performance

The extension uses AJAX loading technology to enhance user experience. It ensures smooth on-site navigation. Also, loading the related product block along with the page content can be beneficial for SEO.

3. Create a Personalized Experience

magento 2 related products slider with personalized recommendations for customers

Personalization is a top priority for brands, and customers expect it, too. Admins can create unlimited rules for each block and customize block names to fit their goals. For example, instead of using "Related products", more engaging titles like "You'll love these" or "Best for you" can attract customers more effectively.

For instance, if a customer frequently browses sports equipment, the slider might prioritize related sports items. This level of personalization makes customers feel understood, leading to higher conversion rates. It also significantly increases the relevance of product suggestions.

4. Unlimited Blocks with Flexible Rules

While Magento 2's default settings offer limited blocks, the Auto Related Products extension allows unlimited flexibility. You can create as many blocks as needed and configure custom rules for each. All product types are supported, and you can display additional details. For example, price, reviews, and buttons like "Add to Compare" and "Add to Wishlist".

5. Promote Items

promoting items through magento 2 related products slider to boost sales

You can have full control over which products to feature and in what order. You can highlight cross-sell, upsell, new products, bestsellers, daily deals, and more. Products can be sorted by name ("A-Z", "Z-A"), newest, or most-viewed. These features are great for clearing low-sale inventory. They are used to promote new products or showcase bestsellers.

For example, sorting by "newest" can help introduce customers to fresh inventory. It creates buzz around new product lines. Sorting by "most-viewed" leverages social proof. It shows customers what's popular among other shoppers. To clear low-sale inventory, you could create a special "Don't Miss Out" slider. It should feature these items alongside popular products, boosting their visibility and sales.

6. Place Automatic Related Products Blocks Anywhere

placing magento 2 related product blocks on various store pages for better visibility

You can easily place related product blocks wherever they are most effective. For example, above or below content, floating on the right or left, or by inserting widgets. It allows you to feature related products at key customer touchpoints throughout your store.

Optimize And Customize Product Slider Display In Magento

Tip Description
Customize the Slider Template - Access the slider's template files in your Magento 2 theme directory.
- Modify the HTML structure and CSS classes to achieve your desired layout.
Display Essential Product Details - Include essential product details in the slider.
- Inform customers without requiring them to click on each product.
Use the Magento Admin Panel - Manage and configure sliders through the Magento admin panel.
- Update content, change design elements, and adjust slider settings.
Choose the Right Slider Extension - Select a reliable Magento 2 slider extension. - Offer customizable settings and intuitive management tools.
Experiment with Animation Effects Use animation effects to make your slides lively and engaging.

For example, slider, fade-out, rotate-out, flip-out, roll-out, zoom-out, slide-out-left, slide-out-right, and light-speed-out.
Use Slick Slider - Use Slick Slider to create responsive and attractive image sliders.
- Customize the slider's template files to achieve your desired layout.
Add Custom CSS Classes Add custom CSS classes to the slider's template files to achieve your desired layout and design.

3 Best Magento 2 Related Products Extensions

1. Magento 2 Automatic Related Products Extension by MageAnts

mageants automatic related products extension for magento 2 to display relevant items

MageAnts Magento 2 Automatic Related Products Extension automatically displays related products to customers. It features up-sells, cross-sells, and relevant products in separate tabs. Thus, it provides a wider selection to encourage customers to make a purchase.

Features

  • Display multiple related products to the customers.
  • Merge automatically and manually related products to the customers.
  • Set flexible conditions for the product relationship mechanism for targeted sales.
  • Manage the number of products to be displayed in the slider.
  • Display multiple upsell and cross-sell products to the customers.
  • Working with multiple store views and customer groups.

Pricing

  • Community Edition + 3-Month Free Support + Installation- $99.00
  • Enterprise Edition + 6-Month Support + Installation- $248.00

2. Product Slider Extension for Magento by FMEExtensions

product slider extension by fmeextensions for magento 2 to showcase related items

FMEExtensions Product Slider Extension for Magento 2 increases sales and conversions. You can choose from various slider types to feature best selling, new arrivals, most viewed, or recently ordered items. You can also place sliders on different product, category, and CMS pages. Thus, you can limit their visibility to specific store views and customer groups.

Features

  • Display multiple sliders on your online store.
  • Choose from different slider types.
  • Exclude out-of-stock products from sliders.
  • Set the slider position and use shortcodes.
  • Restrict sliders by store views or customer groups.
  • Schedule sliders and customize their text.
  • Configure slider design and navigation options.
  • Approved by Magento Marketplace.

Pricing

  • Community Edition + Installation- $108.99
  • Enterprise Edition + Installation- $308.99

3. Magento Auto Related Products Extension by Amasty

amasty magento 2 automatic related products extension for cross-sell and upsell

Amasty Magento Auto Related Products Extension allows you to display related product offers dynamically on your website. It encourages customers to add complementary items to their orders. It helps you to adjust rules and conditions easily. You can also provide personalized recommendations similar to AI-powered solutions.

Features

  • Use a smart rule-based algorithm to offer related items, up-sells, and cross-sells.
  • Display related products based on viewing or purchase history.
  • Show items in categories, products, shopping cart pages, and custom positions.
  • Offer bundle packs with fixed or percentage discounts.
  • Create a dedicated CMS page featuring all bundles.
  • Monitor the efficiency of related offers with advanced analytics.
  • Import and export bundle pack data.
  • Hyva-ready storefront.

Pricing

  • Community Edition- $309.00
  • Enterprise Edition- $609.00
  • Magento Cloud Edition- $909.00

6 Steps To Configure Automatic Related Products In Magento 2

  1. Log in to your admin panel.
  2. Navigate to Stores > Configuration.

configuring automatic related products in magento 2 admin panel

  1. Under the 'General' tab, select "Yes" from the dropdown in the Enable ARP field.

seting up for magento 2 automatic related products in admin panel

  1. Under the 'Product Page' tab, select "Yes" from the Quick View dropdown.

configuring magento 2 related products slider settings

  1. Expand the 'Product Page Top' tab:
  • Select "Yes" from the Enable dropdown.
  • Choose "Slider" from the Block Layout dropdown.
  • Select "Yes" for the Show Add to Cart Button.
  • Enter a numeric value in 'Display Max Product to Show for Slider'.
  • Enter numeric values in the 'Product Slides to Show' and 'Product Slides to Scroll' fields.

final setup for magento 2 automatic related products slider

  1. Repeat the same configuration for the fields under the 'Product Page Bottom' tab.

To display automatic related products on category pages, select "Yes" from the Quick View dropdown under the 'Category Page' tab.

  1. Expand the 'Category Page Top' tab:
  • Select "Yes" from the Enable dropdown.
  • Choose "Slider" from the Block Layout dropdown.
  • Select "No" for the Show Add to Cart Button.
  • Enter numeric values in the 'Display Max Product to Show for Slider', 'Product Slides to Show', and 'Product Slides to Scroll' fields.

To display related products at the bottom of the category page, repeat the configuration for the 'Category Page Bottom' tab.

To display related products on the Order Success Page, follow these steps:

  1. Expand the Order Success Page tab.

    • Select "Yes" from the Enable dropdown.

    • Select "Yes" from the Quick View dropdown.

    • Choose "Slider" from the Block Layout dropdown.

    • Select "Yes" from the Show Add to Cart Button dropdown.

    • Enter numeric values in the 'Display Max Product to Show for Slider', 'Product Slides to Show', and 'Product Slides to Scroll' fields.

  2. Finally, click the 'Save Config' button in the top right corner to save your changes.

3 Methods To Add And Configure Related Product Blocks In Magento 2

Method 1: Using Magento 2 Settings

  1. From the Admin Panel, go to Catalog > Inventory > Products.
  2. Click the 'Edit' button for the product you want to configure.

setting up product visibility in magento 2 for enhanced user engagement

  1. Open the Related Products, Up-Sells, and Cross-Sells section.

options for related products, upsells, and cross-sells in magento 2 to boost sales

  1. Click the 'Add Related Products' button.
  2. Set "Number of Related Products".

adding related products to increase visibility and conversion rates in magento 2

Note: Magento 2 does not have a fixed limit for the number of related products shown on your product page. It adjusts based on screen width. Thus, it allows navigation or displays all items at once, depending on device size. To add 4 related products, expand the Related Products, Up-Sells, and Cross-Sells section. Set the number to "4".

  1. Use the product list filter to select the product to display as a related product.
  2. Click 'Add Selected Products' and save the product.

Method 2: Using Magento 2 Automatic Related Products Extension

  1. Install and set up the extension.

  2. Go to Stores > Settings > Configuration > Automatic Related Products.

  3. Set 'Enable Automatic Related Products' to "Yes".

i. Create a New Rule

  1. Navigate to Marketing > Automatic Related Products > Manage Rules.
  2. Select 'Product Page' in the "Add Rule" section.

ii. Fill in Rule Information

  • Enter the rule name.
  • Set the rule to Active.
  • Choose the store view and customer group.
  • Define the start and end dates.
  • Assign a priority number (lower numbers indicate higher priority).

creating a new rule in magento 2 for automatic related product suggestions

iii. Select Displayed Products

  • Block Name: Change the name of the block.

  • Product Layout: Choose to show products in a slider or grid format.

  • Slider Settings:

    • Set the number of products to display in the slider (default is "5").
    • Define the number of products displayed when the slider moves.
  • Grid Settings:

    • Set the number of products per column (default is "4").
    • Choose display mode (e.g., AJAX display, Block display).
    • Limit the number of products in the block.
    • Choose whether to include out-of-stock products.
  • Product Sorting: Sort products by bestseller, price, newest, or randomly.

  • Display additional information: Choose to display price, reviews, or buttons. For example, Add to Cart, Add to Compare, or Add to Wishlist.

  • Add Products: Insert related product types (Related Products, Up-sell Products, Cross-sell Products).

  • Do not Display Product in: Exclude products already in the cart or on the wishlist.

iv. Choose Where to Display Related Products

  1. Configure where related products appear on pages:
  • Above Content
  • Below Content
  • Floating Left Bar
  • Floating Right Bar
  1. Insert snippets to display the related product block on product pages or other locations via Widget, Page, and Template.

setting display conditions for related products in magento 2 based on category

v. Configure What to Display

a. Choose the Display Mode:

  • Condition combination (based on product attributes)
  • Who Bought This Also Bought (cross-sell block)
  • Who Viewed This Also Viewed (upsell block)

b. Set Product Display Rules:

  • Enable/disable "Suggest Products from One Category Only"
  • Enable/disable "Suggest Products with Higher Price than Price of Current Product"

choosing display mode for related products in magento 2 for targeted recommendations

vi. Configure How to Display

a. Create an attention-grabbing title.
b. Ensure it accurately describes the offered products.
c. Select between a grid or slider layout.
d. Configure display settings for the chosen format.
e. Enable/disable the "Add to Cart" button.
f. Set up quick purchase functionality.
g. Specify the maximum number of products to display (recommended: “5 per block”).
h. Configure product sorting preferences.
i. Choose whether to show out-of-stock products.
j. Save all settings.
k. Preview the results on your store's frontend.
l. Make adjustments if needed.

customizing display settings for magento 2 related products to improve customer experience

vii. Manage Rules for Other Pages

You can manage rules for related products on different types of pages. For example, Category Page, Shopping Page, One Page Checkout, Order Success Page, and CMS Page.

Note: The steps are similar to those for managing rules on the product page.

Method 3: Adding Related Products Block Programmatically

You can create a custom module by programmatically adding a Magento 2 related products block. It allows you to organize your code efficiently. You can tailor it to your business requirements. Also, you can control how it interacts with your Magento 2 store. It can lead to faster loading times, a smoother shopping experience, and cost-effectiveness.

Troubleshooting Common Issues With Magento 2 Product Slider

Issue Solution
Block Placement Check block placement, experiment with different positions, use responsive design.
Customizing Appearance Check CSS and JS files, use custom CSS classes, check for browser compatibility.
Product Selection Criteria Check product attributes, use relevant product attributes, check for product availability.
Automated Product Suggestions Check extension settings, use A/B testing, check for product relevance.
A/B Testing for Performance Use A/B testing tools, check for statistical significance, use data to inform decisions.
Integrating with Other Magento 2 Features Check for compatibility, use API integration, check for conflicts.
Check Log Files Check log files for errors and exceptions that may be causing issues with the product slider block.
Clear Cache Clear the cache to ensure that changes are reflected in the product slider block.
Use Developer Mode Use developer mode to enable detailed error reporting and debugging.

Tips And Tricks For Configuring Auto Related Products Module

1. Change Related Products Position

In Magento 2, except for the default Luma theme, you can easily change the position of the related products block on the product view page by modifying a layout file. To do so, create a new file named catalog_product_view.xml in the directory app/design/frontend/Vendor/Your_theme_name/Magento_Catalog/layout.

2. Prevent Related Product Blocks from Appearing on Specific Product Pages

i. Go to Catalog > Products. ii. Edit the product where you want to disable the automatic related products. iii. Select Related Products, Up-Sells, and Cross-Sells. iv. Enable the option Manually Setup Auto Related Products. v. Save the product.

preventing related product blocks from showing on specific magento 2 product pages

3. Hide Prices in the Related Products Block

If you prefer not to display prices in the related product blocks to encourage customers to click and view them, follow these steps:

i. Navigate to the file vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml.

ii. Create a new file in your theme's directory: app/design/Mechanic/theme/Magento_Catalog/templates/list/items.phtml.

iii. Copy the content from the core file and paste it into the newly created file.

iv. Remove line "226" from the new file to hide prices in the related product blocks.

Best Practices For Configuring Auto Related Products Magento 2 Effectively

Tip Description
Customize the Block Title Align the block title with your goals and select a style that suits your store.
Display Essential Product Details - Include essential product details in the block.
- Inform customers without requiring them to click on each product.
Balance the Block Length - Ensure the block isn't too long, which can lead to customer disinterest or too short. It may suggest a limited product range.
- Aim for "5" to "10" products per block.
Experiment with Placement Consider placing the blocks in other areas to attract customers better.
Unlimited Auto Related Products Blocks Create as many blocks as needed.

For example, related products, cross-sell, upsell products, daily deals, new products, bestsellers, & more.
Flexible Block Placement Display blocks in multiple locations. For example, above/below content, floating left/right bars, or other positions by inserting snippets.
AJAX Loading Support Enhance user experience by loading suggested products instantly as visitors scroll down.
A/B Testing Track block performance through detailed reports to determine the most effective option.

For example, clicks, impressions, and CTR.
Use Relevant Product Attributes Use relevant product attributes to create accurate and relevant related products.

For example, product categories, tags, and descriptions.
Set Up Rules Set up rules to determine which products are displayed in the related products block.

For example, products with similar prices or products from the same category.
Monitor and Analyze Monitor and analyze the performance of your related products block to identify areas for improvement.

FAQs

1. Can I display a product slider anywhere on my Magento store?

Yes, you can show related products and other product recommendations using a versatile product slider extension. Many Magento 2 slider extensions allow you to display various product types. Examples include "viewed products" and "best sellers" anywhere in your store. You can usually configure these sliders to appear on product pages, category pages, or even custom CMS pages. It gives you flexibility in how you showcase your products to customers.

2. How does a "related products" extension help manage product prices when displaying items?

A quality-related product extension for Magento 2 often helps manage product prices dynamically. It can display up-to-date prices of related items alongside the main product. It helps ensure consistency across your store. Some extensions even allow for price comparisons or highlight special offers. It makes it easier for customers to see value when purchasing related products. This feature helps maintain accurate pricing information. It can also boost sales by showcasing attractive deals on complementary items.

3. How does Magento 2 automatically get related products to show based on the selected product?

You can automatically display relevant items based on the selected product. It involves analyzing various factors such as product attributes, categories, and customer behavior. The extension helps by employing algorithms to identify and show related products automatically. It enables you to save time on manual product associations. This automated approach ensures that customers always see relevant suggestions. It helps increase cross-selling opportunities and enhances the shopping experience.

4. How can I show related products based on product attributes in Magento 2?

You can use a Related Products extension that allows you to configure product attributes as a basis for suggesting related products. Thus, you can display products that are similar to the one being viewed. It increases the chances of product sales. For example, if a customer is viewing a product with a specific attribute, the extension can suggest other products with the same attribute. For example, a brand or category, including the product image & other relevant details.

5. Can I create a slider for a specific product category to encourage customers to buy more products?

Yes, you can create a slider for a specific product category in Magento 2 using a related product extension. It allows you to showcase products that are relevant to the category. Thus, it encourages customers to buy more products. Thus, you can easily add new products to the slider. You can configure the extension to suggest related products based on the category automatically. Also, you can add the related products slider to specific pages. For example, product detail pages or category pages. It maximizes visibility and encourages customers to purchase more products.

6. How can I use the Magento 2 Related Products Slider to display products tailored to my customers?

You can leverage the Magento community's expertise and use extensions. They allow you to customize the slider to display products based on customer behavior and preferences. You can create a slider to display products that are relevant to your customers. It increases the chances of them making a purchase. Also, you can use features to tailor the products displayed in the slider. For example, product attributes, customer segments, and sales data. It makes it a powerful tool for boosting sales and improving customer experience.

CTA

Summary

Magento 2 Related Products Slider allows you to showcase related products on product pages. It helps online store owners:

  • Encourage customers to explore more items and make additional purchases.
  • Save time and increase accuracy.
  • Enhance product visibility and boost sales.
  • Adjust to different devices and themes.
  • Increase the chances of them making a purchase.

Consider Magento hosting plans to increase average order value with an improved related product slider.

Dikshya Shaw
Dikshya Shaw
Technical Writer

Dikshya leverages her content marketing and writing proficiency to deliver fresh, insightful content. Her meticulous research ensures industry expertise and emerging trends within the Magento landscape.


Get the fastest Magento Hosting! Get Started