How to Build a Customizable Related Products Section

How to Build a Customizable Related Products Section

related productsWhen developers are building websites for clients, it’s important to be mindful of how visitors will navigate through the site. By presenting the most helpful options at every touchpoint, designers can provide an effortless user-experience, from start to finish.

Product pages can present unique opportunities and challenges in this context. While the main focus is on the product itself, there’s also an opportunity to display, and cross-sell complementary products.

As we learned in Vitaly Friedman's recent webinar, you can make it easy for customers to continue shopping, and drive conversions for your clients by positioning recommended products in a visible, and appropriate location on a product page. What can often be overlooked, however, is which products appear as recommended options.

In this post, we will be looking at the different ways developers can build “smart” options for recommending related products. I’ll also show you how to create a section that displays related products by tag, which will empower your clients to personalize each one of their product pages.

You might also like: How to Create Your First Shopify Theme Section.

Creating “smarter” recommended product options

When developing a strategy for designing product pages, it’s crucial that suitable cross-selling suggestions appear to the customer. Currently, one of the most popular methods to cross-sell on product pages is to display products that are in the same collection. This solution is perfect, if your client wishes to cross-sell products within the same collection. Sometimes, however, products from a similar collection might not be the preferred options, and this is particularly true with apparel.

Imagine if you’re buying a coat online and once you’ve found a coat that you like, instead of being recommended other coats, you see matching gloves or a scarf, which complement this particular coat. In this case, it’s a lot more intuitive if hand-picked products can be recommended rather than products from the same collection.

related products: shopbob
Shopbop offers an option to “Shop the look”, and recommends matching products.

If developers can empower clients to customize each product page to display a different set of related products, this will encourage a more granular level of personalization, and can increase conversion.

Developers can deliver more nuanced cross-selling approaches for their clients in a number of ways. The most comprehensive solution could be to use an app like Boost Sales, or to build a private app that can use Shopify’s API product properties for advanced functionality.

On a theme-based level, however, it’s possible to work with Liquid and product tags to create rules that will display specific recommendations on particular product pages. Using Liquid to set up tag-based rules on different product templates means that your clients will be able to personalize which related products appear on their product pages.

In this tutorial, I will be using Debut as the base theme, and if you’re building a theme from scratch using Slate, you can add the necessary CSS you need into your stylesheet. If you’re tweaking an existing theme, you can use this as a guide and adjust the styling where necessary.

Creating a related products section based on grouping tags

This solution involves creating a static section that searches through all products to find and display products that share a specific tag. If this specified tag is attached to a product, it will appear as a related product, on the product page, where the section is positioned.

For each different group, or unique tag, we will need to create a unique product.liquid file. For this reason, this solution is advisable if your client has a limited number of related product groups, or sub-collections.

The first step will be creating a new blank section in your themes section folder, called related-products-by-tag.liquid. Next you will need to copy and paste the code from this gist into your new blank section:

This code is a modified version of a Shopify customization, but with some changes to create rules based on product tags.

The first change we see is that this section is capturing products across all collections, rather than a product's current collection, and you can find this on line 97:

{% for product in collections.all.products %}

 

The real magic, however, is happening with control flow tags on line 104, which create a condition based on a specified tag: 

This means that any product that contains the tag of “test” will now be displayed on the product page, as a related product. A client can change “test” to whichever tag they prefer, and alternative versions of this file can be created for each tag. You can learn how to create alternative product templates from our help docs .

Once this section is created, you will need to include it on the product.liquid template file, or your preferred alternative product.liquid template file. You can do this by adding {% section.related-products-by-tag.liquid %} below where you see {% section 'product-template' %}. For example, this could appear like:

Now, when a product applies this template, you will see related products that contain the tag specified in the section’s code.

related products: dress

Note: This solution may not suit clients who have a large number of tags, since each tagged group would require a different product.liquid template. If your client does have a wide range of different tags, one of these apps might offer a more appropriate alternative.

You might also like: 10 Drool-Worthy Product Page Examples to Inspire Your Next Ecommerce Project.

Smarter recommendations, better UX

Providing intuitive related products on your custom themes will give your clients a competitive edge when they need to direct customers to specific products. By integrating smart recommendations for cross-selling, and considering the most appropriate approach,you can give your clients more opportunities to drive conversions, and improve the general usability of a site.

Have you experimented with different approaches when designing related products features? We would love to hear about your experiences in the comments below.

About the Author

Liam is a Partner Education and Front End Developer Advocate at Shopify. He's passionate about promoting community engagement and developing learner resources. Whenever he’s not reading about code you can catch Liam making friends with cats and collecting records.

Grow your business with the Shopify Partner Program

Learn more