Product Tiles

Under the ‘Product’ Element section, you’ll find the “Product Tile” element. Drag this on to add 3 product options to a page. Select anywhere on the tile and that product will be selected. Regardless of the text on the button, when selected, the button text will be replaced with “Selected” so the user knows which package they selected. You may duplicate a

Here is a quick guide to set up the Product Tiles.

---

Step 1: Drag a Product Tile onto the page.

---

Step 2: Select each tile and set the product. You may select:

1. The radio button

2. The ‘Select’ button, or

3. The entire ‘Product Section’

to assign a product. Once you assign the product to one of these 3 options, it automatically be assigned to the entire product tile.

(Below: Selecting the entire product section using up arrow feature)

(Below: Selecting the button)

(Below: Selecting the Radio Button)

---

Step 3: Style Product Tile to your preference.

Selected Color: Using the up arrow feature, select the entire product tile. Under settings you will find an input for ‘Selected Color'. Here you can set the color of the background when a user selects this tile (You can type a color by name, use a HEX code or RGB Colors here). After setting the color, you can test while inside the builder.

Note: You can move the image or text section around inside the product tile however you like (see examples of product tile styling below).

Ensure the Product Image is Always Displayed Dynamically

To allow the image to be dynamic and always use the image stored in the CRM, apply the cc-dynamic-img class to the image element. This class overrides the image saved, displaying the image whenever updated in the CRM. The cc-dynamic-img class can be used with any draggable product elements containing an image.