How to add a Product as a Variant in Another Product
Is it possible 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. Here is the Source code: Scroll lower down in main-product.liquid until you find a line that says {% schema %} (or just search for ‘{% schema %}’). Paste the following code directly onto the next line after “blocks”: [ (Press enter to move the app block lower down) { “type”: “related_products”, “name”: “⚡ Related Products”, “settings”: [ { “type”: “text”, “id”: “heading”, “label”: “Heading”, “default”: “Related Products” }, { “type”: “number”, “id”: “heading_font_size”, “label”: “Heading font size (px)”, “default”: 18 }, { “type”: “color”, “id”: “heading_color”, “label”: “Heading color”, “default”: “#121212” }, { “type”: “color”, “id”: “hover_border_color”, “label”: “Border color (hover)”, “default”: “#121212”, “info”: “Make color field blank (transparent) if you don’t want a border” } ] } The main output source code: Find the line containing {%- case block.type -%} in your code. It should be located directly under {%- for block in section.blocks -%}, where all product information blocks are added. Paste the provided code right after {%- case block.type -%}. The next line would typically be {%- when ‘@app’ -%}. Insert the code before this line by hitting enter to create a new line and move the existing one down. If the code pastes incorrectly, adjust the indentation for clarity. Use the tab key to indent and shift+tab to unindent as needed. {%- when ‘related_products’ -%} {% if product.metafields.product_info.related_products %} {% assign relatedProducts = product.metafields.product_info.related_products.value %} {%- liquid assign has1product = false for prod in relatedProducts if prod.available == true assign has1product = true endif endfor -%} {% if has1product %} {{ block.settings.heading }} {% for prod in relatedProducts %} {% if prod.available == true %} {{prod.metafields.product_info.product_color}} {% endif %} {% endfor %} {% endif %} {% endif %}
How to Add Discount Badge on Shopify | Increase Prepaid orders in your Shopify Store
Learn how to increase prepaid orders on your Shopify store by adding discount badges https://www.youtube.com/embed/qmYP0tktRCU?si=jjU3D8bkdP8NnAym In this tutorial, we’ll guide you through implementing the code step by step. Watch now! If you want to increase the percentage of prepaid orders or encourage prepaid orders on your Shopify store, you can do so by offering discounts. Let’s see how we can implement this through code. It’s quite easy. First, you need to go to your Shopify dashboard. Here, we have already placed the badge that we’ll be using. So, let’s add this badge. You can upload it in the Files section under Content. I have already added the badge here. You can download the link for it. I’ll provide the link in the description. Now, we need to open our online store. After opening the online store, you need to edit the code. Search for the main product file, which is usually named “product.liquid.” Open this file, and we need to place our code below the Buy Now button. I had removed this code earlier for making the video. Let me refresh and show you. The code isn’t here now. We need to find the Buy Now button. Press Ctrl + F to find it, then press Next. Once we find the Buy Now button, we go to the next step. Our Buy Now button is here now. The code ends here, so we’ll implement our code here. We’ll copy this code and paste it here. Just remember to replace the image link you copied earlier from your store. Replace it here, and simply save it. If you have any other offers, like changing from an extra 10% off to 15% off, you can change all those lines from here. If you need to change anything in terms of styling or colors, you can do it from here to here. Save it, and let’s check if our code has been implemented on our website. Once we refresh, our code is here. So, you can add this code to your Shopify store to increase prepaid orders. If you need any help with your Shopify store, you can DM me. Thanks for watching! Here is the Source code: <!– Custom Code Starts –> <div><h4><img src=”https://cdn.shopify.com/s/files/1/0812/3639/4295/files/Tick.png?v=1707473854″> 2 Offers Available</h4></div><div><p><span>EXTRA 10% OFF</span> – Use Code <strong> “NEW10″</strong></p></div><div><p><span>GET 5% OFF</span> – Additional 5% OFF on<strong> PREPAID ORDERS</strong></p></div> <style> .badge-container{display:inline-flex;flex-wrap:wrap;align-content:space-around;background: #cef8e4;border-radius:5px;padding: 10px 1em;min-width: calc(100% – 0px);align-items: center;line-height: 1.3;height: fit-content;margin: 5px 0;}.offerheadline{color: #fff;background-color: #039910;padding: 2px 5px;margin: 0.5rem 0 0;width: fit-content;font-family:roboto;line-height: 1.3;font-weight:600;font-size: calc(100% – 2px);}.available-offer h4{margin-bottom: 0;} .available-offer p{font-family:roboto;}.available-offer h4{font-family:roboto;/* color:#dc3f45; */color:black;padding:10px;font-weight: 700;}.available-offer img{width:20px;padding:0;margin-bottom: 4px;}</style> <!– Custom Code End –>