Shopify improving the Thank You Page (Order Status Page)
HTML-код
- Опубликовано: 29 окт 2019
- In this video, we will learn how to add content to the Order Status page.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-ca...
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
🎬 RUclips (Shopify and Web Development)
ruclips.net/user/letsbuildsh...
📚 Recommended Resources
help.shopify.com/en/themes/li...
help.shopify.com/en/themes/li...
help.shopify.com/en/themes/li...
🔎 SEO Description:
In the example we will add a content box to display a coupon code. This should encourage customers to make another purchase and might increase the customer lifetime value.
Further, I will give you an outlook on the possibilities you have with the method presented. For instance, you could display some information on the order page only if a certain product is within the order object. You could also display some content only if the shipping country is a specific one. Be creative :-)
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
🎯 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
Thank you, watching the first 30 seconds helped me identify what was wrong with my configuration.
I was placing my code snippet in the post-purchase script instead of the order status script
using the method I was able to solve a long standing issue I had...over a year now. I was able to add an button which connects to a external payment gateway, because us Caribbean Bosses has it so hard to have clients pay us virtually.. your amazing!
How can we edit the text of existing content boxes and how to add custom styling to order status page ?
This Channel is a Gold Mine
Thank you very much for making these videos. They are so informative and easy to follow for beginners like me. Keep up your great work!
Excellent performance with perfect topics and content
Great video! Super clear and concise, thank you!
Thank you so much 🤗 keep the videos coming. 👍
thank you so much bro for the clear explanation; I was looking for a way to inform my customers about covid-19 delays on thank you page and you tutorial just helped me big time; much appreciated brother!
Super welcome,
wish you all the best :-)
much better than use apps! didn't know that! Jan you're amazing!
thank you man💙
Man... you are awesome!!!
How to make information like or to update when a variant is selected or changed without refresh the full page?
Man you’re the best!!!
This was great and easy to implement! I'd like to see more examples like this.
Thanks for giving knowledge on something that can bring repeat orders. Thanks ! I was not able to find this anywhere ellse
Great video, still works in 2023 ! Amazing !
Hey LeGrandDuca !, thank you!!
This is exactly what I was looking for! Thank you
Awesome!! Glad the content was helpful. :-)
Love it.. keep making videos
🙏 thankyou for uploading this video
your a boss! thank you for making these video's..
Incredible!!!!
Thanks brother
What I love most about your tutorial is you explain each & every detail that students like me need to know. You are my best Shopify teacher.
Can I know how you become a Shopify expert? Any resources free/premium. I'm looking for some guidelines.
Thanks, Jan!
Towhidul,
before answering your question I want to thank you very much because I appreciate your fantastic feedback throughout the channel a lot.
So let me answer your question in the best way I can:
I think the best way to become an industry professional in any field, is working on real-world projects with real customers.
Clients will always have specific requirements, ideas, and visions for their e-commerce Stores.
As a Developer, you will have to find ways to either implement these needs or you will need to provide similar solutions, workarounds, or even advice on better solutions then the client thought of.
This will require some research from time to time and you will expand your knowledge over time naturally.
For Shopify you need a few technical skills as a basis to get started:
1. You should be familiar with the Shopify backend (and live customizer).
2. You should know some basic HTML/CSS (and maybe even some basic JS)
3. You need to know a little bit about the Shopify theme files.
4. You should know how to use liquid Objects to display relevant information.
Maybe most important:
5. You need some confidence to introduce yourself as a Shopify Developer to other people. (Even if you are just starting).
This especially requires confidence in your ability to learn and research new things even if you are not sure how to implement them right at the beginning of a project. :-)
With that, you can already start to get your first clients and you will be able to modify existing themes.
From there on everything else will come.
I think you are on a great path to learn.
RUclips videos would be my first choice and then can be super useful.
Shopify has some cool help articles on specific topics as well.
Google will be your best friend and the Shopify Forum is also a good place to learn.
I hope that all helps and I hope you have an awesome day.
I can see you are really motivated to learn a lot and that´s simply awesome.
Do you plan on working as a developer?
Great video! Thanks for the tips
Awesome man!
thank you glad you like it.
Hello Jan,
Very helpful and straight to the point video.
Thank you for creating awesome stuff.
👍🏻
Hey thank you very much for your positive feedback :-)
THANK YOU!!!!
This worked for me:) Thank you so much for the great explanation and detailed steps. Would you have a tutorial for adding a survey on the thank you page?
Very cool, did not know this was possible! Thanks for sharing 🙌🏻
Hey Arlen, I am glad this was helpful!
Hi! Thanks for your clear video! I have a question, on my order thank you page you see a map with the adres of the customer and a tracking code of La Poste. How can i remove this tracking code?
HI! Love your idea! How do i add in a order payment status on the order status page?
Your videos are easy to follow and unique thank you soo much 😊
Is it possible to make a video about the sticky header?
Awesome ❤❤❤❤
Richtig tolles Video!! Sehr sehr gut erklärt und selbst ich als Technik Hasser habe es hinbekommen. vielen Dank!!
Cool, freut mich 😄
@@CodingWithJan hast du denn irgendwo auch erklärt, wie ich eine dankesseite nur auf Ein Produkt anwenden kann? Also ich benötige pro Produkt eine eigene Dankesseite...
Hello Jan!
I followed all the steps that you've explained, however, when I add the HTML to the checkout settings page and save it, it doesn't show up on the checkout page. What could be the reason?
Hey Jan, You are one of the best teachers of Shopify on RUclips. Love from India.
Can you please tell me how to add a secure check out Icon below the (BUY NOW) button, like an image file?
Great video right to the point
Glad you think so!
Hi. Nice video! Quick question: I'm looking for a way to remove the tracking number from the thank you page once the order got fulfilled and also to modify the text "Come back to this page for updates on your shipment status.". Is this possible?
Really helpfull, thanks jan. now we don't have to pay monthly fee to 3rd party that currently does this!
Thanks, Jan. I'm contemplating on the FREEMOTE. I really love to learn to code but not sure if I can finish it. do you have a video where we can see the big picture of coding?
Hello Jan, Great information, i have learned alot from your video. My Question for this is can we have popup same content with timer 20 minutes on thanku page
How would you add a metafield for a product like shipping times ?
Hey Jan, first-time-viewer here. First of all thanks for this great tutorial! It really helps. I have just one question and it would be great if you yould respond.
How can I move this additional box? Maybe over the 'Delivery Updates' box or even above the 'Your order has been confirmed' box? Is that possible?
Thank you so much.
This is one of the clearest and well explained Shopify tutorials I've ever come across! Thanks!
What do you say in min 3.37? I shouldn't use single quotes or double quotes. But what should I use instead? Please help
Hi Jan,
Struggling with the Fulfilment API picking the object from the order Fulfilment API,
I want to call out the tracking code once it is entered inside the Admin area, so that he client can also see the tracking code and then I redesign the enter lookup page.
Have any suggestion how to fetch the tracking number or retrieve into the Thank you order page? :)
Is there any way to add a Download button at the Thank You Page? Please guide me.
Awesome tutorial, I have question regarding external links on the order status page. I tried to insert a download link to the page in relation to the items purchased. The links show up correctly but shopify seems to modify the external URLs automatically and jams my shop URL in front of the actual link, which renders them useless. Do you have an idea what I can do?
could you help me figure out how to customize checkout page when certain text shows up on the checkout page.
Keep Going Bro 👍 From Indonesia Here 🇲🇨 , i want to learn more about Shopify Dev because i want to make agencys for making store for clients 🙏
Hey Tadya, welcome to the channel! That's an awesome goal you set yourself :-)
Hi kindly can you tell me how to add popup in order status page programmatically
Legend
Hi, is here some another manual how can I add text under payment button? Even before sending the order :) thanks a lot
Hi Jan, i really appreciate your videos & your clear explanations. i have one question, i was wondering if its possible to add buttons for payment options in checkout page, for example 1 for paypal & 1 for credit/debit card. i wish i could send screen shot example here but i cant, but if i could email you i would appreciate it. thank you so much.
Can we change "Your order is confirmed" heading ??
Hello Sir, Please Make A Video How Can I Add Timer On Checkout Page... Please sir Make A Video On This Topic
Hello Jan ! First I want to thank you for your amazing tips , I have a question and I hope that you can help me 🙏 in that same page , when an order is updated with a tracking number , it will show on the thank you page ! I want to replace that tracking number with a link to my order track page ! Is it possible or no ? Thank you 😊
Hi Jan, great tutorial and easy to understand. Thanks a lot. I have one more question. I want to add a free product to cart/checkout if the order value reaches over € 35,00. Can I find a tutorial for that in your channel?
Hi Jan, great video, thank you!
One question: do you track conversions (purchases) with the order confirmation page? Or do you use another method? Thank you!
Hey Mike,
easiest way would be using Google Analytics or Facebook pixel.
Shopify comes with these 2 built in and you´d only need to add your user IDs to set things up (Admin Dashboard).
If you want to setup any kind of custom tracking software or custom events, the thank you page would be the way to go. You could track the initiate Checkout step from your cart page and purchase complete on the thank you page.
If you are on a Shopify Plus subscription you could also track any step inbetween with custom events (e.g. Customer started typing, customer selected shipping method, and so on and so forth)
Hope that gives some clarity :-)
@@CodingWithJan Thanks! Yeah, I'm currently using FB pixel + GTM + Analytics :) I initially asked this to follow up with a question whether you're tracking 100% of conversions in FB Ad Manager, but this is just impossible. For example (and mainly) because of ad blockers. There are ways to circumvent ad blockers but that's just plain wrong and most likely illegal. There's no ethical way of getting 100% of conversions in there. I can live with the 95%+
wow! Great tip! Thanks!
Can you make a video of how to add text under Total price on checkout?
Hey Helena, thanks for your feedback. :-)
I don´t think there is need for another video on this.
You could use the following code instead and simply insert your HTML right here: "REPLACE WITH YOUR HTML OR TEXT".
Then you would copy the snippet into your Script box.
window.addEventListener('load', function () {
var totalContainer = document.querySelector('.order-summary__section--total-lines');
totalContainer.innerHTML += `REPLACE WITH YOUR HTML OR TEXT`
}, false);
hope that helps :-)
Wie kann ich ein Javascript, dass einen iFrame einbettet, in die Checkout box hinzufügen? Kann ich sie über einen push in eine div laden? Habe das bisher nicht geschafft. Danke!
Nice and simple explanation. Keep videos coming.
Also we can directly insert the same code in liquid file
Hey Atul, thank you for your nice feedback :-)
@@CodingWithJan You deserve it. Also I wanted to know how to find Shopify developer jobs in India
@@atulgavali4249 great question. Maybe I should make a video on different ways to find freelance work online. Could be interesting to others as well 😃
@@CodingWithJan it would be great. And I wanted to know specifically full time job not freelancing job
Can I also change the Order Status page? (The page the customer sees when he / she clicks on the order number under "Order history"
"customer.order" template
Clear explanations - thanks man. That was simple, straight to the point and very useful for someone like me who doesn’t code that much. Thanks !!
Hey Marcello, you are very welcome!
Glad you liked the content and thank you for taking the time to write such nice feedback. Hope you have an awesome day :-)
Hi Young, That is awesome and I have been looking to do this for a while but never managed. My question is, how do I upsell other products on the check out page? I want to upsell new products and discount code Instead of the static text and image. How do I do that? I think this would be beneficial for so many Shopify sellers. Thank you once again! Farhad
Hi Farhad, I think this is not possible without an app. Somehow the order would need to be adjusted and this could only be done through Shopifys API and not with liquid code 😀
i want to implement this into my shopify store, but i cannot find bectics on my keyboard only single quotes. Any help? please and thankyou
Can you do this to also display metafields that pertain to that order? These would be order metafields.
How do you add the discount code there for the next purchase?
Hi Maria, if this is your Shopify Admin Dashboard:
Home
Orders
Products
Customers
Analytics
Marketing
---->>>>>Discounts
Hi, what are "vectics"?
Backticks -> ´´
Not to be confused with these -> ' `
Please can anyone help me
I get
Uncaught ReferenceError: Shopify is not defined
error when I refer to the Shopify object
Great tutorial ! thank you
Hey, Happy to help! 😃
how can i change the message on your order is confirmed i tried finding it the same way by right clicking on it and then inspecting but to no avail
You can change that within the language settings of your theme. Hope that helps :-)
@@CodingWithJan i ended up just creating another box with the text, Thanks man for your quick response, new sub right here keep that content coming.
*Hello Sir, Please Make a Video On This Topic How Can I Add Timer On Shooify Checkout Page.. Please Make A Video* 😍😍
Hi there, unfortunatley this is no longer possible, unless you are on a Shopify Plus subscription :-)
@@CodingWithJan OK.. Thanks for Reply..
@@store229 no problem. Some older stores will also be able to implement this, but new stores can´t anymore :-)
Nice video! But the part of putting my script in the checkout 'Additional script' field isn't working. I did exactly what you did, and typed and , with the whole script of what I want to say in between.
It only lets me type my own stuff, but when I do the script nothing appears. And I don't want to type my own text because it doesn't look organized and the first line of words are literally touching the original 'Thank You Customer!' text that comes at the top.
What could be the reasons for it not to work for me?
PS: Also, I don't know if shopify changed the debut theme since the time you made this video, but my Thank you page now shows the customer's shipping address in Google maps right above "Your order is confirmed." I'd like to know if it's possible to take the google map off and how to do so.
(Edit): I figured it out already, and solved my own questions. Now my only concern is the last thing, about the map. Thanks!
Hi, could you tell me how you figured it out? I'm facing the same issue of the text not showing up on the order confirmation page. Thanks in advance!
asmaa wali Hi. Don’t type and . Just copy your whole script from the page you created and literally just paste it like that. If it doesn’t work for you, it’s maybe different for certain themes. I’m using the debut theme.
you’re right! that’s exactly what I did and it worked. Thanks!!
asmaa wali I’m glad it worked. No problem.
Hey Jan, how is it possible to filter customer by total price, so that only customer with a specific total price see my customized order status page?
Hey Moritz,
you can check if the total order value exceeds a certain threshold:
This would look something like:
{% if order.total_price >= 50 %}
... your code
{% endif %}
hope that helps :-)
@@CodingWithJan Hey Jan, thanks for bringing up so much value!
Hey Jan, I tried it but it doesn‘t work: here is my Script:
{% if order.total_price >= 128 %}
Shopify.Checkout.OrderStatus.addContentBox(`Hallo {{customer.first_name}}! Im Mitgliederbereich findest du alle wichtigen Infos und Terminanmeldungen bei Roadstars. Klicke hier, um zum Mitgliederbereich zu kommen.Bitte schaue auch immer in dein Email Postfach. Hier schicken wir dir immer die wichtigsten Hinweise und Terminanmeldungen zu deiner Ausbildung bei Roadstars zu. Liebe Grüße, dein Roadstars Team`);
{% endif %}
@@moritzkompass I'm having the same problem, did you find a way to fix it?
Carlos Torrejon no unfortunately not
it's possible to customize the checkout page now in 2019?
Hey there,
right now the checkout can only be customized in a Shopify Plus setup.
The order status/thank you page is the only exception to some degree :-)
@@CodingWithJan
Hi Jan,
What about adding a Pinterest pixel for checkout.
Today the OrderStatus is also not showing
Can you show any way to install Pinterest pixel so it can be fired on checkout?
Thank you
@@mansoorsaeed I think we could install the pixel on the entire website and track conversion on the order status page. Tracking individual checkout steps will probably not be possible right now 😃
Lets Build Shopify Thank you for your reply
Looks like will have to do it this way
Today is not working anymore
How to change CSS of checkout page
You can also add tags to the addition script box and put your css inbetween.
This would only affect the thank you page though. The actual checkout can only be customized in a shopify plus setup
@@CodingWithJan Thanks
Shopify.Checkout.OrderStatus.
Do you have fiverr account?
This isn't wotking in 2022 right ???
is there a way to contact you? IG? FB?
Hello there,
so I created an Instagram because some people needed to send screenshots.
It´s @coding_with_jan
I just did not upload anything there yet :-)
HI Jan, kannst du uns helfen die checkout page zu optimieren? kontaktiere mich unter contac@camino71.com
Thanks for the video!
Is there any way to insert some metafield values?
Example: Shopify.Checkout.OrderStatus.addContentBox(`your order is ready to be deliverd order.metafields.custom.specialdate`)