Skip to content
Log in

Product tags

On this page

Product tags are short labels that appear on a product card, such as New, Sale, or Staff pick. They are a merchandising tool: use them to draw attention to products in a category listing or search results. Customers can also filter search results by tag.

How product tags are stored

A tag is two records, not one:

  • Tag — the label itself. It belongs to a store, so each store has its own set of tags.
  • Product Tag — a link between one Tag and one Product. Create one for each product you want the tag to appear on.

This means you create a tag once and reuse it across as many products as you like. Editing the tag updates every product showing it.

:::note Tags belong to a single store. If you run more than one store and want the same label on both, create a Tag record for each store. :::

Create a tag

  1. Open the Store record for the store the tag belongs to.
  2. Go to the Tags related list and click New.
  3. Fill in the fields:
Field What to enter
Tag Name An internal name to identify the record. Customers never see this.
Value The text customers see on the product card. Keep it short, for example New or Sale.
Store The store this tag belongs to.
Type Optional. See Using the Type field below.
  1. Save the record.

:::warning The badge shows the Value field, not Tag Name. If you leave Value blank, the tag still applies to the product but renders as an empty badge. :::

Apply a tag to a product

  1. Open the Product record you want to tag.
  2. Go to the Product Tags related list and click New.
  3. Set Tag to the tag you created, and leave Product set to the current product.
  4. Set Position if you want to control the order the badges appear in. See Control the order badges appear in below.
  5. Save the record.

The badge appears on the product card the next time the storefront loads that product.

To remove a tag from one product, delete its Product Tag record. The Tag record itself stays, along with every other product using it.

Control the order badges appear in

A product can carry several tags. They render in ascending Position order, so a tag with Position 1 appears before one with Position 2.

Product Tags with no Position set sort after all the ones that have a value, ordered by the date they were created. If badge order matters to you, set Position on every Product Tag for that product rather than only some of them.

Let customers filter by tag

Tags are available as a filter in storefront product search. The filter lists only tags that appear on products in the current set of results, so a tag that matches nothing is never shown as an empty option.

No configuration is needed to turn this on. Create tags, apply them to products, and the filter appears.

Using the Type field

Type is an optional classification on the Tag record with three values: New, Exclusive, and Sale. It exists so a theme can style or position tags differently depending on their type.

The standard theme does not read Type. Setting it changes nothing on the storefront on its own, so treat it as a hook for custom theme work rather than a setting that produces a visible result. Speak to whoever maintains your theme before relying on it.

Styling tags

The standard theme renders each badge with a general CSS class plus one built from the tag’s Value. A tag with a Value of Sale gets the class SC-ProductCard_tag-sale, and Staff pick gets SC-ProductCard_tag-staff-pick. Use those classes to give individual tags their own color or shape.

:::note Because the class comes from Value, changing a tag’s Value changes its CSS class and any styling attached to it stops applying. Update your theme styles at the same time. :::

Was this article helpful?

Was this article helpful?