In this example, we will add a Omnibus price badge that will be reflected on our products. When you followed the above steps, you may start creating a new layer inside Figma where you will design your badge according to your needs. For the sake of this example, we can name the element "omnibus_badge". Also make sure that your source feed contains omnibus price parameter, so that you can import the price data to your badge. You will also need to map your data within Figma using Cropink's dedicated plugin. The following article describes the entire process - Mapping layers with data in Figma.
Once you are finished with the design, make sure to add it in the "Manageable Layers" tab in the Cropink's plugin window. Next, simply hit "Publish in Cropink".
Once published, head back to Cropink and select your design. Next, click on on "Edit in Design Manager" and then on "Layers Settings". In there, you will see the elements that have been mapped to parameters imported from your source feed.
We may also want to filter out products that do not have any data inside the omnibus price parameter. To do that, click the + symbol next to omnibus_badge we have just imported from our Figma project, select "Data Mapping" and choose the parameter you want to map it with (omnibus_price). Next, click the + symbol again and this time choose "Conditional Settings". Once done, go by the following setting:
if omnibus_price is empty
then Hide
This way, we have successfully filtered out products on which the omnibus price badge will be displayed.