Size variant active state on a custom size drawer modal

Store Design

Topic summary

Main issue: Update a custom drawer-based size picker so the “Pick size” button shows the selected variant’s size (e.g., XL) after a user clicks a size.

Implementation context: A modified product-variant-picker/product-variant-options adds a “Combo” mode that opens a side drawer listing sizes. Goal is to reflect the chosen size on the trigger button.

Resolution: Achieved with a Shopify Liquid conditional using product.selected_or_first_available_variant and options indexing.

  • Assign first_variant_size = product.variants.first.options[1]
  • If selected_or_first_available_variant.options[1] != first_variant_size → display “Size picked: {{ selected size }}”
  • Else → show “Pick a size”

Notes:

  • options[1] is used as the Size option in this setup.
  • Logic treats the first variant’s size as the default (no explicit selection) and updates the button once a different size is chosen.

Status: Resolved by OP with a Liquid snippet; no open questions.

Summarized with AI on December 14. AI used: gpt-5.
1

How can I identify the variant clicked for size pills, to use that variants size as a button text?

I have built an extension of the product-variant-picker and product-variant-options to include a drawer design of the sizes. So if I pick “Combo” (added choice next to pills or dropdown) in my admin of variant picker block I get a button named “Pick Size” (in storefront) and if I pick that I get a modal drawer animating in from the side showing all variants sizes. So far pretty simple and working as intended.

Problem I’m unable to solve is that when I click any of the size variants in that list I need to find the variable or state of that variant so I also can write a conditional statement of the button “Pick size” text, to after a variatn size is clicked, display that variants size inside the button.

In short, how can I change the text “Pick size” to “XL” if I click a variants size named "XL?

Hope I explain this clear enough, my own head is spinning :slightly_smiling_face:

2

I actually managed to solve it myself with a little help of ChatGPT.

{% assign first_variant_size = product.variants.first.options[1] %}
{% if product.selected_or_first_available_variant.options[1] != first_variant_size %}
Size picked: {{ product.selected_or_first_available_variant.options[1] }}
{% else %}
Pick a size
{% endif %}