avada.io
AVADA logo
AVADA
Published on
Catalog

How to add linked options to your theme in Shopify

508 words3 min read
Author
  • Author
    Author:
    malie
    Twitter

You are owning an online store and each product has a lot of varied types, sizes or colors. You now would like to bring comfort to customers while they are shopping, hence options for buyers should become more automatic to match the first choice. As a result, this tutorial will give you the instruction of how to add linked options to your themes.

Table of content

Attention

This tutorial is an advanced level, so before editing your theme code, you should check the settings and duplicate your theme to create a backup version. Moreover, it is required to know about web design language namely HTML, CSS, JavaScript, and Liquid. These steps mentioned below is not compatible with Shopify sectioned themes nor non-sectioned types such as Brooklyn, Jumpstart, Solo, and Venture. In the case that you are not confident in what you will do, you should hire an expert.

Explanation of adding linked options

When you go to your competitors’ website, their options presenting to buyers tend to contain all categories without a filter to show whether each category has a certain color or size match with purchasers’ desire. This is a typical example:

example

In other words, you would like to create a secondary menu in line with the current choice to eliminate unavailable items when buyers are shopping.

For instance, you are offering two categories for customers to choose from. When visitors make the decision to select items in the first drop-down, you would like to create an automatic system appeared in the second drop-down. It means that the values in the second category are available with the first selection. If a product has three options, the third option will update to match with the combination of two selection above.

The steps to add linked options to your themes

Step 1:

You click Online Store and click Themes.

Step 2:

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

How to display customization in email templates

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:

link options

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

Conclusion

To sum up, this instruction will help you add linked option to your theme. The customization will help customers to feel more convenient when visiting your store, hence it is likely that they will come back to your shop and spend more.

Exclusive Offer: Shopify Deal for PageFly Audience

Start Your Online Business with Shopify 12 Day Free Trial + Pay Only 1$ For Your First Month

Exclusive Offer: The Online Store Starter Kit

Get the Shopify Free Trial plus the premium package designed especially for new Shopify merchants - all for FREE!

What’s in it for you?

  • The Shopify free trial
  • Ecommerce CRO checklist: set up a high-converting Shopify store - with over 300+ checkpoints to boost your conversion rate, AOV, and more (value)
  • Enjoy 2 months free on all AVADA paid apps (value)
  • Exclusive discounts on top-rated Shopify apps and themes + Additional perks (value)

How can I get it?

The Online Store Starter Kit will be delivered to your email after signing up for Shopify using the custom landing page Shopify made for AVADA’s audience. There’s no additional cost for you!

Start your Shopify Free Trial now and get it for free!

Advertisement
img Advertisement