[Debut Them] Increasing amount of product recommendations

danyx1980
New Member
14 0 0

I'd like to increase the amount of product recommendations shown in the product page of the Debut theme, I see here 

          {%- for product in recommendations.products -%}
            <li class="grid__item small--one-half medium-up--one-quarter recommended-item">
              {% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}

 That it simply loops over all recommendations, but seems to have a maximum of 4, is there a way to increase the amount generated? I intend to turn this into a product slider.

0 Likes
ThemuMitch
Explorer
45 11 11

Hi danyx1980,

 

First, navigate to the Shopify online code editor. If you haven't done this before, check out this link:

https://shopify.dev/tutorials/develop-theme-getting-started-choosing-an-editor

 

Here, you want to modify the theme.js file (found in the Assets folder).

 

NOTE: Before editing your theme code, it's important to save a backup of your theme.

 

With the theme.js file open in the Shopify online code editor, find the theme.ProductRecommendations function (Cmd+F on Mac or Ctrl+F on Windows). Then, update the limit to whatever value you want (when I tried this, the limit was found on line 7446).

theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    this.$container = $(container);

    var baseUrl = this.$container.data('baseUrl');
    var productId = this.$container.data('productId');
    var recommendationsSectionUrl =
      baseUrl +
      '?section_id=product-recommendations&product_id=' +
      productId +
      '&limit=4';

    $.get(recommendationsSectionUrl).then(
      function(section) {
        var recommendationsMarkup = $(section).html();
        if (recommendationsMarkup.trim() !== '') {
          this.$container.html(recommendationsMarkup);
        }
      }.bind(this)
    );
  }

  return ProductRecommendations;
})();

 

If you don't see the changes straight away, you may need to empty your browser cache and hard reload the page.

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution
0 Likes