> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/infinite-options/welcome/create-custom-options.md). # Create Custom Options {% embed url="" %} If you want customers to add a name, pick a color, choose a date, or make any kind of custom selection on your product page, you're in the right place.\ \ This guide walks you through setting up your first Option Set from start to finish. * Creating an option set * Adding and configuring option fields * Assigning them to display on products *** #### Step 1: Create a New Option Set 1. From the Infinite Options dashboard, click **Create Option Set** 2. Give your Option Set a name An Option Set is a group of custom fields that appear together on a product page. For example, you might have one Option Set that includes a text field for engraving and a dropdown for gift wrapping.
*** #### Step 2: Add Your First Option Click **Add my first option**. A picker will appear with all available input types. **Input Types**
| Input type | What it does | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Text field | Customer types freely. Best for short responses like a name or monogram. | | Large text | Multi-line text entry. Good for longer instructions or notes. | | Number | Customer enters a number. The field only accepts numeric characters. | | Radio options | Single selection. Always pre-selects the first value. If you need customers to make an active choice, use a dropdown with a placeholder instead. | | Checkbox | Allows one or more selections. | | Drop-down menu | Single selection. Add a placeholder to prompt customers to choose before adding to cart. | | Swatch | Color or image selection. The first value is pre-selected by default. You can configure the field to allow multiple selections | | Date picker | The customer selects a date using a calendar input. | *** #### Step 3: Configure Your Option After selecting an input type, you'll land in the option editor.
**Names** **Label on Product** is the text that appears above the field on the product page. **Label on Cart** is the text that appears in the cart, at checkout, and on the order. You can keep it the same as the product label or shorten it for order management purposes. **Required** Check **This option is required** if the shopper must fill in or select a value before adding to the cart. #### **Preview** As you configure your option, the preview pane on the right updates live. Use the **Product** and **Cart** toggles to see how the option appears in both places.
*** #### Step 4: Adjust Optional Settings These settings appear under the Optional section of the editor. Not all settings are available for every input type. **Default and placeholder** * **Default Value** -- Pre-fills the field when the page loads. The customer can change it before adding to cart. * **Placeholder Text** -- Hint text shown inside an empty field. It disappears when the customer starts typing. Only the customer's actual input gets saved to the order. **Conditional logic**\ When a customer makes a selection, the right follow-up options appear automatically, and anything that doesn't apply stays out of the way. See our guide on [conditional logic](https://shoppad.gitbook.io/infinite-options/conditional-logic/conditional-logic) for more info. **Help text**\ Additional guidance shown to the shopper. Display it as a **Tooltip** (an info icon next to the label) or **Inline** (text shown below the field). **Character limits**\ Sets the maximum number of characters a customer can enter. Useful for engraving or monogram fields with a physical limit. If your option has selectable values such as a dropdown, radio buttons, checkboxes, or swatches, you can add a cost to any individual value by clicking the price icon next to it. See [Increase the Cost of an Option](broken://pages/dMNqfyywVN5r1WsZqkRH) for details. *** #### Step 5: Add More Options When you're done configuring an option, click **Back** to return to the Option Set. To add another option, click **Add Option** in the top right corner of the Options section. Each option row has three icons on the right: * **Eye icon** -- Set rules for when this option shows or hides based on other selections. By default, all options are set to always show. See [Conditional Logic](/infinite-options/conditional-logic.md) for more. * **Copy icon** -- Duplicates the option * **X icon** -- Deletes the option
*** #### Step 6: Assign to Products In the **Assign to products** section, select which products this Option Set should appear on. You can assign by: Tag, Vendor, Type, URL, Handle, or All Products.
{% embed url="" %} *** #### Step 7: Save Click **Save**. Your options may take a few minutes to appear on your storefront. *** #### Not Seeing Your Options? If your options don't appear on the product page: * Confirm the Option Set is saved * Check that it's assigned to the correct product * Make sure the Infinite Options app block is installed on your theme If you need help with installation: \[[How to Install Infinite Options](/infinite-options/welcome/how-to-install.md)] *** #### Explore More Features * [Swatches](/infinite-options/inputs-and-field-settings/create-swatches.md) * [Conditional Logic](/infinite-options/conditional-logic.md) * [Increase the Cost of an Option](broken://pages/dMNqfyywVN5r1WsZqkRH)