With our standard hosted checkouts you simply provide a link for your customers to visit to complete their purchase.
However, if you’re using one of our pop-up checkout templates you can either use the built-in option to customise a button, upload your own image, or use custom HTML to trigger the pop-up.
This is relatively easy to do and requires some basic HTML coding.
We’ve provided some examples for you to use:
Step 1. Required script
If you’re looking to use a pop-up checkout on your page you will need to embed a certain bit of code on each page you want the pop-up checkout to be enabled on.
<script async src="//tinder.thrivecart.com/embed/v1/thrivecart.js"></script>
This piece of code needs to be placed somewhere on the page. It doesn’t matter where, but we advise near the top so it’s loaded early.
Step 2. Your custom HTML
Next, we need to look at building the element that’s going to launch your pop-up checkout.
Using a Standard Text Link
If you wanted to link some text to open the modal cart you would need to use this code:
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="your subdomain" data-thrivecart-product="1">This is your link text</a>
Using an Image
If you wanted to use an image open the modal cart you could use the code we supply or use this code:
<a href="javascript:;" class="thrivecart-button" data-thrivecart-account="your subdomain" data-thrivecart-product="1"><img src="//yourwebsite.com/imageaddress.png"></a>
Using Your Themes Shortcode
If you wanted to use one of your themes short codes to trigger a modal cart, you might have a button short code which you prefer to use instead of ours for example. Then you will need to add some tags around your shortcode. (You will need to add these in the ‘text’ editor instead of ‘visual’ within your WordPress post editing area.)
<span class="thrivecart-button" data-thrivecart-account="your subdomain" data-thrivecart-product="1">[YOUR SHORT CODE TEXT]</span>
Things to bear in mind
When adding shortcodes you typically have to enter a URL where the button links to, as we’re not leaving the page we want to use a bit of code that gives the impression the code is a link but also something that doesn’t jump to the top of the page like using an anchor # symbol would do. By using javascript:; as the link address the browser will treat the object as a proper link and give it all the right styling.
You also need to add the ‘data-thrivecart-account=”subdomain”‘ parameter (replacing ‘subdomain’ with your own account’s subdomain), and then the ‘data-thrivecart-product=”1″‘ parameter (replacing ‘1’ with your product’s ID, which can be found in the URL when you click on the product’s edit, stats or embed link.
As always If you have any questions you can contact us on support@thrivecart.com.