> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/choice-list/checkbox.md).

# Checkbox

### 1. How Does the Checkbox Display?

The Checkbox option displays as a small square box that users can click to select or deselect a choice. It can be used individually or in groups when multiple selections are allowed. When selected, it shows a checkmark (✔️) tick inside the box.

Example of how it appears on a product page:

* A Candle product with a Checkbox to select Fragrance: Lavender, Vanilla, Eucalyptus,..

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FaLmLr1GZA2Orpe1wvjmj%2Fimage_kd0nv5.png?alt=media&amp;token=860dbcec-fe90-47b3-854b-08e046545bac" alt=""><figcaption></figcaption></figure>

### 2. How to Create a Checkbox

**Step 1: Add a New Option**

* Click Add Option > Checkbox to create a new option

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F5haoEyJNa0w11vfEetBW%2Fimage.png?alt=media&amp;token=81915ec6-4475-49c1-aa48-1d3039686947" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FluZAUoHNoekdqTn6ZxNq%2Fimage.png?alt=media&amp;token=dfcf29fc-cc5c-420f-8a3c-9c366fe2e78c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnal1iuAztYkC_tvMBUUKipWdr-emt_AXtaQ2M77BMZdSiyb258r6usS5iL_CwnIa4CYGGuuUIGsH29OIM-jOuiwMy8b5RxP0CAa3pYHr5Bjyz8Ao2SrQXAYTQdI98PfyOEs93Ag?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 2: Add information to the Checkbox**

* Enter an option name for the Checkbox (e.g., "Customize Your Candle", "Choose Scent")
* Add the option values (e.g., Lavender, Vanilla, Citrus, Rose, Coconut, Eucalyptus).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FdfotyvV9RVHpmt5gUvWN%2Fimage.png?alt=media&amp;token=4b2532b4-c96c-4fbf-8a9d-c4a581197dcd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfZZsBMyWhZS-dT35rx92wBPZvQ1uSO3Sd_h2Xa1fQkmUaPdSgUExgaMn96h9QrnGeuZiJtwrwXSnkXBi4VPzt-kfaTlFgtU_jkV1OP9l6rj4zhpxbLlUSwhzDBNTd2EpexktTE2w?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

* Tick on “Required field” if you want customers must choose the option before checking out.

How it will look on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F4aBjsDxIWRGD3WBrpnSt%2Fimage.png?alt=media&amp;token=3e674ad5-9ada-4aab-ad60-9e9766bd060c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdePDE2jsAVeZMOo8iHdWSpQ-dVouY3EJJ9olZBGW4XWaBSnnrZEhHA8glyqg8sg3MXX3iQFzzoaN3OXQz0dE4JwLwJcT6ll0Te9v9Hu-o4nnKFeixVVacW8SQt5qxXj-9N9NREQw?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

* Tick on ‘Hide option label” if you don’t want to show the option name above the option values.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FxYZxvCGXtFVD6xcEKtTG%2Fimage.png?alt=media&amp;token=ae2a28a9-3477-45c3-b6a6-7ef8361feb65" alt=""><figcaption></figcaption></figure>

How it will look on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fh6dz6rIpXR0pi4yHymtq%2Fimage.png?alt=media&amp;token=4a3c9af5-3c96-4955-aad2-06c0dee15543" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcLdCfK0GNtazPUDFYqKWJEBViY-BZwlgycvDCbu5j5zhc36mr1Mov0Cb1EIKxPM6B19h1eLPQFR-nuw46TnxcoTCCE4ZgMwElSgO9q-p3j94_x5q66hs1snLHAtr-wrundO7KXBg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

Other features:

* Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price Upsell product > Assign to Variant – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)

**Step 3: Advanced Settings (If Needed)**

{% hint style="success" %}
**Visibility:** Enable visibility condition if you want the Checkbox to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/)
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FB8gxGlcDbouZvnMu6BFx%2Fimage.png?alt=media&amp;token=d1577e16-3711-4ee3-b476-44ccd84c865a" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Help text:** Add a short description to explain the purpose of the Checkbox option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FUK3lLHaZh0je6wTjjF0p%2Fimage.png?alt=media&amp;token=c6ea1c81-c8b2-40da-897e-06ec49716831" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGd8Eh9yMNVoP4G-LAw3vCS6FtcXDivHvrnkUAZFhmhruMd_msYgDUkAZHb4vEyckiF1p_gl0ysBEIc9Sx-4fqIKBp9UparbVuy82DDOUZeSa1APiViZpIqqam0hVWIPuiJ0_qQQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

