Hello,
I’d like my customers to get a notification or warning popup, including the text “Please note that you are ordering a Pre-Order product. Delivery time may take longer than anticipated.”, once they click on Check out if there is a product in their cart that has a “PO” tag.
How and where can I add this?
Note: After clicking OK to the popup the checkout should procede as normal.
Thank you
Hey, @Joyce_van_Dam !
This is Moira from the Social Care team at Shopify. Thanks for posting! It’s great to hear you are wanting to integrate a popup notification for your customers to ensure they are fully aware of your products that are pre-order. I’d be more than happy to help you with a solution today!
Currently, there is no option through the native Shopify admin that provides what you are after without implementing custom HTML. If you wanted to head down this path we have a fantastic tutorial you can follow from one of our Shopify Experts below:
As a workaround, I would suggest implementing an app that will deliver this functionality for you. I have done some digging on the Shopify app store and found two fantastic apps for you to choose from below:
Product Warnings on Checkout - This app displays proper and easy-to-understand warning labels popups when specific products are added to the cart or before checkout.
Ultimate Product Warning - Display your warning when your customer clicks “Add to Cart” or “Buy Now” or on the product page itself.
Our Shopify App Store is a great place to find integrations and solutions for many features you may want on your store. With a mixture of free and paid apps, there’s always something suitable for all budgets. Below, I’ve listed 3 popular pre-order apps. Check them out!
Important Coding Reminders:
If you make changes to the original code and save the changes, you will not be able to revert back. We always suggest you first duplicate the theme and work in the duplicate. That way you can always go back to your previous version.
If you make changes to the original code in a theme and update your theme to a newer version in the future it will override past changes.
If you need custom changes but would prefer the help of a developer we recommend Shopify’s own Expert Marketplace.
Let us know how you get on with the suggestions above, I’m happy to answer any questions you think of as you work on your business.
Cheers!
Do you have experience in Liquid and JS code?
First you need to add event for “Pre-Order” button, when clicked it will show popup with checkbox. If the customer clicks the checkbox, it will submit the form, no click, it just turns off the popup and everything stays the same.
If it is difficult, I recommend you to hire an expert, because it will require a lot of changes to the code and they will help you quickly.
Hope it helps!
Hi @Moira ,
Thank you for you detailed reply. I’ve used custom HTML several times before succesfully in my shop (even though I’m a novice), so for now I’d like to try implementing that first. If this doesn’t work then perhaps I’ll use one of the apps later on.
I’ve found the thread you’ve suggested before, but I couldn’t quite figure it out. I believe the thing I want is a little bit different since I want the warning to popup when a customer clicks on the checkout button if they have a “PO” tagged product in their cart. The thread, I believe, describes it as the other way around. So that is when a product doesn’t have a certain tag.
Could you perhaps show me an example of a piece of code I could add to my HTML to achieve this? Thank you.
Gr. Joyce
I have little to no experience in Liquid or JS code, but I have succesfully implemented it several times before in my shop HTML. I just check and compare code examples found (mostly) on this community and afterwards I implement it myself in the code of my shop. This usually works just fine, if I have found the right piece of code and implemented it correctly of course.
Can you perhaps show me an example code of how to get the checkbox popup you described and also tell me where to add it? That would help me a lot.
Either way thank you for your reply.
Hi @Joyce_van_Dam ,
Thanks for getting back to us!
It’s great to hear you have some experience with HTML and are willing to go down this path. You are correct in saying that the tutorial is slightly different from what you are after, as mentioned above you would need to adjust accordingly i.e changing the “false” parameters as they are set to activate when that particular tag is not visible in the cart. I’d be happy to reach out to our Shopify themes team to see if they can offer some insight on the exact piece of code you will need. Otherwise, I would look at hiring an expert as suggested by @LitExtension or posting in this thread here where a Shopify Partner may be able to provide you with the code and/or implement it directly on your store.
TIP: As you continue to develop and edit your store, I highly suggest taking advantage of the Shopify Developers website. This is a place where our developers post hundreds of step-by-step coding tutorials which is a great way to familiarise yourself with all the different customization possibilities within your theme.
Look forward to hearing from you,
Thank you for the information. I’ve bookmarked the site you’ve mentioned, it will be very useful.
With regard to my issue; I’ve reached out to Ninthony on the thread you mentioned and he has helped me out with the coding of the popup, so my problem has been solved :).
Thanks again!
That’s wonderful to hear!
I am glad we were able to provide a solution for you, thanks again for posting in the community! Don’t hesitate to reach back out if you require any further assistance as you continue to work on your store.
All the best,