Element Settings: Product

In this article, we will identify the available options in Product Settings. These options are helpful tools that allow you to personalize the user interface of the product’s section.

Important Note: To view the selected element's Product section, please toggle the checkout step. The number of steps shown under “Checkout Steps” depends on the chosen option from the “Number of Steps” drop-down (i.e., "Step 1" if "Number of Steps" is "3").

Important Note: This setting is exclusive to the selected element. Please ensure that the correct element is selected when customizing this setting.

Requirements: 

• An active ClickFunnels 2.0 account

• The selected element

TABLE OF CONTENTS

• Font Family:
• Product:
• Selected Product:
• Selected Product Text:
• Selected Product Border:
• Selected Product Shadow:
• Radio BG:
• Radio Border:
• Supported Elements:

Font Family:

Change the font style of the product details text with Font Family. Click the button next to “Font Family,” then select your preferred font style.

Example:

Back to Top

Product:

Personalize the background color of the product’s section in the selected element using Product. Click the color bar next to “Product,” then choose your preferred background color.

Example:

Back to Top

Selected Product:

The Selected Product option lets you change the background color of the product’s section when the visitor selects it. Click the color bar next to “Selected Product,” then choose your preferred background color.

Example:

Back to Top

Selected Product Text:

The Selected Product Text option lets you change the color of the product’s font when a visitor selects it. Click the color bar next to “Selected Product Text,” then choose your preferred font color.

Example:

Back to Top

Selected Product Border:

The Selected Product Border is an option that lets you change the border color of the selected product. Click the color bar next to “Selected Product Border,” then choose your preferred border color.

Example:

Back to Top

Selected Product Shadow:

The Selected Product Shadow lets you add, remove, or change the color of the selected product’s shadow. Click the color bar next to “Selected Product Shadow,” then customize the shadow according to your preferences.

Example:

Back to Top

Radio BG:

Change the background color of the radio button with Radio BG. Click the color bar next to “Radio BG,” then choose your preferred color.

Example:

Back to Top

Radio Border:

Modify the border color of the radio button using Radio Border. Click the color bar next to "Radio Border" and select your preferred color.

Example:

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• Checkout (Legacy)

Back to Top