You can dynamically change the text inside a badge on your design based on values stored in your product feed — for example, showing “bestseller”, “new arrival”, “eco”, or any other label you assign to the product.
Cropink automatically reads these values from custom_label_X or cropink_label_X, and updates the badge text accordingly across all your visuals.
💡 NOTE: Before performing the steps below, make sure your Cropink project is properly connected with Figma.
Check these articles for more details:
Step 1: Create a dynamic badge text layer in Figma
In your Figma design, create a text layer for the badge — this can be a simple text element like “Badge”.
Name it clearly, for example:
dynamic_badge
Open the Cropink plugin, go to Manageable Layers, add the layer, and click Publish in Cropink.
💡 Tip: Keep the badge background (shape) separate from the text layer — only the text will change dynamically.
Step 2: Prepare your data in the feed
Your product feed needs to include a field where you store the label text for each product.
You can use:
custom_label_0–4, orCropink-supported labels:
cropink_label_0–9.
Example:
id | title | price | cropink_label_1 |
101 | Red Sneakers | 59.99 | bestseller |
102 | Blue Hoodie | 49.99 | new arrival |
103 | Linen Shirt | 39.99 | eco |
Cropink will pull the text directly from this parameter and display it inside the badge.
Step 3: Map the badge text to the label parameter
Go to your project in Cropink and open the design.
Click Edit in Design Manager → open Manageable Layers.
Find the
dynamic_badgelayer.Choose Data Mapping.
From the dropdown, select the parameter containing your values (e.g.
cropink_label_1).
This way, the text of the badge becomes fully dynamic.
Step 4: Add a condition to hide the badge when no value is present
To avoid showing an empty badge:
Click the + icon next to the same layer.
Choose Conditional Settings.
Add the rule:
if cropink_label_1 is empty then Hide
This ensures the badge appears only for products where a custom label value exists.
Step 5: Save and preview
Click Save Changes and preview your design.
You will now see different badge texts for different products, depending on the value stored in your feed.
Examples:
Product 1 →
cropink_label_1 = "bestseller"→ badge shows “bestseller”.Product 2 →
cropink_label_1 = "new arrival"→ badge shows “new arrival”.Product 3 →
cropink_label_1 = "eco"→ badge shows “eco”.
💡 Tip: You can style the badge further by adding additional logic:
Change color for specific labels (“bestseller” → yellow, “eco” → green).
Change shape or icon depending on label.
Combine multiple label fields for more complex tagging.
✅ That’s it!
You’ve created a fully dynamic badge whose text updates based on custom labels in your feed — a simple and highly flexible way to mark your products with the right messaging automatically.