Custom label builder

The Custom Label Builder allows for the creation and management of dynamic product labels within the product loop items and single product pages. This feature includes a condition-based system to automate display rules, enabling precise control over how badges and icons are applied to products based on categories, tags, or brand attributes.

Features of custom label builder

In Gutenberg, the custom label settings are located on the right side of the top editor bar, next to the save button. To open them, click the gear icon. Afterwards, you will see an additional product settings sidebar on the right side of the screen, which is similar to the settings for a standard builder block.

The Custom Label Builder provides control over the appearance and functionality of labels through a block-based interface:

• Layout and Styling: Configuration options for labels mirror standard Gutenberg block settings. Users can adjust background, width, height, spacing, borders, and alignment directly within the builder.
• Conditions: The “Advanced” tab contains the conditions of custom labels. Through this interface, users can define specific display conditions to control label visibility. This allows for precise targeting, enabling labels to be applied either globally across the entire store or restricted to specific products based on categories, tags, or other attributes.

By selecting from a wide range of parameters — including Product IDs, Categories, Tags, Attributes, Stock Status, User Roles, and specific product collections like “Sale”, “Hot”, “New”, or “Out of stock” — labels can be dynamically applied to match store’s marketing strategy. Multiple conditions can be combined, and user can choose whether a label should be included or excluded based on these rules.

Using a label builder with dynamic content

The Custom Label Builder facilitates the use of dynamic data sources for label content. Within text inputs and image selection fields, the database icon provides access to dynamic tags, allowing labels to automatically pull and display specific product information.

This mechanism enables the generation of automated labels that update in real-time based on the product’s metadata. By combining dynamic tags with static elements, users can create complex labels that reflect product-specific attributes, such as brand names, pricing, custom fields or categories, ensuring consistent data representation across the product catalog without manual intervention for each item. Find more details about the Dynamic Content in our documentation here.

How to display a custom label on a product

In case the display conditions specified in the Custom Label Builder options are met, and you are using the predefined designs for the Product Loop and Single Product Page, the custom labels will be displayed in the standard locations, just like regular labels.

If you are using the Product Loop Item Builder or Single Product Layout Builder, you must use one of the following two elements to define the placement for product label placement:

• Product Label: This element is designed for rendering a single, specific label.
• Product Labels: This element is a container designed for displaying multiple labels simultaneously. It allows for the management and alignment of several labels applied to a single product.