Variant Selection

CheckoutChamp provides several variant selection elements under the Products menu in the page builder.

• Variant Selection 1 and 2

• Variant Tile option

Variant Selection 1 and 2

Variant Selections 1 and 2 allow you to add variant product sections to your pages. The difference between the two is simply how the labels and inputs are laid out on the page.

Your product’s variant options will auto populate on the live page. The generic labels (Variant 1, Variant 2, Variant 3) can be edited on the page as needed. The variant options in the dropdowns will be populated with the corresponding variant options from the CRM. The placeholder image will also be replaced with the product image from the CRM when viewing the live page.

If you're variant options have different prices, you can add the class "product-price" to a text element inside the product section. This text element will then display the price of the selected variant option.

Variant Tile option

Rather than using dropdown variant selections, you could also choose to use the Variant Tile display. The Variant Tile display gives a more visual representation of your variant options, but requires HTML edits to implement.

Step 1: To use the Variant Tile displays, first, add the class “fk-variant-tile” to the product section.

Then, search for the variant select's ID in the HTML editor.

Step 2: Once you locate the variant select, you will need to change the "select" to a "label". You will remove the existing “select” HTML and replace it with the “label” code below. Be sure to use the correct number when editing multiple variants (variants 1 or 2, respectively).

Remove the original “select” code: <select name="variant1" type="select" customval="" value="" class="form-control-custom fk-form-select"><option value=""></option></select>

Add the new “label” code: <label for="Variant 1" class="variant-label1">variant tile</label>

Repeat for Variant 2, ensuring you use the number 2 where required.

Make sure you click the “save” button on the HTML editor before closing the editor.

Save and publish your page.

For color variants, if you would prefer to see the color's words, not the color swatches, you may add the "ccNoColorTile" class to the variant tiles.