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

Hoooraaaaay!!! I’ve dun it…[applause]

So i followed the youtube above then did wot fella described (im using the narrative theme FYI):

"For those of you who are having issues with the default variant not loading and requiring the user to select a variant before the script fires:

This is what worked for me on the Shopify Debut Theme.

Find the following code:
Shopify.linkOptionSelectors({{ product | json }});

It is located in the following if statement

{% if product.available and product.options.size > 1 %}
...
Shopify.linkOptionSelectors({{ product | json }});
...
{% endif %}

Simply move it directly outside of the if statement:

{% if product.available and product.options.size > 1 %}
...
// Line removed from here
...
{% endif %}

// Line added here
**Shopify.linkOptionSelectors({{ product | json }});**

& badabing badaboh!
SKILLz, cash monies dollar dollar bills coming my way (quickly converted to $btc & $doge ; )

Goodluck : P

ps. shopify community is changing some of the html 4 sum reason so dont copy from here…checkout the comments at https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61 post Mar 14, 2018

1 Like