# Custom option

{% hint style="info" %}
The Custom option block was added in v1.1.0 — Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access the latest features.
{% 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.

{% 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 %}

<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>

## 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.

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

&#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>

### 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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FMMzpHu7ATzAXf1KlbfOb%2Foption-text.png?alt=media&#x26;token=de87d7c0-494c-476d-accf-fcf71317d887" alt="" width="375"><figcaption></figcaption></figure>

&#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 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>

### 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.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FrX6u6mXmNcWlBFvm65Fm%2Foption-checkbox.png?alt=media&#x26;token=e8bc7570-d6a5-4cc1-8863-6f34161eae25" alt="" width="215"><figcaption></figcaption></figure>

{% 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 %}

&#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;">Checked value</mark></td><td>Enter text that will appear in the order details.</td><td><em><mark style="background-color:yellow;">Default: "Yes"</mark></em></td></tr></tbody></table>

### Options list

***

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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FVXceTD2hvtBVl9eaqzJP%2Foption-list.png?alt=media&#x26;token=7ed4f0f7-e6cf-4c56-affe-9669d00eda80" alt="" width="375"><figcaption></figcaption></figure>

&#x20;

`Click Custom option block to find settings`

<table><thead><tr><th width="225">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>

&#x20;

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

&#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;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 32px</mark></p></td></tr></tbody></table>