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.
Font
Font
A simple font selector allowing you to change the font of your text element. From here you can choose one of many commonly used fonts, or your own that you have uploaded via Styles panel.
Image Placeholder (only images)
Image Placeholder (only images)
A custom image field allowing you to assign custom image for your design.
NOTE: if you choose a custom image here, it will reflect on all of your products tied to this 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.
You can use any of your available parameters along with any of the following conditions:
is empty
is not empty
contains
not contains
text equal
text not equal
number greater than
number less than
As for the action that you want performed based on a condition, you can choose any of the following:
Map to (mapping your element with different source data)
Hide
Show
Change Placeholder (images only)
Change Background Color (frames only)
Change Border Color (frames only)
Change Color (text only)
Change Text (text only)
Change Font (text only)
For example, if you 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.
In here you can modify settings such as:
Price part
Prefix (what shows before the price value)
Suffix (what shows after the price value)
Currency override
Currency position
Thousands separator
Decimal separator
Decimal places
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.