# Product Blocks

Inside the Products menu within the Building Blocks you have several options to choose from to add to your pages.\
\
The Checkbox and Radio Button options are also available under the [Forms](broken://pages/MoWZFbWoEEpmI6p9PYOG) menu, but only the Product variation of these elements will allow you to tie a product to the checkbox or radio button.<br>

* [Product Checkbox](#productblocks-productcheckbox)
* [Product Radio Buttons](#productblocks-productradiobuttons)
* [Variant Selection](#productblocks-variantselection)
* [Product Selection](#productblocks-productselection)
* [Product Tile](#productblocks-producttile)
* [Order Bump](#productblocks-orderbump)

<figure><img src="/files/JSRmaQ5ReDFxBSOp23Vx" alt=""><figcaption></figcaption></figure>

***

### Product Checkbox <a href="#productblocks-productcheckbox" id="productblocks-productcheckbox"></a>

Dragging this Block onto the page will add three checkboxes to the page. You can remove any extras if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below.

<figure><img src="/files/i5T56As4tNi1fch26CjX" alt=""><figcaption></figcaption></figure>

To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option.

<figure><img src="/files/az7DHIEd8nbQwMGlunoH" alt=""><figcaption></figcaption></figure>

***

### Product Radio Buttons <a href="#productblocks-productradiobuttons" id="productblocks-productradiobuttons"></a>

Dragging this Block onto the page will add three radio buttons to the page. You can remove the extra radio buttons if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below.

<figure><img src="/files/pNq8C6e5HmkilmDbWVd8" alt=""><figcaption></figcaption></figure>

To set a product or product variant to the checkbox, click on the radio button and open the element’s settings within the Style Manager. You can also set a radio button to be preselected when the page loads by enabling the Checked option.

<figure><img src="/files/VeAEptIMlJbRAJhvDrAd" alt=""><figcaption></figcaption></figure>

***

### Variant Selection <a href="#productblocks-variantselection" id="productblocks-variantselection"></a>

There are two premade variant selection blocks that you can drag onto your page where you can allow the customer to choose from multiple variants of a single product.

<figure><img src="/files/gUDdjtVQpySEDDky832L" alt=""><figcaption></figcaption></figure>

To apply a product to the element, you will click on the empty space within the element and then open the element’s settings

After you apply the product, the variant options will be available within the dropdown menu. If you don’t have three variants, you can remove any extras by clicking the element and then the Trash Can on the element tool bar.

***

### Product Selection <a href="#productblocks-productselection" id="productblocks-productselection"></a>

This is a premade element that allows you to quickly drag a button and image onto the page.

<figure><img src="/files/0m1J0upQHc2ZBsHbjc8V" alt=""><figcaption></figcaption></figure>

To apply a product to the element, click on the button and then open the element’s settings to choose the product and button action.

***

### Product Tile <a href="#productblocks-producttile" id="productblocks-producttile"></a>

Dragging this Block onto the page will add three product tiles with radio buttons to the page. You can remove the extra tiles if you don’t need them, or if you need more you can simply duplicate one of the existing ones using the button highlighted below.

<figure><img src="/files/jyJNrgeS7KdegZ1C2RVq" alt=""><figcaption></figcaption></figure>

You can adjust the formatting within the [Style Manager](https://konnektive.atlassian.net/wiki/spaces/CC/pages/1859554055/Style+Manager) and swap out the images for your own product images.

To apply products to each option, click on either the radio button or the normal button within each tile and then open the element’s settings to choose the product. You can also set a radio button to be preselected when the page loads by enabling the Checked option.

***

### Order Bump <a href="#productblocks-orderbump" id="productblocks-orderbump"></a>

This is a premade element that you can drag to your page to offer extra products for the customer to purchase before submitting their payment on the checkout page.

<figure><img src="/files/sERw92nPN1cLTcUqns89" alt=""><figcaption></figcaption></figure>

You can adjust the formatting and the text within the element within the [Style Manager](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder/settings-and-styles.md).

To set a product or product variant to the checkbox, click on the checkbox and open the element’s settings within the Style Manager. You can also set a checkbox to be preselected when the page loads by enabling the Checked option.

***


---

# 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/building-blocks/product-blocks.md?ask=<question>
```

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.
