Skip to main content

Tag-Based Filtering Guide

Overview​

The Vero theme includes powerful tag-based filtering for both collection lists and product lists. This feature allows you to display the same collection multiple times with different product filters, or show specific products from a collection based on their tags.

Common Use Cases​

  • Display "All Products" alongside filtered views like "Drinkware Only" and "Engraved Items Only"
  • Show seasonal collections filtered by specific tags (e.g., "Holiday Collection" filtered to show only "Ornaments")
  • Create curated product lists that pull specific items from a larger collection
  • Create navigation menus with sub-collections using tag-filtered URLs
  • Reduce the number of collections you need to create and maintain

Both the Collection List and Collection Links sections support tag-based filtering. The functionality is identical in both sections.

How Images Work with Filters: When a filter tag is applied, the section automatically displays the featured image from the first product in the collection that has that tag. This ensures the visual matches the filtered content.

Titles and styling for tag-filtered cards​

When a collection card is rendered with a tag filter, the theme injects a dedicated title block for the tag label:

  • Use Collection title (tag) for the filtered/tag label
  • Use Collection title for the parent collection name

Styling recommendation: Set the same typography/background settings on both blocks so tag titles and parent titles match. If only tag titles are needed visually, the duplicate parent title will be hidden automatically on tag-filtered cards.

Standard Mode (Simple)​

Use this mode when you want to filter collections using their position in the list.

How to use:

  1. Add a Collection List or Collection Links section to your page
  2. Select your collections using the "Collections" picker
  3. In the "Collection tags (optional)" field, enter tags separated by commas
  4. Leave a position empty to show the full collection (no filter)

Example:

  • Collections selected: All Products, Home Decor, Apparel
  • Collection tags field: Drinkware,,Seasonal

This will display:

  • "All Products" filtered to show only items tagged "Drinkware"
  • "Home Decor" with no filter (full collection)
  • "Apparel" filtered to show only items tagged "Seasonal"

Advanced Mode​

Use this mode when you want to display the same collection multiple times with different filters. This feature is available in both Collection List and Collection Links sections.

How to use:

  1. Add a Collection List or Collection Links section to your page
  2. Enable "Enable advanced collection filtering"
  3. In the "Advanced collections" field, enter collection handles with optional tags

Format: handle or handle:tag

Example:

all-products,all-products:Drinkware,all-products:Engraved,home-decor

This will display:

  • "All Products" (full collection, no filter)
  • "All Products: Drinkware" (only items tagged "Drinkware")
  • "All Products: Engraved" (only items tagged "Engraved")
  • "Home Decor" (full collection, no filter)

Finding Collection Handles:

  1. Go to Products > Collections in your Shopify admin
  2. Click on a collection
  3. The handle is in the URL: https://yourstore.myshopify.com/admin/collections/[HANDLE]
  4. You can also see it in the "Search engine listing preview" section

Product List Filtering​

Use this feature to show only products with specific tags from a selected collection.

How to use:

  1. Add a Product List section to your page
  2. Select a collection using the "Collection" picker
  3. In the "Filter by tags (optional)" field, enter tags separated by commas
  4. Products matching ANY of the tags will be shown

Example:

  • Collection: All Products
  • Filter by tags: Featured,New Arrival,Bestseller

This will show only products from "All Products" that have at least one of these tags: Featured, New Arrival, or Bestseller.

Using Tag-Filtered Collections in Navigation​

One of the most powerful uses of tag-based filtering is creating sub-collections in your navigation menu without maintaining separate collections.

How It Works​

When you link to a tag-filtered collection URL, the theme automatically:

  1. Displays only products with that specific tag
  2. Shows the tag name as the collection title (not the original collection name)
  3. Creates a seamless browsing experience for customers

Step 1: Tag Your Products

Make sure your products are tagged appropriately:

  • Tag all tumblers with "Drinkware"
  • Tag all cutting boards with "Kitchen"
  • Tag all engraved items with "Engraved"

Step 2: Build Tag-Filtered URLs

The URL format is: /collections/[collection-handle]/[tag]

Examples:

  • /collections/all-products/drinkware - Shows only items tagged "Drinkware"
  • /collections/all-products/kitchen - Shows only items tagged "Kitchen"
  • /collections/all-products/engraved - Shows only items tagged "Engraved"

Step 3: Add to Your Navigation Menu

  1. Go to Online Store > Navigation in your Shopify admin
  2. Add menu items with your tag-filtered URLs
  3. Name the menu items to match the tag (e.g., "Drinkware", "Kitchen", "Engraved")

Example Menu Structure:

Shop
├─ All Products (/collections/all-products)
├─ Drinkware (/collections/all-products/drinkware)
├─ Kitchen (/collections/all-products/kitchen)
└─ Engraved (/collections/all-products/engraved)

What Customers See​

When a customer clicks on "Drinkware" in your menu:

  • The page title shows "Drinkware" (not "All Products")
  • Only products tagged "Drinkware" are displayed
  • The URL is clean and descriptive
  • Breadcrumbs and meta information reflect the tag name

This creates the appearance of separate collections while maintaining just one "All Products" collection behind the scenes.

Benefits​

Easier Maintenance:

  • Update product tags instead of managing multiple collections
  • Products automatically appear in the right "sub-collections"
  • No need to manually add/remove products from multiple collections

Better Organization:

  • One source of truth for your product catalog
  • Consistent product data across all views
  • Easier to manage product visibility and organization

SEO Friendly:

  • Clean, descriptive URLs
  • Proper page titles for each filtered view
  • Unique content for each "sub-collection"

Tips & Best Practices​

Tag Naming​

  • Keep tags consistent across your products
  • Use clear, descriptive tag names
  • Avoid special characters in tags when possible
  • Tags are case-insensitive for filtering

Performance​

  • Tag filtering happens at render time, so filtered views are always up-to-date
  • No need to create duplicate collections
  • Changes to product tags are reflected immediately

Organization​

  • Use tag filtering to reduce clutter in your collections list
  • Create one main collection and filter it by tags for different views
  • Combine with the theme's layout options (Grid, Carousel, Bento, Editorial)
  • Use tag-filtered URLs in your navigation menu to create "sub-collections"
  • Keep your menu labels consistent with your tag names for a cohesive experience

Testing​

  • Preview your sections to ensure products are filtering correctly
  • Check that tag names match exactly what's on your products
  • Use the theme editor's preview mode to test different configurations

Troubleshooting​

Products not showing in filtered view:

  • Verify the tag exists on the product (case doesn't matter)
  • Check for extra spaces or typos in the tag name
  • Ensure the product is in the selected collection

Collection showing all products instead of filtered:

  • In standard mode: Check the position of the tag in your comma-separated list
  • In advanced mode: Verify the format is correct (handle:tag)
  • Make sure there are products in the collection with that tag

Advanced mode not working:

  • Ensure "Enable advanced collection filtering" is checked
  • Verify collection handles are correct (check in admin URL)
  • Format should be: handle:tag with a colon, not a comma

Need Help?​

For additional support or questions about tag-based filtering, please contact 424 Solutions support.