Shopify For Loop To Blur Images If Product.tags = 'phrase'

Essentially I want to go ahead and while the for loop is going to get the images and information of all products to be displayed. insert a conditional if statement in order to see if the products tags contain the tag 'lewd' then it's blurred (right now it's set to just not display the image though)

I'm having issues finding the best place to implement it, I know it should be done on the product templates page (I think) because it seems to be pulling the images and information in the loop, but no matter where I insert the code to try to pull the info and apply the effect it doesn't work. I've gone through many many different ways to do it and this is only the latest example.

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ 
  section.settings.image_size }}-image{% endif %}">

  <div class="grid__item product-single__photos {{ product_image_width }}{% if 
  section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

  {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: 
  product.featured_image -%}

  {% for image in product.images %}
    {% capture img_id %}FeaturedImage-{{ }}-{{ }}{% endcapture %}
    {% capture img_class %}product-featured-img{% endcapture %}
    {% capture zoom_img_id %}FeaturedImageZoom-{{ }}-{{ }}{% endcapture %}
    {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
    {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: 
    img_wrapper_id, img_id: img_id %}

    <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">

Before the loop closes I want to go ahead and search for those tags so my code was

{% if product.tags contains "Lewd" or product.tags contains "lewd" %} blur {% endif %}

I'm not sure if Shopify already passes this info along though? in that case I suppose i would need to run another forloop? Such as

{% for tag in product.tags %}
{% if tag contains "lewd" %}

but not sure where i would even do that. I'm a novice at working with shopify. thanks for any help



The contains keyword behaves slightly differently depending on what you're using it on:

  • If the left-hand-side variable is a text string, contains will return true if the right-hand-side value is found as a substring of the left-hand-side value.

  • If the left-hand-side variable is an array, contains will return true if one of the array values exactly matches the value supplied on the right-hand-side. Type matters, too - a number won't match a string, a string won't match an object, etc.

product.tags gives you an array of strings, so as long as the product has a tag that is exactly lewd then your intuition is correct: {% if product.tags contains 'lewd' %} will be true. However, if your product is tagged with something like lewd-because-reason instead (and doesn't have a plain 'lewd' tag), lewd-because-reason is not an exact match to lewd, so the check above would be false.

Looking at the code you've supplied, a good place to put this check could be inside the {% capture img_class %} line, as then you should be able to add another class to the image being rendered.

Hope this helps!