# Custom option

{% hint style="warning" %}
Custom options uses [line item properties](https://shopify.dev/themes/architecture/templates/product#line-item-properties) to collect and display additional information in the cart and order details. **Custom options does not support add-on pricing**.
{% endhint %}

In the Product template, you can add **Custom options** to let customers personalize products or customize their order before updating their cart. 

Your customer's entered text and selected options will appear in the cart and order details.

![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-0c6f2877eb7eb6f00d4fded4a42ac3610bd546b4%2Fproduct-custom-options.png?alt=media)

## Watch tutorial

{% embed url="<https://youtu.be/t-v4O9wvAKI>" %}

## Add custom option block

***

* Under **Product overview**, click **(+) Add block** and select **Custom option**.&#x20;
* Use the drag-and-drop handles **`⋮⋮`** to re-order blocks.  Click the block to start adding content.

&#x20;

## Set up custom option

***

* Choose the **type** of option
* Change the **label** of the option
* Add special **instructions** to tell customers about the option and any requirements (e.g., a maximum of 10 words).

&#x20;

`Click Custom option block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Field type</mark></td><td>Select the type of option.</td><td><strong>Text</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Long text</strong><br><strong>Checkbox</strong><br><strong>List</strong></td></tr><tr><td><mark style="color:blue;">Field label</mark></td><td><p>Enter text that names the option.</p><p><br>If you're using multiple custom options in a product form, then make sure the field labels are unique. Learn more about <a href="https://shopify.dev/themes/architecture/templates/product#line-item-properties">line item properties</a>.</p></td><td><em><mark style="background-color:yellow;">Default: "Your label"</mark></em></td></tr><tr><td><mark style="color:blue;">Instructions</mark></td><td>Add instructions to describe how the custom option is applied to the product.</td><td><em><mark style="background-color:yellow;">Default: "Special instructions"</mark></em></td></tr></tbody></table>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>A text field for customers to add a single word or line.</td><td><a href="#text-field">#text-field</a></td></tr><tr><td><mark style="color:blue;"><strong>Long text</strong></mark></td><td>A text field for customers to add multiple lines.</td><td><a href="#text-field">#text-field</a></td></tr><tr><td><mark style="color:blue;"><strong>Checkbox</strong></mark></td><td>A single 'yes' or 'no' option.</td><td><a href="#checkbox">#checkbox</a></td></tr><tr><td><mark style="color:blue;"><strong>List — Dropdown</strong></mark></td><td>A menu of options that requires a single choice.</td><td><a href="#options-list">#options-list</a></td></tr><tr><td><mark style="color:blue;"><strong>List — Radio buttons</strong></mark></td><td>A list of buttons for options that requires a single choice.</td><td><a href="#options-list">#options-list</a></td></tr></tbody></table>

&#x20;

### Text field

***

Show a text field for customers to add a message or other details to their order. Select the field type:

* **Text** for single-line text
* **Long text** for multiple lines of text

`Click Custom option block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Field placeholder</mark></td><td>Change the text that appears until the customer enters their own text.</td><td><em><mark style="background-color:yellow;">Default: "Enter your text here"</mark></em></td></tr></tbody></table>

&#x20;

### Checkbox

***

Set the field type to **Checkbox** to give customers a 'yes' or 'no' option.  The checkbox uses the **Field label** as the option text.

{% hint style="info" %}
You can add multiple Custom option blocks with checkboxes to let customers select one or more options from a set of options.
{% endhint %}

### Options list

***

Set the field type to **List** to display multiple options as a **Dropdown** or **Radio buttons**.

&#x20;

`Click Custom option block to find settings`

<table><thead><tr><th width="157">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">List style</mark></td><td>Display options as a dropdown menu or a list of radio buttons.</td><td><strong>Dropdown</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Radio buttons</strong></td></tr><tr><td><mark style="color:blue;">List options</mark></td><td><p>Enter multiple options as a comma-separated list.</p><p>For example: "Option 1, Option 2, Option 3"</p></td><td></td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Variant options](https://help.fluorescent.co/cornerstone/product-pages/variant-options)