A method to add a _product-tags private block that displays product tags inside the product card in Horizon. Leveraging Horizon's theme blocks architecture, it's built as a standalone block you can drop into any product card from the theme editor. For the Dawn implementation, see here.
Result
Product tags line up inside each product card. Set "excluded tags" from the theme editor to hide any tags automatically added by apps.
How to use
Keep your per-product tag assignments as-is, then add the "Product Tags" block inside the product card from the theme editor. List any tags you want to hide, comma-separated, in the filter field.
The block itself (blocks/_product-tags.liquid)
Receives the product via closest.product, runs it through the exclusion filter, then outputs a series of <span> elements. When dropped outside a product context, closest.product is empty and nothing renders — safe by design.
Styling via CSS Custom Properties
Theme editor setting values are piped in as CSS Custom Properties via the style attribute. A media query switches font size between mobile and desktop.
Allow the block on product cards (blocks/_product-card.liquid)
Horizon's product card uses an explicit allow-list. Add {"type": "_product-tags"} to the schema.blocks array — a single line — and the new block becomes selectable from the block picker inside product cards.
Note: blocks/_product-card.liquid is a core Horizon theme file. Your edits may be overwritten when Horizon updates. After an update, reapply manually or manage the change via GitHub integration for cleaner merges.
