> 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/swatch-and-button/button.md).
# Button
✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/button?variant=51025989140758)
### 1. How Does the Button Display?
The Button option displays as a group of clickable buttons that users can select with a single click. Each value appears as a button, making it easy to visualize and choose. This layout is ideal for selections like size, material, or service add-ons.
Example of how it appears on a product page:
* A product with Button options for choosing “Small”, “Medium”, or “Large”.
### 2. How to Create a Button
**Step 1: Add a New Option**
* Open **1. Add options**, click **Add option**, tick **Button** under **Swatch** on the **New options** tab, then click **Add options**.
**Step 2: Add information to the Button**
* Enter an option name for the Button (e.g., "Select Size")
* Add the option values (e.g., Small, Medium, Large).
* 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.
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 (conditional logic) if you want the Button to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)
{% endhint %}
{% hint style="success" %}
**Help text:** Add a short description to explain the purpose of the Button option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
{% endhint %}
{% hint style="success" %}
**Default value:** Pre-select the Button 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 “S” on Size to be selected automatically when customers enter the product page. How it looks like in your storefront:
{% hint style="success" %}
**Quantity:** Lets customers choose how many units of each value they want. Turn on the **Quantity** column for the values that need it (use **Columns** in the **Option values** table), then set **Min quantity** and **Max quantity** to limit the total quantity across all values. Learn more in [How to use the Quantity feature](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md).
{% endhint %}
**Step 4: Save and Test**
* Click Save to apply the settings.
* Visit the product page on your store to check if the Button option works correctly.
### 3. Real-World Applications of Button
* Sizes: Small, Medium, Large
* Materials: Leather, Canvas, Suede
* Extras: Add Dust Bag, Add Gift Note
* Customization: Choose Frame Color, Add Logo, Pick Layout
### 4. Key Features of Button
* The Button let users choose only one option from a predefined list, ensuring clear, exclusive selections. 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.
