How to use the Product Variant element

https://www.youtube.com/embed/pBJlwoJ3haY?rel=0

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.