Debut Theme - Changing Number of Recommended Products

myjulz
Tourist
8 0 3

Hi all, 

Hope someone can help me with a fairly easy fix - looked all around and nothing that is useful for the Debut theme (a lot of old content online). 

Essentially, the current Debut theme defaults to 4 product suggestions, no more. There doesn't appear to be anywhere in the product-recommendations-liquid section where I can change the number from 4 to 8. 

Anyone able to assist? It currently is looking like this: 

{%- if section.settings.show_product_recommendations -%}
{%- if recommendations.performed -%}
{%- if recommendations.products_count > 0 -%}
<div class="product-recommendations__inner">
{%- if section.settings.heading != blank -%}
<div class="section-header text-center">
<h2>{{ section.settings.heading | escape }}</h2>
</div>
{%- endif -%}
<ul class="grid grid--uniform grid--view-items">
{%- for product in recommendations.products -%}
<li class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- else -%}
<div class="page-width" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>
{%- endif -%}
{%- endif -%}

{% schema %}
{

0 Likes
Tejas_Nadpara
Shopify Partner
1033 215 488

@myjulz 

 

Sorry, It's not possible to customize this code. It displays an automatically-generated list of product recommendations. Products are recommended based on an algorithm that predicts the most relevant products based on the product a customer is interacting with.

The algorithm that identifies recommended products is based on data about products that were purchased together and products with similar descriptions. It uses this data to provide a mix of those related products as recommendations for a given product. 

For more details check this link: https://shopify.dev/tutorials/develop-theme-recommended-products

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
myjulz
Tourist
8 0 3

Thanks for the speedy response! Much appreciated. 

cosmon
New Member
5 0 0

It's possible, please follow the steps bellow to enable another limit for recommended products on DEBUT.

On top of the product-recommendations.liquid section add:

 

{% case section.settings.limit %}
  {% when 3 %}
    {%- assign col_width = "medium-up--one-third" -%}
  {% when 4 %}
    {%- assign col_width = "medium-up--one-quarter" -%}
  {% when 5 %}
    {%- assign col_width = "medium-up--one-fifth" -%}
  {% when 6 %}
    {%- assign col_width = "medium-up--one-sixth" -%}
{% endcase %}

 

 

 

Change the current div on  product-recommendations.liquid section

From:

 

<div class="page-width" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>

 

To:

 

<div class="page-width" data-base-url="{{ routes.product_recommendations_url }}" data-limit="{{ section.settings.limit }}" data-product-id="{{ product.id }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations"></div>

 

 

Add this to the schema of the product-recommendations.liquid section

 

{
"type": "range",
"id": "limit",
"label":"Number of recommended products",
"min": 3,
"max": 6,
"step": 1,
"default": 5
}

 

 

Inside theme.js, search for "theme.ProductRecommendations" and change it

From:

 

theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var baseUrl = container.dataset.baseUrl;
    var productId = container.dataset.productId;
    var recommendationsSectionUrl =
        baseUrl +
        '?section_id=product-recommendations&product_id=' +
        productId +
        '&limit=4';

 

To:

 

function ProductRecommendations(container) {
    var baseUrl = container.dataset.baseUrl;
    var productId = container.dataset.productId;
    var limit = container.dataset.limit
    var recommendationsSectionUrl =
        baseUrl +
        '?section_id=product-recommendations&product_id=' +
        productId +
        '&limit='+ limit;

 

 

 

0 Likes