Product Variant Selection

A Product Variant Selection element is used to choose product variants using selectable labels or images for the first 2 variants and a dynamic tile for the final variant. The final variant tile is dynamic because it automatically adjusts the number of tiles and tile content based on the first 2 variants. The product that uses this element must have 2 or 3 variants. If your product has only 1 variant then consider using a Product Tile element.

The Product Variant Selection element is available on Lead and Checkout pages.

Once dragged to the page there are 2 labels at the top for the first 2 variants. There is a tile at the bottom for the final variant.

Choose the outermost element (product section) and assign the product.

Change and style the “Product Name” and “Choose Variants” labels as necessary. These labels are not dynamic and can be edited or removed as needed. Additional labels or other elements can be added.

The Variant1 label is dynamic. It will automatically replicate once for each variant 1 in the product. Style this element as needed. Do not remove the variant-label1 class. It is required to have this element on the page. Do not remove it or the element container that surrounds it.

The Variant2 label is dynamic. It will automatically replicate once for each variant 2 in the product. Style this element as needed. Do not remove the variant-label2 class. This element can (and should) be removed if the product has only 2 variants. Also delete the container around it.

Variant1 and Variant2 can show a variant image instead of labels. Add class fk-variant-image to the label. Add this class to Variant1 or Variant2, but not both. The image shown is that of the first variant found. Do expect to do additional styling with an image to get the size correct.

The tile always contains the final variant. Do not remove the tile. The tile will replicate once for each final variant that exists for the selected variant 1 and 2. As variants 1 and 2 are chosen the variant tiles adjust to match what is available for that selection.

The elements within the tile can be styled as needed. The dynamic nature of the tile is evident in these elements. Not all shown below are in the default element. Create new elements within the tile as needed. Do not remove the required classes.

Tile Title - Title must have class tile-title. This will display the name of each final variant.
Price - Price must have class product-price. This will display the variant price formatted to the proper currency.
Unit Price - Unit Price must have class unit-price. This class will display the variant price formatted to the proper currency divided by the quantity per order.
Compare At Price - Compare At Price must have class compare-at-price. This will display the variant Compare At Price formatted to the proper currency.
Compare At Unit Price - Compare At Unit Price must have class compare-at-unit-price. This will display the variant Compare At Price formatted to the proper currency divided by the quantity per order.
Savings - Savings is the difference between Price and Compare At Price. It must have class product-savings. This will display the price difference formatted to the proper currency.
Savings Per Unit - Savings Per Unit must have class savings-unit-price. This will display the price difference (Savings) formatted to the proper currency divided by the quantity per order.
Savings Percent - Savings Percent is Savings divided by Compare At Price. It must have class savings-percent. It is always rounded to a whole number and displayed with the % symbol.
Description - Description must have class product-description. This will display the full variant title.
Image - An image inside the tile is automatically populated with the final variant image. There is no special class needed for this. If you do not want an image inside the tile then remove it. The image can be moved anywhere inside the tile.
Button - The button inside the tile functions without additional changes. Style the button as needed. Do not remove any default classes. The button text will always be SELECTED when the tile is selected. The button will revert to the default value when de-selected. The button may be removed if not needed (the tile can be chosen by clicking anywhere on the tile). The button can be moved anywhere inside the tile.
Radio - The product radio button inside the tile functions without additional changes. Style the radio as needed. Do not remove any default classes. Do not remove the radio button. Do not assign a product or variant to the radio button. The radio button may be hidden.

Advanced Topics

It is possible to show variant 1 or 2 on the tile. Edit the product section that surrounds the tile, delete the variant-tile3 class, and add class variant-tile1 or variant-tile2. Do not edit or remove any other classes on that element. This is necessary only if you do not want the tile to be the final variant.