how to do conditional formatting for picture in custom liquid

Shopify Discussion

Topic summary

A user is attempting to implement conditional formatting to display different images based on the selected menu item or collection being viewed, but their Liquid code contains multiple errors.

Main Issues Identified:

  • Handle case sensitivity: Collection handles in Shopify are automatically lowercased, so the comparison collection.handle == 'Tops' should use 'tops' instead
  • Malformed HTML: The <img> element is improperly formatted and wrapped inside HTML comment tags, preventing it from rendering
  • Syntax errors: The code contains reversed/garbled text and broken tag structures

Recommended Solution:

A community member provided corrected code that:

  • Uses downcase filter to ensure proper handle comparison
  • Properly structures the <img> tag outside of comments
  • Assigns variables cleanly for the collection title and image filename

Additional advice included being cautious when using AI tools like ChatGPT for code generation, as they can introduce errors that create more work if the output cannot be validated against existing knowledge.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I want to make a specific picture appear based on what menu item is selected or which collection is being viewed but i cannot figure out what is wrong with the code.

{% if collection.handle == ‘Tops’ %}

{% endif %}

2

Hi @kashbunny :waving_hand: handles are lower cased https://shopify.dev/docs/api/liquid/basics#handles

and the img element is not properly bracketed and it’s inside html comments.

If you are using chatgpt etc use such tools for summarizing knowledge & experience you can validate otherwise you cannot see the misinformation such tools create and just create more work for everyone.

{%- assign collection_title_lowercased = 'Tops' | downcase -%}
{%- assign image_filename = 'tops_4.png'
{% if collection.handle == collection_title_lowercased  %}
 
{% endif %}
{% comment %}
 https://shopify.dev/docs/api/liquid/filters/downcase
 https://shopify.dev/docs/api/liquid/filters/file_img_url
{% endcomment %}

:man_technologist: the width attribute as percentage will work though technically invalid. https://stackoverflow.com/questions/26100484/what-are-the-consequences-of-using-percentage-for-width-and-height-attributes-of