How to display variant prices within variant selector

[maddy]

1. In the layers tab select the “Product Variants” layer, open the options tab, and change the “option display type” to “boxes”.

2. Drag and drop a new box block below the “group options boxes” layer in the layers tab. With the new box block selected, open the data tab and add state.productInfo.variants for the repeat for each.

3. Remove the repeat from each from the “option box” layer that is within the “group options boxes” layer and drag and drop the option box into the new box block we added.

4. Drag and drop a new text block into the box block below the option box layer. With the text block still selected, navigate to the data tab and select “+ new binding”. Choose “text” and add state.variantItem.price as the binding.

After you complete the steps above, the price for each variant will show in the variant selector. The option box block has a binding to apply a border when selected, you can copy this binding and delete it from the option block, then add this binding to the box block so the border shows around the variant title and variant price.

[Sate]

@maddy

state.variantItem.price

There is no option to select ‘Text’ in the new binding for the box selected. A video tutorial would have been much easier to follow . Thanks anyway for this

[maddy]

Hi @Sate,

I correct step #4. Instead of having the box selected, you will want to have the text block selected (then the text binding option should appear).