# 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.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/variant-selection/product-variant-selection.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.