Shopify themes, liquid, logos, and UX
Hi, I updated my store to the new theme yesterday but have noticed that when clicking checkout from the shopping card the customer is not able to proceed as there is a no checkbox to select the terms. If you click the buy now or go to cart from the pop up there is block. However I am sure many customers will be stock in this step and not be able to make a purchase. I have spent hours reading up on this searching for a solution but can't find anything. I am surely not the first to have this issue? I contacted support but they have not solution other than contacting the development team. I was able to add some code in my previous theme but the new theme does not have the same liquids and thus I am not sure how to do this. Any assistance would be most welcome.
Hi @Earp, this requires 3 steps:
1. in "main-cart-footer.liquid" (and "cart-notification.liquid") add a checkbox with the id="agree"
In "main-cart-footer.liquid" I inserted it in line 54 and in "cart-notification.liquid" I inserted it in line 24.
I am using this code for my checkbox:
<p>
<input type="checkbox" id="agree">
<label for="agree">
Ich stimme der <a href="/policies/privacy-policy">Datenschutzerklärung</a>, den <a href="/policies/terms-of-service">AGB</a> und der <a href="/policies/refund-policy">Widerrufsbelehrung</a> zu.
</label>
</p>
This is german, but you can translate it and customize it four your store.
2. in "cart.js" (and "cart-notification.js") add this at the end of the code:
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Add your personal ERROR MESSAGE here");
return false;
}
});
});
The code will not allow the customer to proceed without checking to the checkbox.
3. in "theme.liquid" add this line within the head compartment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
It will make sure the code library we are using is loading.
!!! Please note:
Customers can proceed without checking the checkbox when your dynamic checkout buttons are enabled.
You get an even better result by just installing the app:
Terms and Conditions Checkbox from RoarTheme
Hello!
Thank you for this. This all works except one thing - could you help.
There is a pop up notification to check the box even when the box is checked. Thank you again @Chessary
We think we might found a solution for this
try replacing if ($('#agree').is(':checked'))
with if ($($('#agree')[0]).is(':checked'))
so code in .js files should look like:
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($($('#agree')[0]).is(":checked")) {
$(this).submit();
}
else {
alert("עליך להסכים לתנאי השימוש ומדיניות הפרטיות כדי להמשיך");
return false;
}
});
});
hope this helps
Hey, I tried the code + the change @babyboss suggested. For me it doesn't work.
Any other tips?
Hey! It doesn't work for me neither. Did you find a solution? 🙂
/Sandra
i cannot save the cart.js after i pasted the code. it says: "Error: Invalid JSON: unexpected token" what does that mean?
Hey
thanks for the input
theres a problem with the function that even if the box is checked you can not continue.
any help with that?
Thank you so much but I am afraid it still doesn't work. I complete the 3rd step, an error message pops up regardless if the box is checked or not.
If I take that code out, the buyers can check out without accepting the conditions.
Sadly @babyboss 's solution didn't work either.
Any idea to make it work? It is absolutely outrageous how Shopify won't provide such a simple (and in many countries such as mine, obligatory) thing for the price we are paying them. If I knew this from the start I would never have chosen them. @Shopify I hope you are seeing this. You are being huge *ssholes.
I´m facing the same question. As the solutions down below don´t seem to work, I would need some HELP!!!!!!
Hiii there,
thank you so much for providing the code (incl. the adaptions) it worked first but now it doesn't work anymore. I even have the problem that I can not put an item into the cart when i am on the product page. It seems to be stuck in the loading process, when putting the product into the cart. So sad. Already talked to the Helping center and Theme expert who came back to me referred to the part of the code that was posted here as the adaption for the .js part, but said I should ask the developer where the code is from. So they do not want to help at all. Too bad. Hope someone can help anyhow. 🙂
Hey @Earp, want to include a 'Agree to Terms and Conditions' checkbox in your Shopify cart? Watch this tutorial without using any apps: https://www.youtube.com/watch?v=smyIqWWuZvs
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024