Tag filter

Overview

Displays a block of filter tags sourced from a collection or blog metafield, allowing buyers to filter collections or blog posts by custom tags. The block supports flexible layout (stacked or inline), alignment, spacing, color, font, and device visibility options. It renders a link to view all items and individual tag links, highlighting the active tag. Tag data is pulled from a metafield defined by the merchant in block settings.

Common use cases

• Ensure the collection or blog metafield contains a comma-separated list of tags for best results

• Use the block in collection or blog templates to provide buyers with easy tag-based filtering

• Adjust gap size and alignment to match the design context and available space

• Use device visibility settings to tailor the block's presence on mobile or desktop as needed

• Combine with other navigation or filtering blocks for a comprehensive browsing experience

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals visibility settings	Checkbox (default: false)

Content

Setting	Description	Options
Metafield tags	Metafield reference for tags (namespace.key format)	Text input

Spacing

Setting	Description	Options
Top spacing	Spacing above the tags	0 - 30 px (default: 0)
Bottom spacing	Spacing below the tags	0 - 30 px (default: 0)
Enable horizontal padding	Adds horizontal padding around the tags	Checkbox (default: false)
Gap size	Spacing between tags	• None • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Text color	Controls the text color of tags	• Default (default) • Alternative • Primary • Secondary • Tertiary • Neutral • Shade

Style

Setting	Description	Options
Font family	Controls the font family used for tags	• Standard • Heading • Subheading • Accent Visible when font size contains 'type--'
Font size	Controls the font size of tags	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting	Description	Options
Layout	Controls the tag layout direction	• Stacked • Inline (default)
Horizontal alignment	Controls horizontal alignment	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on