Take full control of how your checkout appears on your website with ThriveCart’s advanced pop-up checkout setup options.
While ThriveCart already lets you style built-in buttons, use a text link, or upload your own custom button image, some businesses need even more flexibility — and that’s where a custom HTML trigger becomes incredibly powerful. By adding a small snippet of your own code alongside the ThriveCart embed script, you can fire the pop-up checkout from virtually any element on your site: text links, menu items, images, icons, or fully custom-designed buttons.
This approach is perfect for brands with highly tailored page designs, interactive layouts, or funnel builders that require specific HTML attributes to trigger actions. If you want total creative freedom while still delivering a seamless, high-converting checkout experience, custom HTML triggers give you the best of both worlds.
Step 1. Place 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. Build your custom HTML
Next, we need to look at building the element that’s going to launch your pop-up checkout. The below codes will all need to be formatted with your account and product details (by replacing “your subdomain” and the product ID with your own).
Using a Standard Text Link
If you wanted to link some text to open the modal cart, you would need to use code formatted similar to:
<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.
Frequently Asked Questions (FAQs)
- Q: How do I customize the code with my subdomain and product ID?
- A: You need to add the ‘data-thrivecart-account=”subdomain”‘ parameter (replacing ‘subdomain’ with your own account’s subdomain – this subdomain can be seen in the URL when viewing your dashboard. For example, https://thrivecart.com/subdomain/#/products).
The ‘data-thrivecart-product=”1″‘ parameter also needs to be adjusted (replacing ‘1’ with your product’s ID, which can be found beside your product on your product overview page)
- A: You need to add the ‘data-thrivecart-account=”subdomain”‘ parameter (replacing ‘subdomain’ with your own account’s subdomain – this subdomain can be seen in the URL when viewing your dashboard. For example, https://thrivecart.com/subdomain/#/products).
- Q: Instead of custom HTML, how can I use the built-in embed options to customize the buttons or image for my modal pop-up?
- A: If you want to use our built-in options for your modal, you can easily set those within the editor directly, by choosing “</> embed options” from the drop-down in your editor:
