Skip to main content

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 paired with the optional Custom Option Fees script, specific selections can add a hidden product 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.
  • Shopify automatically namespaces properties as properties[Patch Color] behind the scenes; you only need to provide the key in the block settings.
  • Reuse the same property key across languages by translating the cart label in your locale files if needed.

Customer experience​

  • Selected values submit as properties[Your key] = Selected option in the cart.
  • Required inputs use native browser validation, and the enhanced dropdown mirrors the selection to the hidden <select> so it works with 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 debugging tips.
  • If a conditional block never appears, double-check the comparison value spelling—it compares lowercase, trimmed text behind the scenes.

See also: