You can automatically display the discount percentage on your product visuals based on price data from your feed — for example, showing “-25%” when a product is on sale.
This is a powerful way to make your ads more engaging and conversion-driven without manual edits.
💡 NOTE: If you don't have an existing discount badge on your design, before performing the below steps, make sure your Cropink project is properly connected with Figma.
For more information, check these articles:
Step 1: Add a discount element in Figma
In your Figma project, create a new text layer for the discount percentage (for example, “-25%”). You can add it either as a sole text layer or a whole box including more details (background color, styling etc.)
Name the layer/frame clearly — e.g.
discount_percentage.Open the Cropink plugin, go to the Manageable Layers tab, and add this layer.
Click Publish in Cropink to send your updated design to your project.
💡 Tip: Use a bold color (like red) or a small badge behind the text to make discounts stand out visually.
Step 2: Make sure your feed contains price data
To calculate the discount dynamically, your product feed must contain both:
price — original price,
sale_price — discounted price.
Example:
id | title | price | sale_price |
101 | Red Sneakers | 79.99 | 59.99 |
102 | Blue Hoodie | 49.99 |
|
103 | Black Jacket | 99.99 | 74.99 |
Cropink will use these two fields to determine the discount percentage for each product.
Step 3: Map your discount layer to a calculated parameter
In Cropink, open your project and select the design you just published.
Click Edit in Design Manager → open Manageable Layers.
Find the
discount_percentagelayer.Select Data Mapping → and choose discount_percentage. This parameter automatically calculates the percental difference between the price and sale price.
Add a text prefix like “-” and a suffix “%” to style the output, e.g. “-25%”.
Step 4: Add a condition to hide the discount when not applicable
Select Conditional Settings and click the + sign.
Add the rule:
if sale_price is empty then Hide
This ensures the discount badge won’t appear for products that aren’t on sale.
Step 5: Save and preview
Click Save Changes and preview your output.
You’ll now see the discount percentage dynamically calculated and displayed on your visuals for all discounted products.
💡 Tip: You can combine this setup with Fill Color — for example, show red text for discounts above 50% and orange for smaller ones. This can be done using conditional properties.
✅ That’s it! You’ve successfully added a dynamic discount percentage to your products — making your ads automatically reflect the latest promotions straight from your feed.