I would like the flag to be at upper left hand corner of images (both collections and product image). A small text with a rectangle box around it. Based on tags, so I can add say “New!” at top left, or “Low Stock”, or “On Sale”. That sort of thing, thank you!
Topic summary
Main topic: Add a small top-left “flag” (text in a rectangle) on product/collection images in the Shopify Dawn theme, driven by product tags (e.g., “New!”, “Low Stock”, “On Sale”).
What was proposed:
- Use a tag pattern: _label:New (replace “New” with the desired text).
- Edit the theme file card-product.liquid (product card template) and insert a code snippet that extracts the _label tag and outputs its value if present.
- A screenshot is provided to show where to place the code, and a code block demonstrates reading the tag and rendering the label.
Key details:
- Tags: Shopify product tags (metadata attached to products). Using a prefix “_label:” encodes the label text.
- card-product.liquid: The template that renders product cards (e.g., on collection pages) where the flag should appear.
Open question / latest update:
- A participant asks how to support multiple labels; the current approach appears to show only one and “overwrites” when more than one is added. No confirmed solution yet; discussion remains open.
Hi @Saturn9 ,
Please follow the steps below:
-
Step 1: Add tag for product with structure: _label:New
-
Step 2: Go to card-product.liquid file and add code here:
Code:
{%- assign _label = card_product.tags| where:'_label' | first | remove:'_label:' -%}
{%- if _label != blank -%}
{{ _label }}
{%- endif -%}
Hope it helps!
1 Like
Hey! I appreciate this!
I have a question - is it possible to add multiple tags? It’s overwriting when I add more than one.
Thank you!