Skip to main content

Tags and Tag Values

Tags are the fundamental labeling system of Webround Commerce. They represent the definition of constant and shared attributes within the catalog, allowing products to be organized, filtered, and presented in a structured way.

The system is divided into two parts:

  • Tag: The label definition (e.g., "Color" or "Weight").
  • Tag Value: The specific value associated with that label (e.g., "Red" or "10 kg").

Tag Logic​

Imagine a Tag as a container for constants. You can define the data type (String, Number, Date) and how it should interact with the search and navigation system.

Display and Search Properties​

For each Tag, you can enable three key behaviors natively managed by the Catalog APIs:

  • Relevant: The tag is returned by the APIs when associated with a product. It is useful for displaying descriptive information on the product page.
  • Filterable: Enables dynamic filtering. It allows users to search, for example, for "all products in Green" or "all size M."
  • Sortable: Allows defining sorting criteria based on the tag value (e.g., sorting rental cars from shortest to longest duration).

Advanced Customization​

  • Icon: You can define an icon (from React Icons) to visually represent the tag in the front-end.
  • Position: Allows establishing a custom sorting order for tags when they are displayed in a list.
  • Label: A string that defines a property such as a unit of measurement. If the tag is "Weight" and the label is "kg," the front-end will interpret and display the values as "4 kg," "10 kg," etc.
Range Filters

You can define range-type filters on tag values if you set them as "Date" or "Number" types. This way, your customers can filter all products that have an associated Tag Value within the range specified in their search.

Tag Value: The Label Values​

Tag Values are the direct children of a Tag and represent the actual selectable options.

  • Value and Alias: Both are 100% localizable. The Alias is an alternative name useful for integrations or custom code.
    • Example: A "Color" tag has a Tag Value "White" with Alias #ffffff.
  • Visibility: A toggle to enable or disable the value in the front-end without having to delete it from the system.

Tags and Options​

One of the most powerful functions of Tags in Webround Commerce is their role as the engine for Purchase Options.

While Attributes describe the product, Tag Values are used to define the "matrix" of choices available to the user. Since purchase options tend to be constant (sizes S, M, L are the same for many models), Tags are the perfect tool to ensure consistency and speed of configuration.

Creation Flow​

To correctly generate a product's options, the flow is as follows:

  1. Tag Definition: Ensure you have created the Tag (e.g., "Shoe Size") and the relevant Tag Values (e.g., "40", "41", "42").
  2. Link to Product: While defining Product Options, select the reference Tag and choose which of its values you want to enable for that specific product.
  3. Matrix Generation: The system will use those Tag Values to automatically generate the SKU matrix under each variant.

Advantages of this Approach​

  • Consistency: You avoid manually typing "XL" or "Extralarge" differently every time; you always use the same centralized Tag Value.
  • Speed: Once a set of tags is defined for a sector (e.g., Apparel), configuring options for new products becomes a matter of a few clicks.
  • Native Filtering: Since generated SKUs carry the option Tags with them, your store will instantly allow filtering products based on availability (e.g., "Show me only products available in size 42").

Structure Examples​

Here is how Tags organize information in the catalog:

Tag (Label)Label (Unit)Tag Values (Examples)
Color-White, Black, Red, Green
Size-S, M, L, XL
Weightkg2, 5, 10, 20
Rental DurationMonths12, 24, 36, 48
Offer-Sale, Rental
Native Localization

The entire Tag system is multilingual. You can translate both the Tag name and individual Tag Values, ensuring a German user sees "Farbe: Weiss" while an Italian user sees "Colore: Bianco" on the exact same product.