Home > Shopify Development > How to add linked options to your theme

How to add linked options to your theme in Shopify

Sam Updated: March 09, 2024

Drive 20-40% of your revenue with Avada

Get Started

Are you running an online store on Shopify and finding it difficult to manage multiple product variations like size, color, or style? If so, adding linked options to your Shopify theme can help your customers easily select a product variant. This improves the shopping experience by showing only the options that match their first choices, reducing frustration and making shopping more satisfying. In this step-by-step guide, we'll walk you through how to add linked options to your Shopify theme.

Important Notice Before You Begin

This guide is designed for advanced users. Before you start editing your theme code, make sure to check your settings and create a duplicate of your theme as a backup. You’ll need a good knowledge of web design languages like HTML, CSS, JavaScript, and Liquid to follow these steps. Please note that this guide is not compatible with Shopify sectioned themes or certain non-sectioned themes such as Brooklyn, Jumpstart, Solo, and Venture. If you're unsure about making these changes yourself, it’s best to hire an expert to help you out.

Explanation of Adding Linked Options

When you visit your competitors’ websites, you might notice that their product options display every possible variation without filtering out unavailable combinations. This can be frustrating for customers who are looking for specific sizes or colors that might not be in stock. Adding linked options to your Shopify store helps solve this problem by creating a dynamic, secondary menu that updates based on the customer’s initial selection.

For example, if you offer two categories, such as size and color, linked options will ensure that the second dropdown (color) only shows options available for the chosen size. If your product has three options, the third dropdown will automatically adjust to match the combination of the first two selections. This makes the shopping experience smoother and more efficient, helping customers quickly find the exact product they want.

How to Add Linked Options to Your Shopify Theme: A Step-by-Step

Adding linked options to your Shopify theme can greatly improve your customers' shopping experience by showing only available product combinations based on their selections. Here’s a simple guide to help you set it up:

Step 1:

You click Online Store and click Themes.

Go to your Shopify Admin dashboard and click on Online Store in the left-hand menu.

Next, click on Themes to see your current theme.

Step 2:

Find the themes that you want to edit, then press Actions then Edit Code.

Step 3:

Look at Snippets directory and click to open Add a new snippet.

Step 4:

A box called Create a new snippet appear then you insert linked-options in the blank space:

Step 5:

When you create a new snippet file successfully, paste this code hosted on GitHub.

Step 6:

Remember to click Save.

Step 7:

Move to Layout directory, you will see theme.liquid and click on that.

Step 8:

Near the end of the file, before the closing </body> tag, paste the code below:


{% include 'linked-options' %}

Step 9:

Click Save and you add linked options

Final thoughts

Following this instruction, you've successfully added linked options to your Shopify theme. This customization helps create a smoother shopping experience by only showing relevant product options based on customer choices, making it easier for them to find what they want. A better user experience can lead to customer satisfaction and higher sales.

Catalog

How to modify the shipping calculator HTML How to add the gift-wrapping snippet in your cart template How to modify your theme.liquid file How to insert some JavaScript to your theme Delete the author's name in your theme Insert the search box on your Jekyll site using lunr.js Liquid Variables: assign, capture, increment, increment Liquid paginate: Split into multiple pages Update the product form to support dynamic checkout buttons Select which page to show when customers log in to your online store Modify the code for your payment icons Insert the security badge code to your theme Insert Disqus to your blog Insert breadcrumb navigation to your store Generate your snippet generate the "How did you hear about us" form field Generate and include an age-check snippet Generate a back-to-the-top snippet Edit correct quantities on the cart page silently Apply a class to your templates Update item quantity fields in the cart Update the collection-template.liquid file Modify the theme code to add the shipping calculator Insert the notification form code to your theme Insert custom fields to your theme's customer registration form Add Custom Fields to Contact Form in Shopify Insert a form field to your theme code Insert a Continue shopping link to your cart page Insert a checkbox to your cart page in sectioned themes How To Create A Contact Page On Shopify: Our Step-by-Step Guide

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.