How to add a Product as a Variant in Another Product

Yes, In this tutorial, I’ll show you how to add a product as a variant within another product in Shopify.

So, I have clients who come to me with their Shopify accounts, and they have created separate products with different variants for the same product. For example, here we have a track pant with two variants: one in grey color and one in blue color. They have created a separate product for the grey color and another for the blue color. Now, let’s see how you can add this feature, so that when users click, they are redirected directly to that product.

First, it used to look like this, without options for colors. Now, let’s see how we can achieve this through code, which is very easy in Shopify. So, let’s start. First, you need to go to your Shopify dashboard, and here you need to create two meta fields for products. If you’re not sure what meta fields are, I’ll explain. Simply, when you go into any product, you’ll understand. So, when we enter a product, after installing the theme, there are different sections like title, description, images, etc. If we want to add any additional data, we can do that through meta fields.

Now, let’s see how to create these meta fields. First, you need to go to Settings, then click on Custom Data. After clicking, you need to go inside the products because we want to create meta fields for products. Here, I have created two meta fields: one for color and one for products. Now, let’s see how to create it. First, you need to click on the Definition and here, we’ll enter the name as “Color” for our product, as we saw earlier. We’ll select the Type as “Text” because we just need a single line of text here. And for the List of Values, we just need one value. After that, you just need to save it. I’ll discard it because I have already created it. After discarding, you need to create another meta field for the product’s name.

Then, you need to come back to your dashboard, and here you need to do a bit of coding. So, let’s edit the code. After editing the code, you need to press Ctrl + F to search in files. Search for the main product liquid file. After opening, press Ctrl + F again, and search for “case”. After finding, you need to insert the code there. I’ve already opened it here. After that, you need to add a comma at the end and paste the code here. Remember to add a comma at the end and then paste the code until here. After that, you just need to save the file. That’s it.

When you go back to your products, you’ll see your products like this: Cloud Grey. Now, when you click on any product, you’ll be redirected there, and you’ll see all the products like this in your Shopify account. But before that, there’s one more thing you need to add. I forgot to tell you earlier. First, you need to come back to your online store, then click on Customize. Go to the Product Section, then click on the Collection and here, you need to add the related product that we created. So, we’ll add it here. After that, just save it. And now, you’ll have this feature in your Shopify store. If you encounter any problems, you can DM me. And that’s the end of this video. Thanks for watching.