> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Button 1. [OPTIS Product Options, Variant](/product-options) 2. [20 Option Types](/product-options/20-option-types) 3. [Swatch & Button](/product-options/20-option-types/swatch-and-button) # Button A **Button** shows each value as a clickable button - customers select one with a single click, ideal for a short list like sizes or add-ons. ✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/button?variant=51025989140758) ![](https://storage.crisp.chat/users/helpdesk/website/-/8/8/0/2/8802b124dd76a800/5a191561-8754-4e59-b945-ef77b6_667ukj.png) ## When to use a Button * **Sizes** - Small, Medium, Large. * **Materials** - Leather, Canvas, Suede. * **Extras** - add a dust bag, add a gift note. ## How to add a Button option ### Step 1: Add the option Open **1. Add options**, click **Add option**, tick **Button** under **Swatch** on the **New options** tab, then click **Add options**. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/1/d/1/51d1705d66641800/285b9090-5fff-4966-af21-04c81e_15v6l7e.png) ### Step 2: Name it and add values Enter the **Label on product** (e.g., "Select Size") and add the **Option values** (e.g., Small, Medium, Large). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/d/7/1/ad719f1ce2472800/e6d92d8e-62e3-4c8a-ba10-061581_jj4r9a.png) ### Step 3: Save and test Click **Save**, then open the product page on your store to check that the Button works correctly. ![](https://storage.crisp.chat/users/helpdesk/website/-/4/f/1/f/4f1fc34d7b87a000/641d7b5f-20df-41e3-8cf2-9c2b7e_f9cobn.png) ## Option settings Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value: * **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option). * **SKU** - a SKU for that value. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works). ![](https://storage.crisp.chat/users/helpdesk/website/-/3/5/6/0/356065c02daaf400/99454a05-8056-4b29-bf08-835ae7_1h5ewtd.png) ### Default value Toggle **Default** for the value that should be pre-selected when the customer opens the product page (e.g., "S" selected automatically). ![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/5/2/a252dcf60a743000/24e84076-83f5-43ff-88b6-a98fdb_50dwwo.png) How it looks on your storefront: ![](https://storage.crisp.chat/users/helpdesk/website/-/c/c/4/5/cc45526edb15b0/d91be911-6599-4119-be05-8236c8_1ky9wie.png) ### Quantity Turn on the **Quantity** column so customers can pick several values and set how many of each, using **Min quantity** and **Max quantity**. Available on the **Platinum** plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FpVjf3GP2d59ZMTrp2j1C%252Fimage.png%3Falt%3Dmedia%26token%3D543f72c4-4751-4931-aac2-e81d0b80ecb9&width=768&dpr=3&quality=100&sign=162ac2954af9cf36862caf2aae48e949&sv=3) ### Limit how many values can be selected Set **Min** and **Max** to control how many values a customer can pick. If they pick fewer or more than allowed, OPTIS shows a message below the field, e.g. **Min selector: 2** or **Max selector: 5**. Available on the **Advanced** plan and above. See [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FB0K7SjKEv9fKvliTuDFZ%252Fimage.png%3Falt%3Dmedia%26token%3D8960fcdc-0938-4522-957b-583cb910408f&width=768&dpr=3&quality=100&sign=5192c28527dcf00247a4da90327f2fab&sv=3) ### Help text Add a short note explaining what to choose, shown as a **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**. Available on the **Platinum** plan and above. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FTTd0Z02tyJJgBCQqIle2%252F9.png%3Falt%3Dmedia%26token%3D3f4c410a-1b59-48ea-b53a-d606ebed96fd&width=768&dpr=3&quality=100&sign=acf10114cb9a3fe653310d8cfd264b75&sv=3) ### Show or hide with Visibility (conditional logic) Show or hide the Button based on another option. Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics). ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FbxMoD0d6ntEOfnsRTbDo%252Fimage.png%3Falt%3Dmedia%26token%3D10dc9eb9-61c2-4b25-95de-0c8f248ead80&width=768&dpr=3&quality=100&sign=c240b2120aacfcf754711f64b69c985c&sv=3) ### Layout In the **Display** tab: set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the option takes, and **Option value orientation** (**Horizontal** or **Vertical**) to lay the values out in a row or stack them. ![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252Fdefi5ZItv88u1oWmRHWD%252Fimage.png%3Falt%3Dmedia%26token%3D462eca8f-fac2-45a1-8813-869858781e4f&width=768&dpr=3&quality=100&sign=77677501fd797e61111f73fe6531bb29&sv=3) ## Related guides * [Swatch](/product-options/20-option-types/swatch-and-button/swatch) * [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option) * [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options) * [Limit Min/Max Selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch) * [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)