Aside from selecting products by ID/category, making simple design changes or more advanced ones made using Cropink's dedicated Figma plugin, you can also customize the overall structure of your design using Properties. In order to access this panel in the "Designs" tab select the design of your choice and click on "Edit in Design Manager". Next, go to "Properties".
Once in there, you can add these settings by clicking on the + sign next to the element of your choice:
Visible
Visible
A simple Yes/No toggle allowing you to show or hide an element.
Color
Color
A simple color selector allowing you to change the color of an element.
Image Placeholder (only images)
Image Placeholder (only images)
A custom image field allowing you to assign custom image for your design.
Image Fitting (only images)
Image Fitting (only images)
A simple color selector allowing you to change the color of an element.
Data Mapping
Data Mapping
A dropdown where you can select the parameter you want mapped with an element.
Conditional Properties
Conditional Properties
This feature is used to perform certain actions (i.e. add a bestseller badge) on the image when a specific condition is met. You set it up by first selecting the parameter, then the condition itself, and finally the action you want performed.
For example, if we want to add a condition that changes the text color of price parameter if the product is NOT on sale we can use the following settings:
if sale_price is empty
then Change fill color -> (select the color)
The above example is based on default parameters, so depending on how you set them up in your project, their naming may vary.
You can add up to 3 actions for each condition (by clicking "Add Action" below the last action) just as you can add several conditions under a single parameter (by clicking "+ Add Next Condition" below the last condition).
IMPORTANT: Conditions work in a sequence, meaning that the most recent condition overwrites any condition added before it.
Text Placeholder (only text elements)
Text Placeholder (only text elements)
A custom text field allowing you to create custom text for your element. If however, you already mapped your element with a parameter (i.e. title), the parameter will overwrite the text placeholder settings.
Price Formatting
Price Formatting
An advanced formatting options for your product prices, including settings such as decimal/thousand separators, currency position. prefix & suffix and much more.
To preview any changes made, hit "Apply" after making adjustments. You may also preview them for a selected product by using "Data Preview" window on the top panel. Once ready to save the final settings, hit "Review & Publish" where you will see a summary and before & after comparison of your design. Click "Publish" to set the adjustments live.