Is it possible to include a terms and conditions checkbox that a user must agree to on the checkout page that slides out when you are using the buy button to embed your products in another site?
If it is, can it then also do the following:
Store an indication that the user agreed along with their order details.
Be applied on only certain products or collections of products.
Hello TomSki,
Yes its possible,
Term and condition:
https://help.shopify.com/en/themes/customization/cart/add-terms-and-conditions-checkbox but I’m not sure it gives you indication in order details
To get store indication that use agreed with order details, you can use this ( you have to customize it accordingly )
https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products
And be applied on certain products you can use this ( Just create alternate template and select for certain products )
https://help.shopify.com/en/themes/customization/store/create-alternate-templates
Thanks for the reply @Guleria . I am using the Buy Button sales channel and these customizations do not appear to carry through. Any ideas?
Please share store url (or specific product url ), so i can check what customization you did and not carry though.
I will send you a pm to guleriathakur43@gmail.com
I was able to figure this out and get it working using a custom footer mustache template in the buy button configuration.
My issue before was not realizing that I would have to replace the whole footer template.
I thought there was a note subcomponent.
Hey TomSki,
I’ve been trying to solve this for last few days and couldn’t find any workaround. Any help would be appreciated.
I added my terms & conditions checkbox to my checkout footer.
If you look through your buy button code that gets exported, you should see an area that starts “templates”: { “footer”:
Here is where you can find the default templates for these areas: https://github.com/Shopify/buy-button-js/blob/master/src/templates/cart.js
I started by copying the entire footer content from here and then adding my customizations.
This is the code snippit used to add the checbox.
Once submitted it is shown on the order.
"templates": {
"footer" : '{{^data.isEmpty}}<div class="{{data.classes.cart.footer}}" data-element="cart.footer">{{#data.discounts}}<div class="{{data.classes.cart.discount}}" data-element="cart.discount"><span class="{{data.classes.cart.discountText}}" data-element="cart.discountText"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" class="{{data.classes.cart.discountIcon}}" data-element="cart.discountIcon" aria-hidden="true"> <path d="M10.001 2.99856C9.80327 2.99856 9.61002 2.93994 9.44565 2.83011C9.28128 2.72029 9.15317 2.56418 9.07752 2.38155C9.00187 2.19891 8.98207 1.99794 9.02064 1.80405C9.05921 1.61016 9.1544 1.43207 9.29419 1.29228C9.43397 1.1525 9.61207 1.0573 9.80596 1.01874C9.99984 0.980171 10.2008 0.999965 10.3834 1.07562C10.5661 1.15127 10.7222 1.27938 10.832 1.44375C10.9418 1.60812 11.0005 1.80136 11.0005 1.99905C11.0005 2.26414 10.8952 2.51837 10.7077 2.70581C10.5203 2.89326 10.266 2.99856 10.001 2.99856ZM10.001 1.67062e-05H7.0024C6.87086 -0.000743818 6.74046 0.024469 6.61868 0.0742095C6.49691 0.12395 6.38614 0.19724 6.29275 0.289876L0.295655 6.28697C0.201972 6.37989 0.127614 6.49044 0.0768697 6.61224C0.0261256 6.73404 0 6.86468 0 6.99663C0 7.12857 0.0261256 7.25922 0.0768697 7.38102C0.127614 7.50282 0.201972 7.61336 0.295655 7.70628L4.29372 11.7043C4.38664 11.798 4.49718 11.8724 4.61898 11.9231C4.74078 11.9739 4.87143 12 5.00337 12C5.13532 12 5.26596 11.9739 5.38776 11.9231C5.50956 11.8724 5.62011 11.798 5.71303 11.7043C5.90294 11.5044 11.5102 5.89716 11.7101 5.70725C11.8028 5.61386 11.876 5.50309 11.9258 5.38132C11.9755 5.25954 12.0007 5.12914 12 4.99759V1.99905C12 1.46887 11.7894 0.96041 11.4145 0.585519C11.0396 0.210628 10.5311 1.67062e-05 10.001 1.67062e-05Z" /> </svg> <span class="visuallyhidden">Discount:</span>{{text}} </span> <span class="{{data.classes.cart.discountAmount}}" data-element="cart.discountAmount">{{amount}}</span> </div> {{/data.discounts}} <div style="font-weight:bold;"> <p class="{{data.classes.cart.subtotalText}}" data-element="cart.total">{{data.text.total}}</p> <p class="{{data.classes.cart.subtotal}}" data-element="cart.subtotal">{{data.formattedTotal}}</p> {{#data.contents.note}} <div class="{{data.classes.cart.note}}" data-element="cart.note"> <p class="{{data.classes.cart.noteDescription}}" data-element="cart.noteDescription"> <input type="checkbox" name="tandc" value="I accept the terms and conditions." onclick="if (this.checked == true) { document.getElementById(\'checkoutButton\').disabled=false; } else { document.getElementById(\'checkoutButton\').disabled=true; }"> {{data.text.noteDescription}}</p> <textarea class="{{data.classes.cart.noteTextArea}}" data-element="cart.noteTextArea" style="display:none;" rows="3"/>I accept the terms and conditions.</textarea> </div> {{/data.contents.note}} <p class="{{data.classes.cart.notice}}" data-element="cart.notice">You must accept the <a href="/wp-content/uploads/Conditions-of-Use.pdf" target="_blank">terms and conditions</a> to checkout.</p> </div> <button class="{{data.classes.cart.button}}" type="button" id="checkoutButton" data-element="cart.button" disabled>{{data.text.button}}</button> </div> {{/data.isEmpty}}',
},
Here are some additional links I found useful in working on customizing the buy button code.
https://help.shopify.com/en/manual/sell-online/buy-button/edit-delete
https://github.com/Shopify/buy-button-js/blob/master/docs/customization/index.md
Thank you so much for all the details. After countless tries, I still could not make it work, since even though I see “footer” in the code for older generated buttons, new generated button codes don’t have them already.
I had to go with a workaround and put the checkbox one step ahead of buy button.
I have also been trying to figure this out. Any more tips from anyone? This would be greatly appreciated!
We couldn’t find a solution for this either.
The “Buy Button” sales channel should include an “accept T&C” field.