Badges and Labels
This article explains product badges and labels in Hygraph.
Badges and Labels are displayed on product tiles in the search results, in product sliders and on the PDP.
Badges
Small images which contain some form of information to make a product stand out.
Labels
Small bit of text with a coloured background.
The main differences from a badge are that it doesn't contain an image and it is only shown on product tiles, not on the PDP.
Configuration
Badges and labels are both created in Hygraph using the 'tag' content model.
A list of all existing Tags, from all tenants, in the selected Environment, will be displayed.
Selecting one from the list will automatically redirect you to the Edit page where the Tag’s components and content can be viewed, edited, added and removed.
Important things to keep in mind when configuring a Tag;
- If a tag is going to be used as a badge, an asset must be set to the Image component of the tag.
- If a tag is added as a badge to a product that does not have an image it will not be displayed.
- If a tag is used as a label, the asset in the image component will not be displayed.
Components
Like all Models in Hygraph it is compromised of required and optional components, that will determine where and how it will be displayed.
Tenant
As Hygraph is multi-tenant, the first and most important selection is the tenant.
Identifier
The Identifier field is only used internally
Tag
The Tag field is the text that will be visible if the tag is used as a Label, in case it is a badge that text will not be visible.
Filter Sets
Assign tags to both Filtersets and Filterset Products. If both are assigned, the linked Filterset Products can be filtered via Filtersets
Filtersets
Assign tags to both Filtersets and Filterset Products. If both are assigned, the linked Filterset Products can be filtered via Filtersets
Image
You can upload an image, replace the current image,
Images in Hygraph are configured in the ‘Asset’ model, please review existing assets to avoid creating duplicates.
Keep in mind that product badges are small images and avoid using images that are too large.
Badge Products
All selected products will show this tag's image as a badge on the product tile and PDP.
Background Colour
The label's background colour. Only relevant in case the tag is used a label. If not filled, the tenant's primary colour is used.
Label Products
All selected products will show this tag's text and background colour as labels on product tiles.
Categories
All products in the selected category will show this tag's text and background colour as labels on product tiles.
Please do not create new categories in Hygraph, Categories should be created in CommerceTools, after which they will become available in Hygraph.
Product Listings
All products in the selected product listing will show this tag's text and background color as labels on product tiles.
Adding badges or labels to products
If a Tag already exists, it can also be added to products on the product page directly. On the Product model in Hygraph there three components that allow this type of configuration, which behave the same way as the components in the Tag model itself.
The order of badges in Hygraph determine the order of the badges shown in the webshop. You can drag and drop them using the six dots to change their order.
Publishing
Important to note is that after publishing a new badge (and the corresponding product page) in Hygraph, it shows withing 30 minutes on the PDP, but badges need a full build to appear in sliders and search results as those are run by Algolia.