The Product Variant element is a mini element that shows the variants for a product on your page.
Note: The Product Variant element needs to be inside a Product element, so in order to use it, you need first insert a Product element into the page.
You can find and insert a Product Variant element from the sidebar.
This is how the Product Variant element looks inside the Editor
Important options
Product: Select the product to show.
Layout: Select the element layout.
Button
Select
Button gap: The gap between buttons. Only available if Layout is Button.
Active option: Change styles for the active variant. Only available if Layout is Button.
Active color
Active background color
Active border color
Label font: Font for the labels.
Option font: Font for the options.
Label size: Font size for the labels.
Option size: Font size for the options.