# Button The **Button** option type allows customers to make selections by clicking on button-style options on the product page. This option type provides a user-friendly and visually appealing way to present choices, such as size, color, or style. 👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/buttons) to see how it works *** ## **Basic Option Settings:**
#### **1. Option Name** This is the internal name used to identify the group of buttons within your app. It helps you manage and organize your product options effectively. #### **2. Label on Product** This label is displayed next to the buttons on the product page, guiding customers on what the buttons represent (e.g., "Choose Size" or "Select Style"). #### **3. Label on Cart** This label is shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the options selected by the customer. #### **3. Option Values** You can add button values either individually by clicking "Add option value" or in bulk using the "Bulk add" feature. Each button value represents a distinct choice (e.g., "Small", "Medium", "Large"). #### **4. Default Value** Set a default selection for one of the button options to be pre-selected when the product page loads. This can highlight a recommended or popular choice. #### **5. Required Field** This setting makes it mandatory for customers to select a button option before they can add the product to their cart. This ensures that all necessary choices are made. #### **6. Hide "Label on Product"** You can opt to hide the label next to the buttons on the product page for a cleaner and more minimalist layout. #### **7. Show "Quantity" for Option Value** Enable this option to allow customers to specify the quantity for each button option. You can set minimum and maximum quantity limits to control how many of each option can be selected. #### **8. Add description for option value** You can add a descriptive text below the option value to provide additional information about the selection. #### **9. One Time Charge** This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the "One time charge" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased. #### **10. Option URL** This setting allows you to link specific button options to external URLs. Customers can click on these buttons to access additional information or be directed to another page or site. {% hint style="info" %} [How to set up Option URL for your options](https://options-docs-v2.avisplus.io/app-features/option-url-feature) {% endhint %} #### **11. Conditional Logic** Apply conditional logic to control when certain buttons are displayed based on other selections made by the customer. This creates a dynamic and tailored shopping experience. {% hint style="info" %} [How to set up Conditional logic for your options](https://options-docs-v2.avisplus.io/app-features/conditional-logic-option-b-shows-if-option-a-is-selected) {% endhint %} *** ## **Advanced Option Settings:**
**1.** **Change product image on option selection** When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option. {% hint style="info" %} [How to change product image upon option selection](/storefront-display/change-product-image-upon-option-selection.md) {% endhint %} #### **2. Show slider** Transform extensive lists of swatches into a streamlined slider using the slider feature. This functionality tidies up your product page, presenting options in an organized and visually pleasing manner, particularly beneficial when offering many selections. * **Number of Rows:** The slider defaults to 1 row. To display more swatches simultaneously, choose the number of rows per slide. For instance, selecting 2 rows with 4 swatches per row will show 8 swatches in one view. * **Swatches per Row:** Set the number of swatches per row by considering swatch size, option label length, and label position. For default swatch sizes with labels below, about 3 or 3.5 swatches fit per row. If labels are beside swatches, you might fit 2 per row. You can choose whole numbers like 3, or use 3.5 to display half of the last swatch if needed. * **Show arrows icon:** Enable the arrow icon on the slider by selecting this option. * **Show indicators:** Show indicators marking the current slider page. #### **3. Display selected value on label** When this setting is enabled, the selected value appears next to the option label. **4. Price display type** Decide whether to **show or hide** the additional price on the slider interface. #### **5.** Tooltip display * **Default:** Display only the selection's image on hover. * **Tooltip as value:** Show the selection image and option value on hover. * **Tooltip as description:** Display the selection's image and its description on hover. #### **6. Option Value Column** Organize the button options into 1, 2, 3, or 4 columns for a more organized and visually appealing presentation on the product page. #### **7. Tooltip** Add tooltips to the buttons to provide additional information about each option. When customers hover over a button, the tooltip will display, offering further details. #### **8. Help Text** Display help text below the buttons to offer further explanation or instructions, helping customers make informed selections. #### **9. Class Name** For advanced customization, add custom CSS class names to the buttons. This allows you to style them according to your brand’s design standards, ensuring a cohesive look across your product page. --- # 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://options-docs-v2.avisplus.io/option-types/all-option-types/button.md?ask= ``` 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.