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.
29

I thought I’d post the updated solution on this thread to save everyone some time.

A commentor (Jonathon Moore) on the original GitHub posted a modified code which now works with Shopify’s new sectioned themes. It’s works perfectly, you just follow the same instructions as the original post.

Also, according to Coding with Jan, he provides a slightly altered version of the render so it only applies to the Product Pages:

{% if template contains 'product' %}
  {% render 'linked-options' %}
 {% endif %}

(H/T to

1 Like