> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/custom-options.md).

# Custom options

{% hint style="info" %}
This feature was added in v1.4.0 on Oct 6, 2022. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

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

{% columns %}
{% column %}

<figure><img src="/files/li0UFiJdCseorSXOPv4O" alt="" width="375"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Watch tutorial

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

<h2 align="center">Add custom option block</h2>

***

* Under **Product overview**, click **(+) Add block** and select **Custom option**.
* 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](/stiletto/general/editing-themes/using-templates.md) to design different page layouts.

[Add dynamic content](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% 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>

<h2 align="center">Set up custom option</h2>

***

* 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).

<sub><mark style="color:$info;">Click Custom option block to find settings<mark style="color:$info;"></sub>

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

### <mark style="color:$primary;">Text field</mark>

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

<sub><mark style="color:$info;">Click Custom option block to find settings<mark style="color:$info;"></sub>

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

### <mark style="color:$primary;">Checkbox</mark>

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

### <mark style="color:$primary;">Options list</mark>

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

<img src="/files/vwd5q1YG33uqygMJWOjr" alt="" width="375">

<sub><mark style="color:$info;">Click Custom option block to find settings<mark style="color:$info;"></sub>

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

***

> **Related links**
>
> [Product template](/stiletto/product-pages/product-template.md)