How To Add You May Also Like On Shopify

When designers and developers are building websites for clients, information technology's important to be conscious of how visitors will navigate through the site. By presenting the about helpful options at every touchpoint, designers and developers tin provide an effortless user experience from start to terminate.

Production pages tin present unique opportunities and challenges in this context. While the chief focus should be on the product, there's likewise an opportunity to display and cross-sell complementary products.

You tin can brand it piece of cake for customers to go along shopping, and drive conversions for your clients past positioning recommended products in a visible and advisable location on a product folio. What tin often be disregarded, however, is which products appear as recommended options.

In this post, we'll exist looking at how developers tin can leverage the Liquid recommendations object to provide clients with the ability to surface data-powered production recommendations on their product pages. I'll also evidence you how to create a section that displays related products by tag, which will enable your clients to personalize their production recommendations.

Grow your business with the Shopify Partner Program

Whether yous offer marketing, customization, or web design and evolution services, the Shopify Partner Program will set yous upward for success. Join for costless and access revenue share opportunities, tools to abound your business, and a passionate commerce customs.

Sign upwardly

The `recommendations` object

The recommendations object is a Liquid object which is used on product pages to output an automatically-generated list of related products. Past using a information-driven arroyo to display suitable product recommendations, your clients can better the discoverability of new products.

When a department is gear up upwardly to apply the recommendations object, it could look something like this:

At that place are three attributes associated with the recommendations object. The attribute that returns a list of product objects is recommendations.products. This can be used with the other two attributes, recommendations.performed and recommendations.products_count, to create the conditions to display a product list.

In that location are a number of factors that influence what products are displayed when using the recommendations object. Depending on your customer's the Shopify programme type, the number of products in stock, and the language of your customer's store, there may be dissimilar products recommended.

These are the different types of recommendations that are outputted based on your client'due south Shopify plan and store configuration:

Purchase history and production descriptions: Available to those on the Shopify Plus programme who have <7000 products published in their online store, with an English language storefront
Purchase history just: Bachelor to those on the Shopify Plus programme who take <7000 products published in their online store, with a non-English storefront
Purchase history only: Those not on a Shopify Plus plan who have <7000 products published in their online store
Collections: Available on whatever plan for merchants with >7000 products published in their online store

As new orders and product data go available, the product recommendations that appear will get more accurate.

Clients can also track how constructive the product recommendations are at improving sales straight from the Analytics page in their Shopify admin. The Production recommendation conversion over time report displays a range of different metrics for understanding the performance of product recommendations.

For example, a customer can view how often a product was purchased by a buyer after clicking on a product recommendation within a session, as well as the percentage of clicks on production recommendations that converted into purchases.

You might also like: How to Use Liquid to Create Custom Landing Folio Templates.

Creating a product recommendations section

The offset step to showing data-driven product recommendations on your client's product pages is to create a new Liquid file inside the /sections directory of the theme. We can call this production-recommendations.liquid.

The section volition utilize a mixture of HTML, Liquid, and Javascript to render a list of products. Liquid allows united states to ready the conditions for outputting the recommended products, while Javascript takes care of the heavy lifting by loading the products into the department.

In this case, the Liquid and HTML would await like this:

Nosotros can see here that we're using the recommendations.products_count with control-period tags to set up a condition to ensure the heading and list of products volition only announced if there are products to recommend.

Below this we create a for loop with the recommendations.products to iterate over the current product'due south associated recommended products, and output them. In this case, the limit of recommended products is set to 4, the value of the data-limit in the opening container tag.

It's possible to increment the data-limit equally the recommendation algorithm associates up to 10 products per individual production, in society of relevance. Nonetheless, if y'all want to promote merely the most relevant recommendations, it's brash that you show no more than four products per product page.

Next we can add the javascript to the section, contained within {% javascript %} section tags:

Nosotros've included comments with the code and so yous can see a description of what each role is performing. In essence, we are making a request to read the data of the container within the product recommendations section, and dynamically inserting the response's markup on the page.

Finally, to brandish the product recommendations on a product page, we need to include the section within the theme's product.liquid file. We would generally add this below where the primary content is being loaded, so your production.liquid file could look like this:

          {% department 'product-template' %}
{% section 'product-recommendations' %}

Now when y'all navigate to a product page, yous will see a listing of recommended products appearing based on purchase data, or inside the same collection.

Expanding options with department settings

To empower clients to brand adjustments to how this department appears, we can also go one step farther with customizing this feature using section settings. For example, nosotros can create section settings that enable or disable the department, and as well allow your clients to edit the heading that appears above the recommended products.

To achieve this effect, we'd demand to add {% schema %} tags to the section and employ JSON to create settings and values. These settings would correspond with elements in the markup and allow clients to collaborate with them via the theme editor.

To turn the section on and off, we would wrap the product recommendations container in an if argument, which would be assigned an ID. This could expect like:

          {%- if section.settings.show_product_recommendations -%}
<code for department>
{% endif %}

The corresponding schema settings would be added inside the department like this:

Similarly, we could create a section setting variable that targets the heading, and would appear within the markup like so:

          <h2>{{ section.settings.heading }}</h2>

We want this to be an editable text box, so the corresponding schema settings would wait like this:

Once this is all added in, the overall section would appear like this:

Now, when a client uses the theme editor and navigates to a product page, they would see options for editing the product recommendations section:

You might also like: Understanding Progressive JPEG and WebP Formats.

Creating a related products department based on grouping tags

If your client is looking to have manual control over which products appear as recommendations, at that place's an culling method you could implement that matches products by tag. Using Liquid to set upwardly tag-based rules on unlike production templates means that your clients will be able to personalize which related products appear on their product pages.

Since this culling method predates the introduction of the recommendations object, clients who use this method volition not exist able to take advantage of the analytics collected by the data-driven arroyo.

Likewise since this method involves searching through all products to find and display products that share a specific tag, there's a performance price associated with this lookup. For this reason, this solution is simply appropriate if your client needs to match specific products with each other.

The first stride is to create a new blank section in your themes department folder. To keep it elementary, we can name this section related-products-by-tag.liquid. Next, you volition need to re-create and paste the code from this gist into your new blank section:

With this method, the crucial deportment are enacted by control flow tags on line 104, which create a status based on a specified tag:

This means that any production that contains the tag of 'test' will now be displayed on the product page equally a related production. A customer can change 'test' to whichever tag they prefer, and alternative versions of this file can be created for each tag. Y'all tin learn how to create culling production templates from our help docs.

One time this section is created, you will demand to include it on the product.liquid template file, or your preferred alternative product.liquid template file. You can practice this past adding
{% section.related-products-by-tag.liquid %}
below where you run into {% section 'product-template' %}.

At present, when a product applies this template, you volition see related products that contain the tag specified in the department's code.

Smarter recommendations, ameliorate UX

Whichever method you implement, providing intuitive related products on your custom themes volition requite your clients a competitive edge when they need to directly customers to specific products.

By integrating recommendations for cross-selling, and considering the about appropriate approach, you lot can give your clients more than opportunities to drive conversions, and meliorate the general usability of a site.

Accept you lot experimented with different approaches when designing related products features? Nosotros would honey to hear nigh your experiences in the comments below.