How to Add Different Descriptions Per Variant - Shopify Tutorial
HTML-код
- Опубликовано: 6 сен 2024
- In this video we'll learn how to add unique variant descriptions to your products.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan....
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan....
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
🔍 SEO Description:
We're covering how to add adding distinctive descriptions for each product variant on your Shopify store. Displaying details of each variant, can help your customers make more informed decision and also reduce returns. In order to achieve this we're using a concept called Shopify Metafields. More specifically we're using variant metafields which we display on the product page. Following along you will learn how to add a description for each variant.
codingwithjan.com
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-career-advice
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-developer
Just found your content and you have helped me so much understand how liquid and JS works. You break it down so clear. Thank you!
Thank you a lot! However, in this example, you added descriptions for each (coffee) variant directly on a product page. And it works for one product. But if a store has dozens of products with several variants for each of them and descriptions were already created as meta fields on the corresponding product-variant pages? Is it possible to display these variant-description meta fields to a template product page? Thanks!
FANTASTIC walk-through Jan. Thanks so much!
I love the general rule liquid = before page loads, javascript = after page loads. Never thought about it in such a simple way, but totally makes sense!
Awesome!! :D
Thanks for the great feedback!
Great video!
I have a question: I followed step by step all the instructions, but why is it that when I inspect the frontend after inserting the script, it appears as if the script is empty? I have carefully checked every single word, but the dropdown menu doesn't appear like it does for you. (timestamp: 30:28)
Thank you in advance! Congratulations again!
Hi there, thank you so much for posting this video. It's an amazing walkthrough. I'm having a bit of difficulty as I am working on a macbook. Everything was going smoothly until I inspected the page after putting in the "load metafield data". There was an error coming up and I'm unsure if it is to do with the fact that I'm using "Sublime Text" to code. I also went to take a look at my shopify theme and I noticed headers are now missing, which I am unsure as to why that happened...
This is a really good video. I've always struggle to pass liquid data to javascript on the stores I've work on. Will definitively watch this video multiple time.
Funny thing is that I was about to do the exact same thing for my client. I think Jan sees the future.
Awesome timing! 😁
thanks
This video has been a lifesaver!! Watched it a few times so I could go along and do it at the same time as you.
Will need to watch the rest of your videos and learn more about Shopify.
Thank you!
Thank you so much for posting this! But my question is how are your variant selections looking like that? Mine are completely different. Did I do something wrong cause I can’t look up variants in the coding
Great video!. It is mad that shopify could "Easily" just add the variant metafields to the product page like product metafields, removing the need for any potentially unscalable custom work.
Good work! Thank you for this new helpful video Jan!
Awesome video. Wow, I wish you had been my teacher in my academic coding classes. I really like how you review each step!
made my day. :-)
Wow, exactly what I've been searching for! Thank you for creating such a helpful video.
I have a question.
In my Shopify store, all products have two variants: one is "add image," and the other is "no thanks." I want to hide the "file upload field" when a user selects the "no thanks" variant. How can I do this? Could you please create a video explaining the process? Thanks in advance.
Thanks for the great feedback! :-)
One idea that comes to mind:
As you've seen, in the Javascript we have access to the current variant object. This also contains the exact options that were selected.
So you could do something similar to following
if currentVariant.option2 == "no thanks"
--> hide details element
else
--> replace details text and show element
Awesome video. Thank you so much for converting the complex thing to simple. Please create more videos like this ❤❤❤❤
Thank you for demostrating your thought process ❤
Thank you so much for posting this up. It was super easy to do following your instructions. Great Job
Glad you enjoyed it! :-)
Fantastic video, great instructions, & super informative. Thank you so much!
Thanks for this video, had a request for this very feature last week! Will be much quicker to implement in January now! 😂
This is really helpful. Can you make video for set limitation for minimum purchase price and Maximian purchase price per order e.g.($10 - $1000)
Amazing tutorial. Thank you!
Thank you very much, this has helped me very much!
Awesome! :-)
If this was helpful you'd probably love the new Shopify JavaScript training I'm working on. (probably launching in June). Stay tuned for updates. ✌
Hi Jan, thanks a lot for this video. The only thing I do not understand is, why each time I add a new collapsible raw, the same metafield information appears in each and every collapsible raw :) Can I limit this description only to one collapsible raw so that I could use other collapsible raws for a different kind of information?
hi, in focal theme there is no this.currentVariant, what do I do ? how can i get the variant Id?
Hi, this greatly depends on the theme code and exceeds what can be explained a YT comment. But if you like I could still help you find a developer who can help out on this.
codingwithjan.com/developers
More videos like this!
I implemented this. I did it on a local dev environment and I needed to restart the Shopify CLI dev login for it to work not sure why. Maybe a weird behavior with liquid on dev envs idk. On another note. One thing to notice is that if the customer adds a new accordion it messes this. Maybe a solution is creating a new custom block just for this with some sort of settings so the client chooses what metafield to be displayed on that block?!
Anyway, amazing teaching style. Most coding tutorials are more of a Demo than actual teaching. You are a good teacher.
Hi can we add image in collapsible row using metafields
Store the image URL or File reference in the meta field.
Render it into am html image tag (theme files)
@@CodingWithJan Thanks I'll try that approach.
Is there a copy-paste version of the code? I got some errors difficult for me to trace. thank you.
thanks a lot very helpfull. and the way of describing the things is osm.
Can you do part 2 of this video where instead of simple text, it's pages with video and everything
Not planned around this time, but appreciate the idea. :-)
This would mostly involve basic understanding of HTML CSS and is not exactly Shopify specific.
Sooo ein krass gutes Video du hast mein Tag gerettet!!!!! Du bist so ein Macher!!!!!!!!!!!!!!!!!!!!!! Hast mein Abo für immer! Like sowieso
🤣 Super gerne 🙌 :-)
@@CodingWithJan Eine Frage hätte ich allerdings noch, wenn ich jetzt mehrere collapsible tabs habe, wie kann ich im main-product.liquid sagen das, der Text nur in einem bestimmten tab und nicht in allen angezeigt werden soll?
Hi Jan
You're doing great
Can you tell is this Process work with all the available products in my store.
Thankyou
Hi, I have multiple variants, and on add to cart or buy it I want the selected item to show exact details except the featured image. I want the variant to be associated with first vatiants image kn cart and checkout is it possible?
Awesome man, it is helping me a lot just dont delete it xd
i have done this its working fine, but i have done this directly in product description, but it shows blank when page loads when i click on variant selector then the div is populated, i want this to show when when product is first loaded without selecting variant
Hey,
It works for me...but i have to refresh each time to see the change in decription when selecting another variant. Why is that? where did I go wrong?
its json. make sure there isnt any special characters like: " and so on, and make sure you didn't pressed "enter" to create a new line, it will ruin your code.
Hey There
Love your videos, great explanations and easy to understand.
I'm trying to do something similar to this in my shopify store.
But instead of changing the variants descptions for each variants. I need to have the title/product name change each time a new variant is selected?
Do you have any help or ideas you could give me?
Thanks heaps
Hi there! :-)
It would work relatively similarly. Just instead of replacing the tab content, you'd select the headline element. It doesn't require a crazy amount of HTML CSS skills, but if you'd rather focus on brand building / marketing, here I'd recommend consulting with a dev.
Hi, this code will work only if you have a single collapsible-tab on your product page. In case of multiple collapsible-tabs how do we make this work?
This is a bit more complicated.
You'd need to assign unique ids to the HTML markup for each tab.
In your javascript you can then reference these unique Ids
great explanation, but what if we need to use this with richtext metafield, will this work with that ?
In theory yes. Instead of replacing the innerText of the element, you'd need to have a container where you replace the innerHTML.
Little hard to explain in a RUclips comment, but with a bit of Google research maybe you can do it.
I can also help you find a dev if you just want to get it done:
www.codingwithjan.com/hire-a-developer
When i watch your videos i start believing i can program 😅
Thank you, this is what I was looking for, for a very long time. However, based on experience and my needs, I would like to post few questions.
• Would it work if we made meta filed something like ”product spec” and place it on different products, so that it works for every product. Coffee is a bit specific, and for any other product we would need to change the code, if I'm not mistaking, we would need to add meta filed unique identifier from each product.
• Now you One product option with variants for Blend of the coffee. What would happen if you hade tow more, that doesn't require meta filed output, but there is a meta filed for them. Eg. lets imagine that you had Packing Size fir this coffee. And that SIZE was also added to different meta filed e.g. SIZE or Weight. And you had a color option as well, but we dont want that in the collapsible content.
• Would it work if we add meta object to the met afield, for the products that repeats throughout the store.
In particular I need that for Product Spec like T shirts - having like Premium and Standard. But it would be annoying to paste the product spec for each meta filed on multiple t shirts, and not to mention the changes, if any is needed in the future. And other products would also share the same principle, but have a different description.
So, can approach be more unified and automated for any product we need, without changing changing unique met afield identifier in the code each time.
Awesome questions :-)
1) product specs / a more general naming would also work.
2) Here it depends on the exact use case, but you can make pretty much any combination work.
For example you could check whether certain metafileds exist with "if-statements". Or create different product page templates for different types of products.
3) With the metaobjects I'd be a bit careful. In theory yes it would work.
However, in this example our data element was super simple "variant id" : "text".
More complex objects would need to mapped accordingly.
I hope these are useful starting points!
@@CodingWithJan Thank you for your reply. I will try to output Meta Object "with same title" as meta filed and Variant Option. As you mentioning use case scenario, mine is for hoodie, t shirts and wall art. So you can imagine that each of those categories/product type will share common product spec. E.g. most of the T Shirts will have two material options, and same description for both options on all t shirts listed. Which can be 10s or 100s. So meta object is logical solution to keep things neat and make changes on one place. Sure I'm not the only one with this kind of scenario, so there is advice number one.
Second would be to consider outputting text to Custom Liquid Field instead of Collapsible row. Especially if you want to make those changes on the product info more obvious and prominent to the user. If the collapsible row is closed on page load, user might not see those useful dynamic product description changing. I mean its useful in collapsible row as well, but option to chose, or even to use both could be a great addition.
That would be my advice number two.
Hope this helps.
Thank you for this video, Jan, was really helpful!! But we got a question, can we put images that change when we change variant. I added 2 different images (as html codes) to single line metafield to 2 different variants and only one image shows...
Thats strange, if one changes, I don't see a reason why the second wouldn't.
Might just be a small thing, but difficult to tell without having a look.
The fastest I could do here is get you in touch with a developer if interested:
www.codingwithjan.com/hire-a-developer
Hope thats still helpful.
I created metafield of description. Google merchant says gives an error that my description is missing in shopify
However, I am running into a problem. My product description doesn't change on the drop-down when I click the different variant. I have to refresh the page for it to reflect. Any thoughts? Thanks in advance!
Kindly do also a video for build-your-own box, especially for websites where they allow customers to select their favorite items and add it into empty boxes, without app plugin. I've been looking for similar videos, but I can't find one. :( Thanks
Great idea, but it's also quite complex 😄
I'll see what I can do, but this is probably too much for a video.
thank you, it would be a great help huhu.
@@CodingWithJan
Is there a way I can make this apply to only one collapsible row?
Does this approach work if I'm using page metafield instead of simple text?
Yes it should! :-)
@@CodingWithJan not working, it's showing page link/url instead of page content 🥲 Hope for part 2 on how to display page metafield for different variants 🙏
Jan, love the videos. Any reason why this.currentVariant returns the previous selection. If I click from “A” to “B”. My consolelog and container return the old, “A”, values.
Thank you! :-)
This depends a bit on the theme,
but it might be the case that your console.log statement is a little too far up.
So when a variant is changed, the "onVariantChange" function is called, and it seems you were able to find this one.
Inside that function, you might see a line of code along the lines of "getCurrentVariantFromOptions" or anything similar.
In that case, your console log statement would need to be below that one. Hope that helps :-)
This is not working with variant type richtext. Please Can you help me with this.
I'd need to look into this, but you might need to parse the HTML cause otherwise it's treated as "text"
Awesome expain thanks
Thank you! :-)
can you put your webcam into circle shape so we have more view of your screen, thanks, keep up :)
would probably be better, you're right!
Thanks for the feedback :-)
Cheers
Is there any way to make more than 100 variants for a product? For example, I have a phone case that is in 6 colours for 20 phone models, so I need 120 variants.
2 ways
1) Split into multiple products
2) Use an app (for example infinite options app)
Love You
:-)
Do you have a good suggestion to make the theme still updatable even if we change the code.
Good question! tnx
Great question!
My recommendation:
- track all code changes in Git
- keep the current theme version for the moment
- check the theme changelogs for new versions (to see if new features are even relevant to you)
And if you really want an update:
- either install the new theme and carry over your changes / or see if you can carry over the theme changes (depending on what's less work)
In the dawn GitHub there is a solution for this. But I never got it to work. Their solution: "Say you're building a new theme off Dawn but you still want to be able to pull in the latest changes, you can add a remote upstream pointing to this Dawn repository." @@CodingWithJan
How can call therd party api to post deta in theme app extension
Please make video or guide me... Please🙏
Hi Jan, thank you so much for the tutorial. It worked with the single line metafield, but I tried doing it with a richtext metafield and added the metafield_tag to display it and Its is displaying properly, however i get an error when selecting the variants "Uncaught SyntaxError: Expected ',' or '}' after property value in JSON at position 467 (line 5 column 133)at JSON.parse () at VariantSelects.updateVariantDetails.. etc what changes need to happen on the json code to get it working. Thanks!
I got the exact same problem and i don't know what to do..
Did you figure it out ? I'm having the same issue ..
My guess is because there's to rich text block support...
same error.. did you fix your problem ?
@@cedricmallette I did, the issue was in the script. I had an extra bracket and a space after forloop...
Thank you for this super helpful video! may I ask, does this work with rich-text variant metafield too? I am trying to display variant details in separate rich text section under product, but can not find it in main-product.liquid (dawn) thank you
In theory this would work, but I'd need to look into this in more detail as well
got similar problem too, my rich text is displayed as ast instead of my rich text with bullet point etc
Hi Jan, should this still work on version 15.0.0? Because I can't get the variant ID. I've put the script on the main-product.liquid and I see the variant ID's followed by the configured description when I look in console. But it doesn't change the text, probably because I don't have the "this.currentVariant" element in my global.js file.