> 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/switch.md).

# Switch

{% hint style="info" %}
**Plan:** **Switch** is available on the **Platinum** plan and above. On the Free plan you can still try it on one live product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features.md).
{% endhint %}

### 1. How Does the Switch Display?

The Switch option displays as a switcher that users can turn on or off with a single click. Visually, it resembles a small horizontal track with a circular handle that slides from one side to the other. It can be used individually or in groups when multiple choices are allowed.

Example of how it appears on a product page:

* A product with a Switch to select “Yes” on Add Gift Box and Greeting Card

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FEimKbGLypc4KUjjIibYn%2Fimage.png?alt=media&amp;token=feffb83d-e6fa-45cf-81cb-456df00471c0" alt=""><figcaption></figcaption></figure>

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

### 2. How to Create a Switch

**Step 1: Add a New Option**

* Open **1. Add options**, click **Add option**, tick **Switch** under **Choice list** on the **New options** tab, then click **Add options**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FnGaqznnR0Koevt5envVQ%2Fimage.png?alt=media&amp;token=9e4c27b9-7b1c-4103-bfb6-07eb4181ac6f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F7SNSXVUviYMlPoJxpwmf%2Fimage.png?alt=media&amp;token=a273c879-2853-440f-a058-a5cfafaabcb3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdIuQ4WIfUBX8m4xpn-Cb7HG7JzqkSdodsuq6ec7zKhu--o-SdfGl1LO0k_vvQhG6TjlCuZDquTSmw6M2Nws3amyQVnZFbu2hMqvqXyY0yV4k7VgoazQSxzS3TZGaO-duFhmTVmyQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

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

* Enter an option name for the Switch (e.g., "Add Gift Box and Greeting Card")
* Add the option values (e.g., Yes/No).
* Tick on **Required field** if you want customers must choose the option before checking out.
* Tick on **Hide option label** if you don’t want to show the option name above the option values.

For example:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FDkR9FpAnbpfB1rO22vyh%2Fimage.png?alt=media&amp;token=7061e92c-00bf-4ee2-af92-fd1713f36177" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebPGuGQofOlVmN3fYlS22_teBmi-lqlfsoCg69TDABH2tYs2l5CrDu0H_ZVpjTBxTzwy75fNr5EZciKZyYsM78AbQjBEAEx3-3EN9CTv8h544gC7A-Us5XvHJp2Fz-1n-nIZmydg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdsKywnADACvcstXeZiH75URR-9prh3QDtw7mdJWrBwm4zHhlt7KySrV1FQycdwR4sQdnlfxZsYObPx-nqL-DQ4tPJfd8PWKV4cQdf_DdGFsPTejo_KgHx8Gd5zOUJepx2idSqy?key=DC83dM0yOWsDjpoRFQoUWeuE)

Other features:

* Price add-on > Extra fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price add-on > Upsell product – [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 Switch to show/hide only when a customer selects a specific option from another field. [How to set up Visibility?](/product-options/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FcQwQPjRflLW60VUOQBqn%2Fimage.png?alt=media&amp;token=34ba7a93-91b6-41e4-8805-07fc329cd007" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Help text:** Add a short description to explain the purpose of the Switch 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%2FuZoETiaRK2wqRlA2I367%2Fimage.png?alt=media&amp;token=5e6c5bf1-a9cd-4ef1-8835-e42b4ce3eb74" 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%2F1neSoZCiwSc1WafqTTsh%2Fimage.png?alt=media&amp;token=79008b1b-1ceb-430c-95bd-e4a0b777ea58" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
**Default value:** Pre-select the Switch 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 “Yes” on Add Gift Box and Greeting Card 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%2F6ivXRpEBLeNAdLBeTloD%2Fimage.png?alt=media&amp;token=3c9fbec4-bb8b-4e9e-8a86-bbce3e00861e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeIChmjKM1MhhNQZsX3FyJR3-rUf_eWxnb_hlfHdvKLdTer2JoFABNcSYwO6NTNEI07sfEfeTzQyfJSarJA8qmibAlF0H-u9Lxup8c7iDlDOSgni2Cs8AbtmO07FMYi_ICBkzXl?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%2FuVhDfUL8mWDBuJLDaBbF%2Fimage.png?alt=media&amp;token=f79b99dd-0ce7-41c1-9aa9-9204b4a9e167" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
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%2FElWJqztv15QsmpCF9GS5%2Fimage.png?alt=media&amp;token=f4bacab4-1c3f-44e3-9427-4198a2418b7c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcqME2M0r2jFiyvteoA8uhCqt3pEAEqWYv3DU36ff5Q0Kne8N5WJIRBwgAjBTmBwRrv0RvFnD7qNRmNF8q19zve2YKdd-zRVTuLzrV_LS9fkVzNlAjAA0Qrf73abaQTJCGlAk5S?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 Switch option works correctly.

### 3. Real-World Applications of Switch

* Product Features: Activate additional services like gift wrapping, or Yes/No questions.
* Newsletter Signup: Opt in for email updates or promotional offers.

### 4. Key Features of Switch

* The Switch option allows users to select one or multiple options with a single 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>
