Product custom select

This block renders either a dropdown, an enhanced dropdown, or a radio group for single selection inputs.

Related: Need to add fees to specific options? See Custom Option Fees.

Configuration steps

1. In the Theme Editor, add Product custom select inside your product form block group.
2. Enter the Line item property key (cart label).
3. Fill in the Options field using separators such as commas, pipes (|), or forward slashes between each choice—the block parses these formats most reliably. (Individual lines are supported but separators are the recommended default while Shopify addresses newline parsing quirks.)
4. Choose the Input style:
   • Standard select: a native HTML select with optional placeholder.
   • Enhanced select: renders a styled button/list but still syncs to a hidden native select for accessibility.
   • Radio buttons: lays out each option as an accessible radio with labels.
5. (Optional) Toggle Mark as required, add helper copy, and set font sizes and border radius to match your design.
6. To attach an upcharge, enable Charge a fee for specific options and paste lines using Option name|fee-product-handle (handles must match an existing hidden fee product). The block appends the fee price next to qualifying options automatically.

Shared features

All custom option blocks share these capabilities:

• Conditional display: Show or hide based on the value of another property using the Conditional logic settings. The block remains hidden and its inputs are disabled until the condition is met.
• Product tag filter: Limit to products with a specific tag using the Only show when product has tag setting.
• Width controls: Choose full or half width on tablet/desktop for easier layout mixing.
• Fee support: When Custom Option Fees are configured, selected options add the matching charge to the cart. Read more in Custom Option Fees.

How to name properties

• The Line item property key becomes the label in the cart and order details. Use plain text such as Patch Color or Engraving.
• Enter only the label, such as Patch Color, in the block setting.
• Keep property keys consistent across languages and customization steps. Contact 424 Solutions if you need help translating order labels without changing saved selections.

Customer experience

• The selected option appears under your chosen label in the cart and order, for example Patch Color: Indigo.
• Required fields prompt customers to make a selection. The dropdown supports keyboard navigation and screen readers.

Troubleshooting

• Confirm each property has a unique key before testing. Shopify overwrites duplicate property keys with the last value submitted.
• When fees are involved, preview the cart to ensure the correct fee product is added. Refer to Custom Option Fees for troubleshooting steps.
• If a conditional block never appears, check that its comparison value matches the intended option. Capitalization and spaces at the beginning or end do not affect matching.

---

See also:

• Custom line item properties overview
• Product custom multiselect
• Product custom property
• Product file upload
• Product swatch groups

Match your variant buttons

In Vero 1.8.3 and Vero2 2.0.1, choose Radio buttons, then turn on Match product variant buttons to use the theme’s variant-button colors, shape, width, and selection effects. The setting is off by default. Check long labels, selected states, mobile wrapping, and keyboard focus after enabling it.

For gallery selections, checkbox conditions, and mapping examples, see Design selections and conditional options.