# 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](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/page-builder/building-blocks/form-blocks#formblocks-form) 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FxTiz6asNoK47earJTnmS%2Fimage.png?alt=media&#x26;token=3ca60079-663c-470a-8ffc-0b1ae0ab004b" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fudj0bCmPLgrtCveiz9oz%2Fimage.png?alt=media&#x26;token=10fdb81d-b352-4eae-87c2-3bda732d1db1" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FWftEbNcbs8IjGeGwE7ut%2Fimage.png?alt=media&#x26;token=66cdc25b-3b52-4f81-bc46-14b69aa87e12" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FSsQIwKgvYVQJTJi7I1rh%2Fimage.png?alt=media&#x26;token=153e789d-bfcc-419a-adbb-659e7551d533" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FCkJRt3Jm1Ke73GoQ5Dcl%2Fimage.png?alt=media&#x26;token=1a546bd6-a909-4e71-bbfb-7e2103fd78d3" alt=""><figcaption></figcaption></figure>

### Product Radio Type

You may choose between two types of Product Radio elements in the element settings: Basic or Advanced

Basic product radios contain no style and require clicking directly on the radio to select it.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F0wAQp3UsEBxq70zTsK4H%2Fprod-radio-basic.png?alt=media&#x26;token=a01cfe73-b7e4-4855-9695-ce174e14fdb1" alt=""><figcaption></figcaption></figure>

Advanced product radios are surrounded by their own labels. This allows the user to click anywhere in the label to select that radio. You may style the label as needed to give it more of a product section look. You may also hide the product radio as clicking anywhere in the label will select the radio.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FcZstPLPmkrw0PLwoCWjY%2Fprod-radio-adv.png?alt=media&#x26;token=3e15732c-515f-4d45-a754-8cf1054e632a" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FIyXl8UinaM496Oo7jLt6%2Fimage.png?alt=media&#x26;token=d093243d-d930-4774-81aa-cd043d7ec09a" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FnRLTjin62rFhkayel1jM%2Fimage.png?alt=media&#x26;token=cb80ee11-149a-406d-9b21-96c1a5ba1fb5" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F4X7VwbUZcMwZ2ncJgp3u%2Fimage.png?alt=media&#x26;token=e88eb8bf-6baf-49eb-8a3b-3d8995bbaa6f" alt=""><figcaption></figcaption></figure>

You can adjust the formatting within the [Style Manager](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F0x5yIHISaNQNzm3QleHj%2Fimage.png?alt=media&#x26;token=ce63356d-3fe6-404c-b849-330affc3faed" alt=""><figcaption></figcaption></figure>

You can adjust the formatting and the text within the element within the [Style Manager](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/settings-and-style-manager).

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.

***

### Two Way Sub Subscription

This is a premade element that you can drag to your page to offer two way subscribe and save options. These elements use the subscribe & save profiles set up in the campaign in the CRM.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FH6QdWkAzIi5IgNunVfuZ%2Fimage.png?alt=media&#x26;token=14662892-0d8b-468f-ba09-ae77b5a436bf" alt=""><figcaption></figcaption></figure>

This element just needs to be applied to the page and styled as needed. This element can be used to convert a one-time offer to a subscription and vice versa. Subscripton offers used on this element are taken from [Subscribe & Save Profiles](https://help.checkoutchamp.com/crm/crm-setup/campaign-setup/subscribe-and-save-profiles) set in campaigns.

When the button to upgrade to a subscription is pressed the element will be hidden on the page. Any items that are shown in the order summary will show a revert back so the client can easily switch the product back to one-time.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FEE9D8OUrbWvNzjUekrhr%2Fimage.png?alt=media&#x26;token=2298e932-479b-43f3-8614-aa2c9ac49cfd" alt=""><figcaption></figcaption></figure>