Here is an example of the Help text as Tooltips looks like on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FFvoFdKT3uLNLujaqQgXn%2Fimage.png?alt=media&amp;token=e298569d-ecf0-4fa7-9846-5ca796636c19" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd3YDV-pLfLqLBEzDBMwT69XWGXtnE3SLiIlIHe6QfrhzawImalyE8JcgGmYeWGucYfZ5V8lJkWXu4lA3pQFwn6oY9-JzAoJm1XQq2G34wNxFVEk3ji1nFwAGoKQjIUlka63OnfaQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Default value:** Pre-select the Checkbox options every time the customer goes to the site. It can save time for customers by providing common or expected choices.
{% endhint %}

Example: You want the option value “Lavender” to be selected automatically when customers enter the product page.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F4omk4rIMKpWhqshNBpJC%2Fimage.png?alt=media&amp;token=afc2ea88-0960-4542-9a5e-388ed54df223" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcBpcdBZ8E42M4bOgA0G1vt4a9KLaD9RDI54z_FX_LW5Au5NmFRCnAcRKQbY40IoCI1m6NlcYzrKQgY01NiZNS1dIAvaJEQ2bwOEaeZqmO1W3r0hDXCVT6jNtWWxM6KixuOKQzNzw?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

How it looks like in your storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FYju2DZ3jbtntUMHZoZXQ%2Fimage.png?alt=media&amp;token=0fb160a8-b58c-4748-81b2-581b8bb637ec" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcCLBd7kPbbWZ-FRB32z1engJ5ih21rFtzxd-ULgf_vwfktFJeb2NfXx0pbJ0OQaFcEbOX0ovyeAhz7F1hD1sC73J1A_VGHE9Gqh259Vv0RSX1AKIcKmpzc4mUcKuB-1Dem_KwUUw?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Limit selectors: You can set Min/Max option value that customers can select.
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FNNyG1E9Qv7KZbzrGnn9N%2Fimage.png?alt=media&amp;token=0a732c1e-ed77-4a4d-aedb-534b23c11f83" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcKHfb91Oh2KF1c6qaSI2UZLYzY_Vn5O_7E_9b_7RH6q_GkS8P7avqfuvD5TpzQaUZJ6dBbh0G3kfUiYNq2VQ88EaamtgArvuCG7HYgczVklAf8dT1yqM7z3HxMtGPRwyqiMUJdlg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

If your customers choose more than the maximum option value, it will show a notification message below. The same with the minimum option value.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FeYNe2jR3SZGTCM6TR1MJ%2Fimage.png?alt=media&amp;token=f9e774ca-602c-47dc-944d-374089f820ff" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe7tyLgnxvx6wyOD-vmK_oA4kdTPqmQooyU28gYttCZDy3f5Gb-5AYd4yCvmXJcPEoOc3-jrJ09e3oMthX2PxSZ8hw1bNTywFmXWekTxttRAfDxWzLKqI1o0DyFYnt2NPNZZgiyqw?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 4: Save and Test**

* Click Save to apply the settings.
* Visit the product page on your store to check if the Checkbox option works correctly.

### 3. Real-World Applications of Checkbox

* Product Customization: Choose add-ons like gift wrapping, extra toppings, preferred colors, materials, or scent/flavor options.
* Compliance & Agreements: Confirm age eligibility (18+/21+), agree to terms, or verify authenticity. Accept return policy, warranty terms, or payment conditions.

### 4. Key Features of Checkbox

* The checkbox option allows users to select one or multiple options with a simple click. When displaying many option values, they can be arranged in a single line or inline layout to save space and maintain a clean, organized design.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf0JKuohblnuV_aOZpZ3Ff8vIpoRTukPvMeqhJ3KkIjgF9mu2FvkWZx0DtgIR8XTWW4Ll2eIATW2iKwiASAI8s6fvZqFSjhg90_KO47vCNZY31ZnM8eZeqWtIryLrUVjwfyutLL?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>
