# Switch

### 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://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**

* Click Add Option > Switch to create a new option

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

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

* Tick on “This option is required” if you want customers must choose the option before checking out.
* Tick on ‘Hide option name” if you don’t want to show the option name above the option values.

For example:

<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 > 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" %}
**Conditional Logic:** Enable conditional logic if you want the Switch to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/)
{% endhint %}

{% 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://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://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://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://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://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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/product-options/18-option-types/choice-list/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
