Variants - Link product options

Store Design

Topic summary

Core Issue: Shopify doesn’t natively link product variant options in dropdown menus, allowing customers to select unavailable combinations. This tutorial addresses updating secondary dropdowns to show only available options based on prior selections.

Implementation Method:

  • Add a new snippet file called linked-options to the theme
  • Insert {% render 'linked-options' %} code before the closing </body> tag in theme.liquid
  • Uses JavaScript code hosted on GitHub Gist to dynamically filter options

Key Limitations:

  • Not compatible with Shopify sectioned themes or non-sectioned Brooklyn/Venture themes
  • Officially unsupported by Shopify; requires HTML/CSS/JavaScript/Liquid knowledge
  • Works with dropdown menus only, not button/pill-style variant selectors

Community Solutions:

  • Updated code versions exist for Debut theme (multiple users confirmed success)
  • Narrative theme requires moving Shopify.linkOptionSelectors() outside conditional statements
  • Some users report needing to select an option twice before the script activates

Ongoing Challenges:

  • Doesn’t work on featured product sections/homepage implementations
  • Breaks with theme updates or multi-language setups
  • Button-based variant selectors require custom refactoring
  • Solutions are theme-specific; many users hire Shopify Experts for implementation

Status: Discussion remains active with users seeking solutions for newer themes and Shopify 2.0 compatibility.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
11

Not yet. I might check it out and see how it works.

For now, I’ve gone to my translations and I’ve changed “Unavailable” to “Invalid product combination” as well as labeling the options a little more clearly so the user can understand which sizes in Menu 2 apply to each of the selections from Menu 1.