Need help with hide/exclude products in the product recommendation section (Dawn Theme)

Store Design
1

Hi,

I’m having trouble getting a solution for exclude products from showing up in the product recommendation section. I already set up tag names for the products I don’t want it to display, I try using the code below but not getting the result I want and it’s not working. Would be nice to know if I can exclude one or two tag names products from the product recommendation without using other apps.

Any help will be much appreciated, I’m using the Dawn Theme.

{% for tag in product.tags %}
{% if tag contains 'CB' %}

<li class="grid__item">
{% render 'card-product',
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
</li>
{% endif %}
{% endfor %}
2

make sure the tags have the same case i.e. “cb” may not match “CB”.

This will depend on under the hood what the theme is, what type of recommendation is being used(tag bases or auto/javascript), or any apps involved.

https://shopify.github.io/liquid-code-examples/example/recommended-products-by-tag

https://shopify.dev/themes/product-merchandising/recommendations/show-product-recommendations

The recommendations api creates the content on the client side so i can be easy to get unintended results by only changing liquid and not being aware of this.

https://shopify.dev/themes/product-merchandising/recommendations/show-product-recommendations#implementing-product-recommendations

Generally at this step check the pages source html in the browser , use ctrl+u keybind, and look to see if the html source itself has/does-not-have the offending product being rendered.

If a specific product is not in the html for the recommendation section then likely javascript needs to be updated as well. Though it should be respecting what product ids exist in the source.

3

In your code you are showing all product which contains ‘CB’ instead of excluding it. You can use something like this with multiple tags.

{% if product.tags contains 'tag1' or if product.tags contains 'tag2' %}
{% else %}
- {% render 'card-product',
  card_product: recommendation,
  media_aspect_ratio: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating
  %}

{% endif %}

If you want us to do it for you, you can check out our app. You can create any theme edit task in it. The first task is free!

4

I’m no expert in code so the best thing I can find/somewhat understand is the product.recommendation.liquid code. I also found the javascript for the recommendation. Seems like javascript is being used to generate those recommendation, I’m not sure if the product recommendation javascript can exclude products with tag, hope this can help

%

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

{% schema %}
{
  "name": "t:sections.product-recommendations.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.product-recommendations.settings.paragraph__1.content"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "t:sections.product-recommendations.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 4,
      "label": "t:sections.product-recommendations.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.product-recommendations.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__2.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.product-recommendations.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_rating.label",
      "info": "t:sections.product-recommendations.settings.show_rating.info"
    },
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.product-recommendations.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.product-recommendations.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.product-recommendations.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

class ProductRecommendations extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const handleIntersection = (entries, observer) => {
      if (!entries[0].isIntersecting) return;
      observer.unobserve(this);

      fetch(this.dataset.url)
        .then(response => response.text())
        .then(text => {
          const html = document.createElement('div');
          html.innerHTML = text;
          const recommendations = html.querySelector('product-recommendations');

          if (recommendations && recommendations.innerHTML.trim().length) {
            this.innerHTML = recommendations.innerHTML;
          }

          if (!this.querySelector('slideshow-component') && this.classList.contains('complementary-products')) {
            this.remove();
          }

          if (html.querySelector('.grid__item')) {
            this.classList.add('product-recommendations--loaded');
          }
        })
        .catch(e => {
          console.error(e);
        });
    }

    new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 400px 0px'}).observe(this);
  }
}

customElements.define('product-recommendations', ProductRecommendations);