🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=custom-products-1-yt 👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
Thanks a lot, Jan. Very helpful! 🚩 I would like to add some advice to any viewers watching this video. I'm not sure if Jan mentioned it at some point in the video. When editing your theme code, always make a duplicate of your theme FIRST! And then work on the duplicate version, not your original. This way, if you mess up some code and can't figure out how to fix it, you can always revert back to your original theme! Trust me, it will relieve you from a lot of potential problems!
Hi, this video was great and everything works well. However, I want to add an additional cost or upsell to one of my customizations. Can you help me figure out how to do that?
I cannot thank you enough! You have helped me TREMENDOUSLY with my Shopify Website setup. As someone who has never built a website or done ANY coding, you explain things very very well. Thank you for doing these how to videos!
You have just changed my life! I've been trying to figure out how to add customizable options to some products and watching your video helped me so much! THANK YOU! You are amazing!
Wow, so gentle voice. Thanks alot for this. There are many paid plugins (charging 9 dollar per month) for the same things you taught. God bless you man.
Not only was the video and information EXTREMELY helpful but your solutions in the comments helped me solve another problem I was having! THANK YOU SO MUCH! I coded in "C" a thousand years ago and a bit in C++ so I know just enough to be dangerous. I'm looking forward to your HTML and coding series. Keep up the great work!
Hey Jennifer, thank you so much for your fantastic feedback :-) Love to hear that the content was useful and you had fun implementing this. Coding is fun 🤓 🚀
Hi Jan Can you help me. I have a problem with product, i want to appear some combo product in main product. and can add to cart. Example when i watch "Book A" i will see combo product "pencil A", "eraser A". when i watch "Book B" i will see combo product "pencil B", "eraser B" and i can click add to cart with every combo product in main product. But i don't use shopify platform and my platform i use don't have so many application but it is template .liquid like shopify and i have to code it. Can you suggest me how can i do ? Tks you for toturial form you.
Hey, habe das Bildeinfügen-Inputfeld nach deinem Tutorial eingefügt. Funktioniert auch alles (meißtens) Hatte jetzt nur bereits zwei Bestellungen, bei denen kein Bild ankam in der Bestellung sondern nur sowas: C:\fakepath\73F21820-AE0B-46B9-8336-8B8C4E5463F0.jpeg || also ein Fakepath. Was mache ich falsch? oder woran liegt das? Danke im Voraus!
@@CodingWithJan Hab ich ausgeschalten. (Wie im Video) Wie gesagt ist auch nur manchmal bei einer Bestellung. Mein Form passt doch oder?: {% form 'product', product, class:form_classes, novalidate: 'novalidate', enctype:"multipart/form-data", data-product-form: ''%} {% include 'file_script'%}
Thanks a lot for this great tutorial! What I don't get though is, where does the uploaded image from the customer go? And how does it work that i can see it in my shopify orders afterwards?
Really fantastic. I need to build a buy-one, donate-one (for every one item each) and the donated items would go to separate charities. This video really helps me get closer to understanding how I will do that. Thank you much Jan!
Wow you've really seen alot of my videos. Awesome to see you can make some use of them :-) What about adding a checkbox ☑ Donate one item Than the customer could decide wether or not to donate. And the one processing that order would know how to handle it?
@@jeanaguilar5 Hi there, hope you can help me out. I could not see the line items and photo uploaded in the cart and also on the Order section. :( I am using turbo theme.
Listen... I haven’t coded in years, since 2010, maybe 2011, but your video seems fairly simple to follow along. 👏🏾👏🏾👏🏾😊 ☺️👍🏾. I had to subscribe to you.
Fantastic video and instructions! Thank you so much!! Just launched our shop and didn't want to spend the $$ for additional apps that could also slow it down. This is exactly what I needed. Much appreciated!
Thank you so very much. I was able to set up the page for my very first custom product thanks to the first 9 minutes of your video. I still watched the whole video though.
Hi Jan! Thank you so much for this video!! This was my first time working with code and I managed to follow along with your video and create exactly what I needed in my product pages. I can't thank you enough!!!
Hey Jan, I did the coding exactly the same as you. I went to test the file upload function for a product and did a order on my website. The photo that i uploaded could not be viewed on my orders. That means if a customer ordered my product and uploaded a photo with it, I would not be able to get a downloadable link to see their photo. How do you solve this?
Hi. I managed everything you said, thanks for the step by step tutorial.. one question I have is now that I have customized a few pages, I cannot disable the zoom feature?? I disabled it from the admin and it disables all the products except the ones i customized the sections for? any help?
Hi, Jan! Do you have a video on "How to add a custom product section"? For example: "I want to add products by tag, IDs, or handle on the product page"
What if your Theme says "The contents of the product.liquid template can be found in /sections/product-template.liquid" When I went to Sections and found the product line, it wouldn't let me add a section the same way the video shows to add a template. Could anyone direct me to a way in which their Theme is set up this way? My Theme is Minimal.
Hi! Thank you so much! I followed the steps and it worked perfectly. I'm not an expert in english and I don't know anything about coding but you explain it so easily and you have a great pronunciation :D
very confusing , not possible at all to find some very well explained shopify dev video like we can find for wordpress ! meanwhile thank you for your great goodwill Jan.
Amazing video! Does anyone know how to amend the code to allow multiple file uploads? I want the customer to be able to upload more that one photo for personalisation. Thanks
Great video. I wondering is it possible to adjust the price of the product when the customer chooses a customization. Would like to do this through code.
Hey Ranjeet, for custom pricing rules you´d be better of to use an app. In my newer video on custom products you could see how it's done. Every other coding solution would be considered hacky (unclean) and hardcoded in your theme with not flexibility.
Hey there, thanks for your positive feedback. Changing the price would most likely requiere an app. I know of bold product options to be capable of doing this. If you dont want to use an app the only workaround would be to duplicate the product and one template would include the customizations and the other wont. Then you could set the price for both products independent
Is there any way that I can have customizable products, that "update the picture" as the customer writes text on it? Would really be helpful for my customizable text on my posters.
This video has been very helpful. It was created some months ago... I am wondering if you are now able to "Show Notification when item is added to cart" and upload a file?? Has that feature been fixed so that both can be used? Thanks!
Great video! so helpful! how do I get the order options added by the product page to capture in the confirmation email that goes to the customer, as well as in the details when I export my orders to csv file?
Hi Jan, Thanks ! Q1 : For the file uploads, i searched in "Orders" & managed to retrieve the file for each order, i have to manually save the picture one by one. Is this the correct way to retrieve the pictures ? Q2 : i tried to search under Settings : Files , but i cant find uploaded files there. Do they only appear in "Orders" ? Q3 : Will all these photos files slow down the website later if i have too many files uploaded in the future ?
Hi there, the files will only appear within your orders that's correct. For your processing it really depends on what you are doing with these pictures. If you have some sort of fullfilment service / print on demand, they might even provide an app where they automatically get these images. And no worries, the uploads won't slow down your page. :-)
Hey ,thank you for the video! How can you turn off the Ajax Cart in the venture theme? At this moment only text is shown in the cart and the picture isn't... I added all the code like you told so i guess it has something to do with the ajax
Hi there, I'm not 100% sure but there might be a setting in your theme customizer. It might either be somewhere on the product page or in your general theme settings. Otherwise you'd might need to remove any ajax related keywords / classes from you add to cart button in the product template. Hope on of these helps :-)
This is sooo helpful! I am curious if there is a way to add upcharges associated with the customization they select. Sorry this is probably a very basic question and any help is hugely appreciated!
Hi Anthony, in the same way we add inputs of type text one could add an input of type file. In the video I'm adding a file input for a custom image :-)
Hi Jan! This was great amazing help. I was able to create a text box field for the customer to type their dimensions before ordering my product. However, I do have a question. Is it possible for the textbox to only show up if a certain variant in that product is selected? Currently it shows for the product as a whole. Please help!!
Hey Jan i hope you see this. I created mulitple image "photo" froms but i want to create some sort of if condition whereby when a user uploads the first photo befoe the option for second photo shows up. How can i do this please?. Thank you
Hey Jack, not sure how your theme is structured but within the template folder you should have a product.liquid, in there you will either find all the code for the product page or they will include another file from the section folder. You need to figure that out. Hope that helps :-)
Glad I watched this. Great alternative to paying for a subscription, just to get information that could be done with basic coding. I"m canceling my subscription, and hiring someone to do this for my checkout page.
Thank you so much for this video. I am using the store Debut as well but for the life of me, I can not get my boxes to be all the same. Do you know if something has changed since you made this video? When I change it in the Chome DevTool it works but then when I go and add the CSS it does nothing. Any help is much appreciated.
Hi Samantha, if this works in chrome it's very likely that you just have a small typo somewhere in your css file. This tutorial is still up to date :-)
Hello, I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in. Can anyone help me with that as well ? P.s. I have done everything with the Carts and updated the necessary codes. Please help me Jan 🙏🏻
Thank you. Worked fine, one question, how to keep the quantity where it was (only can chose quantity when I go to add to cart, but I want it to stay next to the product also, below "Your Name" box in your case)? If you can tell me how to change the code in that quantity part to stay where it was? It was like this: Color Quantity And I needed one more, so it ended up like: Color Your Name What I need is: Color Your Name Quantity
Jan, thank you for the video yet it doesn't look like the traditional form tags appear in the new Dawn theme so I cannot get the information from the custom order to show up in the Shopify order details. if there a new work around for this?
I followed every step in the tutorial to make the small text box look like the theme, but I can't get to be the same width as the add to cart buttom. I added the 100% flex-basis but nothing happens. What can I do?
Thank you so much this video really helped me add personalization to my products! I have a question though when the customer checks out, I am not able to view the information they have input in the fields such as NAME on my orders page . Any ideas of why or how to correct this?
I did every step like the video, but some sections on my product page are gone (product details, delivery & returns, sizing guide), It only shows the size variant and the new add text box.. so weird
Thanks for another great video Jan! Wondering if you have some advice on showing a dynamic product preview when a customer adds their input. Ie text on a card. I'm thinking some type of javascript to render the text on keystroke but it's not too clear just yet. If anyone has advice that would be awesome! Thanks again
Hey there :-) I think what you're looking for is called a "product-designer". I don't have one to recommend in particular, but you might be able to find a good one in the Shopify app store.
Awesome that you like the content :-) New videos are on the way. Some of them will focus a little more on coding and others will be easy to follow for everyone. If you want to see something specific just let me know :-)
@@CodingWithJanThanks for respond! You may create multiple video on that topic. For example modify or customize existing one. another 2-3 video about creating mega menu which is already available in a html template. You can just convert that from static to dynamic menu. This will save your time from doing html, css, js front-end coding.
Gracias Lets!!! muy bueno el video!...una consulta ¿cómo hago para que un textarea se muestre si y solo si se selecciona una opción de una variante ? gracias por la respuesta
Klasse Video! Hab nur ein Problem: _Hab das required drinn beim Bild in dem template aber Upload ist keine Pflicht bei mir -> man kann in Warenkorb legen ohne Bilddatei Code folgt: Foto
Hi, danke für dein Feedback. Manche Themes haben im "Form" Tag etwas weiter oben "novalidate" stehen. Wenn dieser Attribut entfernt ist, sollte es klappen. :-)
Hi I didn’t really watch the full video all the way because I wanted to see if you were doing when I needed to see and I didn’t wanna waste my time doing something I already did but how do you make it to where only one product in your store is customizable because I had did that for a jacket I want to make customizable for my customers but when I uploaded a new product which was lipgloss there’s still the same product bar and I don’t want that to be customizable
great idea - works fine. Is there a way to show the product result on the image side like a live update? Is it possible that U explain how it works for a bundle of two products?
This is amazing thank you, does this work with the shineon app? Is there a way of showing the customer what the product will look like with the customers uploaded image?
hi Jan, great tutorial but i have a question - i applied the text box as an additional customisation option, and it showed up no problem, but at the same time my variants selection changed from a drop down menu to buttons and my images changed from a carousel type viewer to static images one below the other along the page on the left. how do i keep this from happening? alsoi tried to edit the original code (i did eventually change it back - i need two templates, one with the text box and one without) and i didnt experience that problem with the original code, only with the copies and new template/section i created. please help!
Are you able to assign an additional cost to these additional elements? For example, can you have a checkbox list with the first item being +$5, the second +$10, etc?
Hi John, unfortunately not without the use of an app. I also have a more modern video on custom product options with custom pricing. There I showcase the app I would go for. Hope that helps :-)
@@CodingWithJan Unfortunately those solutions won't work for me (I've gone through all of them). Would I have to create my own partner account and create the code to access additional pricing elements to get this to work on my own?
Danke hast mit sehr geholfen aber wie sieht es mit .jpeg Dateien aus das klappt leider nicht. Und wie ändert man die Überschrift wo "Photo (JPG or PNG)" steht
HI Kunndi, what you describe is not a theme related issue. Are you working in a theme copy? Sometimes you need to create the same file in your live theme (just leave it as default) Then you can select the correct template, and you can modify the template from your theme copy. Hope this helps :-)
@@CodingWithJan thank you. Yes, it turns out that the option only shows up in the product options on the right when using the live theme. I was hoping to try out your code on a copy before going live.
@@kunndik6654 you can still test everything in a copy. In your live theme you only create the template without modifications. And in your copy you make any adjustments you want to test
@@CodingWithJan ah ... the order in which I made the copy of my theme and created the new template matters, eh? That makes sense. I was just following along with the video
Hello Jan, Very helpful video Thanks I have a question if I offer a product with customization and without customization with two different prices Is there any way to do it? I mean if same pot I sell for 10$ but if customer want this pot to be customized it will be of 15$ Is there any way to do it? Thanks
Hey there, with the method shown in the video you would need to create your product twice. One with the custom template applied and a higher price and one with the regular template and a lower price. Then you could link inbetween the products maybe through the description. If you'd like to do everything on the same page you'd probably need an app. With an app you could even price every single customization I think :-)
Lets Build Shopify Thank you I also was thinking about it. Thank you for your reply keep making videos 👍🏻 Best of luck Also any recommendations for css and java script tutorials?
Great tutorial, I'm wanting to use this to merge collections for example (men and women shoes) they are exactly the same except for the sizes they come in. Is there a way to create conditions for that? Like have a radio button so a visitor can select between "Type: Men, Women" then have a dropdown menu that will show men's sizes if they select "Men" and see women's sizes if they select "Women"?
@@CodingWithJan Yes, thats correct. The men's sizes come in 6, 7, 8, 9, 10, 11, 12, 13, 14 and the women's shoes come in sizes 6, 7, 7.5, 8, 9, 10, 11, 12
This was amazingly helpful, I was able to implement my inputs step by step. Thank you! Do you know how I would display the photo a customer uploads as a file input on the product page, and/or the cart?
Hi there, not 100% sure what step you are referring to. You clone the product template and the corresponding section. In your new product template you will include your new section. What exactly didn't work for you?
Hi, I have already added products from Oberlo to my shopify store, and the size of variants are not aligned. Please let me know how to arrange these sizes.
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=custom-products-1-yt
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
You saved me $20 more a month on my new business just to add this!!😭❤️❤️ THANK YOU!
Thanks a lot, Jan. Very helpful!
🚩 I would like to add some advice to any viewers watching this video. I'm not sure if Jan mentioned it at some point in the video. When editing your theme code, always make a duplicate of your theme FIRST! And then work on the duplicate version, not your original. This way, if you mess up some code and can't figure out how to fix it, you can always revert back to your original theme! Trust me, it will relieve you from a lot of potential problems!
I have literally zero experience with coding and this video gave me everything I needed to implement this all by myself. Thank you so so much.
Amazing work! I have zero coding knowledge and just managed to customise my own product page today, all thanks to this video. Thank you, Jan!
How??? lol I'm impressed
Hi, this video was great and everything works well. However, I want to add an additional cost or upsell to one of my customizations. Can you help me figure out how to do that?
I cannot thank you enough! You have helped me TREMENDOUSLY with my Shopify Website setup. As someone who has never built a website or done ANY coding, you explain things very very well. Thank you for doing these how to videos!
You have just changed my life! I've been trying to figure out how to add customizable options to some products and watching your video helped me so much! THANK YOU! You are amazing!
I have never done any coding in my life. Your tutorial was so good that I was able to follow your instructions step by step and succeed. Thank you!
Hi Christine, sorry for my late reply.
Awesome you got this to work and thank you for taking the time to share some positive feedback :-)
Wow, so gentle voice. Thanks alot for this. There are many paid plugins (charging 9 dollar per month) for the same things you taught. God bless you man.
Not only was the video and information EXTREMELY helpful but your solutions in the comments helped me solve another problem I was having! THANK YOU SO MUCH! I coded in "C" a thousand years ago and a bit in C++ so I know just enough to be dangerous. I'm looking forward to your HTML and coding series. Keep up the great work!
Hey Jennifer, thank you so much for your fantastic feedback :-)
Love to hear that the content was useful and you had fun implementing this. Coding is fun 🤓 🚀
Hi Jan
Can you help me. I have a problem with product, i want to appear some combo product in main product. and can add to cart. Example when i watch "Book A" i will see combo product "pencil A", "eraser A". when i watch "Book B" i will see combo product "pencil B", "eraser B" and i can click add to cart with every combo product in main product. But i don't use shopify platform and my platform i use don't have so many application but it is template .liquid like shopify and i have to code it. Can you suggest me how can i do ?
Tks you for toturial form you.
I have a question
When they order some thing how do I see the picture of what they ordered
Hey, habe das Bildeinfügen-Inputfeld nach deinem Tutorial eingefügt. Funktioniert auch alles (meißtens) Hatte jetzt nur bereits zwei Bestellungen, bei denen kein Bild ankam in der Bestellung sondern nur sowas: C:\fakepath\73F21820-AE0B-46B9-8336-8B8C4E5463F0.jpeg || also ein Fakepath. Was mache ich falsch? oder woran liegt das? Danke im Voraus!
Hey nutzt du einen Ajax-Cart ?
Die machen Probleme mit File Uplaods :-)
@@CodingWithJan Hab ich ausgeschalten. (Wie im Video) Wie gesagt ist auch nur manchmal bei einer Bestellung. Mein Form passt doch oder?: {% form 'product', product, class:form_classes, novalidate: 'novalidate', enctype:"multipart/form-data", data-product-form: ''%} {% include 'file_script'%}
I am learning so many important things by your videos , which is i can't even learn @my job. Thank you Jan.
Hi Jan! I'm so happy that I found this tutorial. Can I get this to work in Shopify 2.0 in the Dawn theme? Thanks for your videos!
I'm looking for the same thing! Did you ever figure it out?
I am looking for this too. Have you been able to figure it out
This is by far the best coding channel I've seen in my life. Thank you so much Jan !
This was so helpful.... this saved my life!!!
Hi there! I am trying to figure this out on my end. I am new at this. I don't see any product.liquid templates. I only see .json.
I am having the same issue right now. Did you happen to get this figured out?
Thanks a lot for this great tutorial! What I don't get though is, where does the uploaded image from the customer go? And how does it work that i can see it in my shopify orders afterwards?
Really fantastic. I need to build a buy-one, donate-one (for every one item each) and the donated items would go to separate charities. This video really helps me get closer to understanding how I will do that. Thank you much Jan!
Wow you've really seen alot of my videos. Awesome to see you can make some use of them :-)
What about adding a checkbox
☑ Donate one item
Than the customer could decide wether or not to donate. And the one processing that order would know how to handle it?
Hey, Thank you so much for this video. I have everything setup just like u did but After someone placed an order where do i see the custom message?
I can not see the message
Hello! You can see the custom message in Orders Page inside your store admin. :)
@@jeanaguilar5 Hi there, hope you can help me out. I could not see the line items and photo uploaded in the cart and also on the Order section. :(
I am using turbo theme.
Very good video. I want to charge my customers for product customisation, could you advise how I can do that?
Oh my gosh, if only more people knew about this, it's a game changer. Thanks so much!!
Really nice video! Yes, I learn something new from this video. Have one question, how to add an additional price to the custom fields?
Thank you, thank you, thank you!! never ever coded before but where there's a will there's a way. You're tutorial got me through!!
Coding is fun 🤓🚀
Appreciate your awesome feedback :-)
Thank you so much! I watched another video that was outdated, saw your comment telling someone to come here, and voila! Keep them coming :)
Hey Brooke, thank you for your amazing feedback :-)
Can't wait to come home and record the next one!
Lets Build Shopify I just started my shop so I'll be here waiting! Thanks:)
Thank you! Please, don't stop video making! Your tutorials help me a lot.
thanks for the video! curious if you know if there is a way to include the customization info on the packing slip when it is printed?
Thank you so much for making this a FREE tutorial! I really needed this. Was about to give up with Shopify as I thought I couldn't add these options.
Listen... I haven’t coded in years, since 2010, maybe 2011, but your video seems fairly simple to follow along. 👏🏾👏🏾👏🏾😊 ☺️👍🏾.
I had to subscribe to you.
Welcome back! Thank you for the great feedback :-)
Hey Jan, great Video! I got a question regarding the custom text field. After someone placed an order where do i see the custom message? Greetings
I need an answer to this as well
@@BondTheOGYT you will see it in the order fulfillment section
Fantastic video and instructions! Thank you so much!! Just launched our shop and didn't want to spend the $$ for additional apps that could also slow it down. This is exactly what I needed. Much appreciated!
You're welcome! :-)
Thank you so very much. I was able to set up the page for my very first custom product thanks to the first 9 minutes of your video. I still watched the whole video though.
THANK YOU SO MUCH ! I have been looking for this type of video with the new shopify coding update, and you definitely helped !
This is EVERYTHING. Thanks so much for this in-depth tutorial!
Hi Jan! Thank you so much for this video!! This was my first time working with code and I managed to follow along with your video and create exactly what I needed in my product pages. I can't thank you enough!!!
Hey Jan, I did the coding exactly the same as you. I went to test the file upload function for a product and did a order on my website. The photo that i uploaded could not be viewed on my orders. That means if a customer ordered my product and uploaded a photo with it, I would not be able to get a downloadable link to see their photo. How do you solve this?
Same problem! did you solve it somehow?
same problem here
Hi. I managed everything you said, thanks for the step by step tutorial.. one question I have is now that I have customized a few pages, I cannot disable the zoom feature?? I disabled it from the admin and it disables all the products except the ones i customized the sections for? any help?
Hi, Jan! Do you have a video on "How to add a custom product section"? For example: "I want to add products by tag, IDs, or handle on the product page"
very informative and straight to the point . thank you for the effort man, great job
My first time even looking at code and could follow along easily! Thank you for the help!
What if your Theme says "The contents of the product.liquid template can be found in /sections/product-template.liquid"
When I went to Sections and found the product line, it wouldn't let me add a section the same way the video shows to add a template. Could anyone direct me to a way in which their Theme is set up this way? My Theme is Minimal.
still an issue?
Hi! Thank you so much! I followed the steps and it worked perfectly. I'm not an expert in english and I don't know anything about coding but you explain it so easily and you have a great pronunciation :D
Hey Nathalia, thanks for your awesome feedback. Made me smile 😀
Awesome video. Once the attached photos are in the check out, where do they populate on the backend? In Shopify somewhere?
This video helped a looooot! You have no idea!! THANK YOU SO MUCH. YOU DESERVE A LOT MORE OF SUBS
very confusing , not possible at all to find some very well explained shopify dev video like we can find for wordpress ! meanwhile thank you for your great goodwill Jan.
Amazing video! Does anyone know how to amend the code to allow multiple file uploads? I want the customer to be able to upload more that one photo for personalisation. Thanks
need this! any luck on a solution?
Great video. I wondering is it possible to adjust the price of the product when the customer chooses a customization. Would like to do this through code.
Hey Ranjeet, for custom pricing rules you´d be better of to use an app.
In my newer video on custom products you could see how it's done.
Every other coding solution would be considered hacky (unclean) and hardcoded in your theme with not flexibility.
Hi where can I find that video? Thanks for your help
Thank you very much for such great content.
I would like to know do I make the input value change the total price?
Hey there, thanks for your positive feedback.
Changing the price would most likely requiere an app.
I know of bold product options to be capable of doing this.
If you dont want to use an app the only workaround would be to duplicate the product and one template would include the customizations and the other wont. Then you could set the price for both products independent
This was soooo easy and a game changer! Thank you so much! Ive never done code in my life and did this in 30 mins.
Thank you so much for explaining! Seriously. I have no knowledge of coding, but you made it super easy to follow along.
Super welcome, and thank you for your fantastic feedback :-)
Is there any way that I can have customizable products, that "update the picture" as the customer writes text on it? Would really be helpful for my customizable text on my posters.
Search for some customizable apps in shopify app store. I've seen some apps with this kind of functionality
@@hydramoda ill check it out.. thanks
I think what you need is an app categorized as "product designer"
Hope that helps. :-)
@@CodingWithJan Ill check it out. thanks
This video has been very helpful. It was created some months ago... I am wondering if you are now able to "Show Notification when item is added to cart" and upload a file?? Has that feature been fixed so that both can be used? Thanks!
Thanks a million, worked for me. This was explained so brilliantly. Cheers man.
Does it all look the same? My code looks different
Great video! so helpful! how do I get the order options added by the product page to capture in the confirmation email that goes to the customer, as well as in the details when I export my orders to csv file?
Hi Jan,
Thanks !
Q1 :
For the file uploads,
i searched in "Orders" & managed to retrieve the file for each order, i have to manually save the picture one by one. Is this the correct way to retrieve the pictures ?
Q2 :
i tried to search under Settings : Files , but i cant find uploaded files there. Do they only appear in "Orders" ?
Q3 :
Will all these photos files slow down the website later if i have too many files uploaded in the future ?
Hi there, the files will only appear within your orders that's correct. For your processing it really depends on what you are doing with these pictures. If you have some sort of fullfilment service / print on demand, they might even provide an app where they automatically get these images. And no worries, the uploads won't slow down your page. :-)
@@CodingWithJan thanks Jan !
Hey ,thank you for the video!
How can you turn off the Ajax Cart in the venture theme? At this moment only text is shown in the cart and the picture isn't... I added all the code like you told so i guess it has something to do with the ajax
Hi there, I'm not 100% sure but there might be a setting in your theme customizer. It might either be somewhere on the product page or in your general theme settings.
Otherwise you'd might need to remove any ajax related keywords / classes from you add to cart button in the product template.
Hope on of these helps :-)
@@CodingWithJan thank you so much for the tutorial, but this answer was gold, it saved me!!
This is sooo helpful! I am curious if there is a way to add upcharges associated with the customization they select. Sorry this is probably a very basic question and any help is hugely appreciated!
Thank you for the tutorial. I was wondering if there is any instruction on how to add a file upload section to a product page?
Hi Anthony, in the same way we add inputs of type text one could add an input of type file. In the video I'm adding a file input for a custom image :-)
Hi Jan! This was great amazing help. I was able to create a text box field for the customer to type their dimensions before ordering my product. However, I do have a question. Is it possible for the textbox to only show up if a certain variant in that product is selected? Currently it shows for the product as a whole. Please help!!
Hey Jan i hope you see this.
I created mulitple image "photo" froms but i want to create some sort of if condition whereby when a user uploads the first photo befoe the option for second photo shows up. How can i do this please?. Thank you
10/10!!! This was amazing! Thank you so much! Could not have done this on my own! SO great!
Great video, but i cant find any "submit" in the "product-template-liquid" file. I am using fastor theme.
Hey Jack, not sure how your theme is structured but within the template folder you should have a product.liquid, in there you will either find all the code for the product page or they will include another file from the section folder. You need to figure that out. Hope that helps :-)
I tried but I can't can you please help me
Same problem I’m having now
Glad I watched this. Great alternative to paying for a subscription, just to get information that could be done with basic coding. I"m canceling my subscription, and hiring someone to do this for my checkout page.
Thank you so much for this video. I am using the store Debut as well but for the life of me, I can not get my boxes to be all the same. Do you know if something has changed since you made this video? When I change it in the Chome DevTool it works but then when I go and add the CSS it does nothing. Any help is much appreciated.
Hi Samantha, if this works in chrome it's very likely that you just have a small typo somewhere in your css file. This tutorial is still up to date :-)
@@CodingWithJan Ok, thank you! I will keep reviewing.
Hello,
I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in.
Can anyone help me with that as well ?
P.s. I have done everything with the Carts and updated the necessary codes.
Please help me Jan 🙏🏻
Did you ever find it?
@@kiyahcarter4830 Hi, no i don't, and anyone help me resolve this 😔
Thank you. Worked fine, one question, how to keep the quantity where it was (only can chose quantity when I go to add to cart, but I want it to stay next to the product also, below "Your Name" box in your case)? If you can tell me how to change the code in that quantity part to stay where it was?
It was like this:
Color
Quantity
And I needed one more, so it ended up like:
Color
Your Name
What I need is:
Color
Your Name
Quantity
Jan, thank you for the video yet it doesn't look like the traditional form tags appear in the new Dawn theme so I cannot get the information from the custom order to show up in the Shopify order details. if there a new work around for this?
I followed every step in the tutorial to make the small text box look like the theme, but I can't get to be the same width as the add to cart buttom. I added the 100% flex-basis but nothing happens. What can I do?
in the same css class you used for flex-basis 100% add a width property of 100%: .product-form__item--custom { width: 100%;}
Thank you so much this video really helped me add personalization to my products! I have a question though when the customer checks out, I am not able to view the information they have input in the fields such as NAME on my orders page . Any ideas of why or how to correct this?
How I can show this custom field only if product contain BIRTHSTONE then show to birthstone product.
Hey you might find the Shopify liquid Video helpful
If title contains...
@@CodingWithJan We need you to develop this. Contact ?
Website :-)
Thanks for the detailed explanation.
I have a doubt May I know if we want to keep the drawer enabled and want to add image file?
Thank you SO much for this great tutorial! Your walk-through helped out immensely :)
I did every step like the video, but some sections on my product page are gone (product details, delivery & returns, sizing guide), It only shows the size variant and the new add text box.. so weird
I've achieved what I needed!! Thank you so much!! I feel like im a MEGA PROGRAMMER NOW!!!
Thanks for another great video Jan! Wondering if you have some advice on showing a dynamic product preview when a customer adds their input. Ie text on a card. I'm thinking some type of javascript to render the text on keystroke but it's not too clear just yet. If anyone has advice that would be awesome! Thanks again
Hey there :-)
I think what you're looking for is called a "product-designer". I don't have one to recommend in particular, but you might be able to find a good one in the Shopify app store.
Thank you so much, your Video is really really helpful and provide the details needed step by step.
Thank you a billion times for this!! I was able to create the options I needed for my shopify website!!!
Thank you so much. This is the video that I was looking for. Hope you gonna upload more video like this! Thanks!
Awesome that you like the content :-)
New videos are on the way. Some of them will focus a little more on coding and others will be easy to follow for everyone. If you want to see something specific just let me know :-)
@@CodingWithJan Can you make a video about mega-menu? This will be something very special for all of us & also for your channel as well. Again thanks!
@@towhidulislam8435 great idea 😃
Would you be more interested in how to modify one or on how to build one from scratch or how they work in general? 😀
@@CodingWithJanThanks for respond!
You may create multiple video on that topic. For example modify or customize existing one. another 2-3 video about creating mega menu which is already available in a html template. You can just convert that from static to dynamic menu. This will save your time from doing html, css, js front-end coding.
@@towhidulislam8435awesome! thank you for your input. I got some ideas :-)
Gracias Lets!!! muy bueno el video!...una consulta ¿cómo hago para que un textarea se muestre si y solo si se selecciona una opción de una variante ? gracias por la respuesta
Klasse Video! Hab nur ein Problem: _Hab das required drinn beim Bild in dem template aber Upload ist keine Pflicht bei mir -> man kann in Warenkorb legen ohne Bilddatei Code folgt:
Foto
was tun das es klappt?
Hi, danke für dein Feedback. Manche Themes haben im "Form" Tag etwas weiter oben "novalidate" stehen. Wenn dieser Attribut entfernt ist, sollte es klappen. :-)
@@CodingWithJan Vielen Dank!!!
Thank you wholeheartedly for this video. It helped me setup a store and I sincerely appreciate it.
Hi I didn’t really watch the full video all the way because I wanted to see if you were doing when I needed to see and I didn’t wanna waste my time doing something I already did but how do you make it to where only one product in your store is customizable because I had did that for a jacket I want to make customizable for my customers but when I uploaded a new product which was lipgloss there’s still the same product bar and I don’t want that to be customizable
Hi
Great video!
Is there a way to add to the packing slips? I make personalised products and print the packing slips to work off to fulfil orders.
This is amazing!! so much easier than other tutorial!! You help me, did it!!
great idea - works fine. Is there a way to show the product result on the image side like a live update? Is it possible that U explain how it works for a bundle of two products?
This is amazing thank you, does this work with the shineon app? Is there a way of showing the customer what the product will look like with the customers uploaded image?
hi Jan, great tutorial but i have a question - i applied the text box as an additional customisation option, and it showed up no problem, but at the same time my variants selection changed from a drop down menu to buttons and my images changed from a carousel type viewer to static images one below the other along the page on the left. how do i keep this from happening? alsoi tried to edit the original code (i did eventually change it back - i need two templates, one with the text box and one without) and i didnt experience that problem with the original code, only with the copies and new template/section i created. please help!
Are you able to assign an additional cost to these additional elements? For example, can you have a checkbox list with the first item being +$5, the second +$10, etc?
Hi John, unfortunately not without the use of an app. I also have a more modern video on custom product options with custom pricing. There I showcase the app I would go for. Hope that helps :-)
@@CodingWithJan Unfortunately those solutions won't work for me (I've gone through all of them). Would I have to create my own partner account and create the code to access additional pricing elements to get this to work on my own?
Hey Jan, do you have any videos on customizable products linked to printify?
Danke hast mit sehr geholfen aber wie sieht es mit .jpeg Dateien aus das klappt leider nicht. Und wie ändert man die Überschrift wo "Photo (JPG or PNG)" steht
Great videos, but in trying this (on Supply Theme), I do not see the option to select the Theme template, like you are able to (2:40 into the video).
HI Kunndi,
what you describe is not a theme related issue.
Are you working in a theme copy?
Sometimes you need to create the same file in your live theme (just leave it as default)
Then you can select the correct template, and you can modify the template from your theme copy.
Hope this helps :-)
@@CodingWithJan thank you. Yes, it turns out that the option only shows up in the product options on the right when using the live theme. I was hoping to try out your code on a copy before going live.
@@kunndik6654 you can still test everything in a copy. In your live theme you only create the template without modifications. And in your copy you make any adjustments you want to test
@@CodingWithJan ah ... the order in which I made the copy of my theme and created the new template matters, eh? That makes sense. I was just following along with the video
Hello Jan,
Very helpful video
Thanks
I have a question if I offer a product with customization and without customization with two different prices
Is there any way to do it?
I mean if same pot I sell for 10$ but if customer want this pot to be customized it will be of 15$
Is there any way to do it?
Thanks
Hey there,
with the method shown in the video you would need to create your product twice. One with the custom template applied and a higher price and one with the regular template and a lower price.
Then you could link inbetween the products maybe through the description. If you'd like to do everything on the same page you'd probably need an app. With an app you could even price every single customization I think :-)
Lets Build Shopify
Thank you I also was thinking about it.
Thank you for your reply
keep making videos 👍🏻
Best of luck
Also any recommendations for css and java script tutorials?
Great tutorial, I'm wanting to use this to merge collections for example (men and women shoes) they are exactly the same except for the sizes they come in.
Is there a way to create conditions for that? Like have a radio button so a visitor can select between "Type: Men, Women" then have a dropdown menu that will show men's sizes if they select "Men" and see women's sizes if they select "Women"?
Hey there,
so do I get it right that you have one main product/shoe that comes in men- and women fit. And different sizes?
@@CodingWithJan Yes, thats correct.
The men's sizes come in 6, 7, 8, 9, 10, 11, 12, 13, 14 and the women's shoes come in sizes 6, 7, 7.5, 8, 9, 10, 11, 12
This was amazingly helpful, I was able to implement my inputs step by step. Thank you! Do you know how I would display the photo a customer uploads as a file input on the product page, and/or the cart?
Hi , i have a problem where i have to link both Template , it gives me the error message in the front end , Any advice?
Hi there, not 100% sure what step you are referring to.
You clone the product template and the corresponding section. In your new product template you will include your new section. What exactly didn't work for you?
Can you have the custom only available on one style? Is it possible to change the theme based on the variant?
hi input field is required, but the without input they proceed to add to cart
Hi,
I have already added products from Oberlo to my shopify store, and the size of variants are not aligned. Please let me know how to arrange these sizes.