Hello everyone,
I am new to the community but getting my feet pretty wet with Shopify and page customization.
As the subject of this post suggests, I am looking for a way to add a checkbox to accept terms and conditions above the check-out button in the cart page (and ideally in the drawer window).
I have followed similar solutions offered in different discussions but the checkbox and text don’t show up where they are expected to be seen (see sample image below). Maybe those solutions work for version 12 of the Dawn theme and not for version 14, which is the one I am using.
Here are some links to the solutions I tried:
- How to add an “Agree to terms and conditions” checkbox to Shopify cart page - Hura Tips (the author points to the files “cart-template.liquid” and “cart.liquid”, which are both not found in the Sections folder; I tried to include the suggested snippet in the main-cart-footer.liquid file, but without succeeding)
- https://www.youtube.com/watch?v=smyIqWWuZvs (same story, similar snippets to inject in the main-cart-footer.liquid file, no luck here as well)
Any input will be much appreciated. Thanks in advance for taking the time to read and reply.
Cheers.
Hi @IDB-RSM
In Dawn 14, you can search for <div class=“cart__ctas” text in snippets/cart-drawer.liquid and sections/main-cart-footer.liquid
and put your HTML code above it then it will appear on above checkout button on both cart drawer as well as cart page
This is the code that you can use
Thanks!
Thanks @pawankumar for pointing me in the right direction. By adding your snippet to those two files (snippets/cart-drawer.liquid and sections/main-cart-footer.liquid), I could make sure that the checkbox is displayed above the Check-out button in both the cart drawer and cart page.
Also, since I was interested to disable the Check-out button based on the checkbox selection, I added the snippet provided by KlinKode to the same two files, making sure to match the button id, which is “checkout” in main-cart-footer.liquid and “CartDrawer-Checkout” in cart-drawer.liquid.
Final result (unchecked vs checked) on desktop view:
Cheers.
IMPORTANT!
Unfortunately, my feedback about making the checkbox flagging mandatory didn’t prove sound.
After further testing, I realized that the Javascript snippet works but only after refreshing the page once or twice rather than on the first try (meaning when the customers access the web store the first time from their device).
@pawankumar would you be willing to look into this as well? Should I create a different post?
Thanks in advance for any input.
Hi @IDB-RSM
Please implement some changes to make it work correctly
Replace HTML with this
Add this javascript code before body closing tag
and finally in assets/cart.js
After this line this.addEventListener(‘change’, debouncedOnChange.bind(this));
Call this JS function that we put in theme.liquid
handleCheckoutButtons();
Like this
Please check if it works for you
Thanks!
Hi @pawankumar ,
I can’t thank you enough, it works like a charm and passed all my tests.
Just to make sure, I added your Javascript snippet to my theme.liquid file, is that where it is supposed to be? (you didn’t specify that detail so I assumed that theme.liquid was the best place for it).
Have a great weekend.
Yes @IDB-RSM
theme.liquid is fine, you can put script in theme.liquid at the end before body closing tag.
Thanks
It seems there is no code in your suggestions to copy - they are just blank. Any reason for that?
I plan to use Dawn 15 and needs the T&C to work both on cart page and the drawer, which I haven’t managed to do yet.
It’s a mystery why Shopify does not offer this out-of-the-box in their theme.
