Add a metaobject dropdown menu with conditional logic based on selected product variant

Store Design
, ,

Topic summary

A user is attempting to implement a conditional dropdown menu on product pages that appears based on selected variant options, with the selection carrying through to cart and checkout.

Implementation approach:

  • Created a metaobject definition with fields for trigger_option (variant value), label (display text), and value (dropdown options)
  • Set up a product metafield (custom.dropdowns) referencing multiple metaobject entries
  • Added Liquid code to render dropdown containers and JavaScript for conditional display logic

Current issue:
The dropdown menu fails to display when variant options are selected on the Atelier theme.

Recommended solutions:

  • Rename the “value” field to avoid conflicts with Shopify’s built-in .value functionality (suggested: “values” or “content”)
  • Simplify the Liquid loop structure to iterate directly through metaobject properties
  • Implement delegated event listeners in JavaScript, as themes often replace variant selector contents, detaching standard event listeners

Status: Unresolved; awaiting implementation of suggested fixes.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

As the title says, I am trying to create a conditional metaobject menu that only shows when certain product variant is selected. This menu has a few options and when the buyer adds product to cart, the information should appear in the cart and checkout processes.

What I had done so far:

1. Created a metaobject definition:

Field Type Example value Purpose

trigger_option List (single-line text) All White The variant option value that should reveal this dropdown (e.g. the value of Size / Color etc.).
label Single-line text Cord Length Text that shows above the dropdown and in the cart.
value List (single-line text) [“1m”,“2m”,“3m”,“4m”] The items that will become s.

2. Created a product metafield with a metaobject type that references the definition above. The namespace and key is: custom.dropdowns and it allows for a list of entries (multiple metaobject references).

3. Added the following code into a liquid code block inside my product information section, in between the variant picker and the buy buttons:

{%- if product.metafields.custom.dropdowns != blank -%}
{%- assign idx = 0 -%}
{%- for dd in product.metafields.custom.dropdowns.value -%}
{%- assign cleaned = dd.trigger_option | remove: "[" | remove: "]" | remove: '"' | split: "," -%}
{%- for trigger in cleaned -%}

{%- assign idx = idx | plus: 1 -%}
{%- endfor -%}
{%- endfor -%}
{%- endif -%}

4. Added the following Javascript into another liquid code block right under the previous one:

For some reason this is not working and no drop-down menu is displayed when the variant options are selected. Can someone tell me what I’m doing wrong and how to fix this?

By the way I am using Atelier theme, one of the new Horizon themes and the page I am trying to add it to is this one: https://www.orientalbazarstudio.com/products/flexible-bamboo-pendant-light?

Thanks in advance!

2

First, I’d avoid calling your metafield properties “value” as this will clash with builtin .value functionality. Especially since In your case it’s a list, so at least call it “values”…

Then, the first code can be like this:

{%- for mo in product.metafields.custom.dropdowns.value -%}
  {%- for trigger in mo.trigger_option.value -%}
    
      
      
    

  {%- endfor -%}
{%- endfor -%}

( Since you have a for loop, you do not need to wrap it with if .. endif )

As for the JS code – themes often delete and replace contents of variant-selectors after change in selected options, which means your event listeners are detached …

May need to use delegated event listener.

1 Like
3

Double that on avoiding using .value as a field name, shopify really shinkicked everyone by putting .value barnacles onto everything.

Either name it after the thing being stored, or something like .content , just be consistent