ThriveCart: Help: Advanced: Custom HTML to trigger modal cart

example.html

<ul>
  <li>Bullet point #1</li>
  <li>Bullet point #2...</li>
  <li class="thrivecart-button" data-thrivecart-account="[your subdomain]" data-thrivecart-product="1">Click here to buy!</li>
</ul>

<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>

Remember that the following script only has to be placed once in the html document. If you're using WordPress often your theme will have the option to add scripts to your header (such as your analytics script), you can paste this code into that area for your theme. Then you only need to worry about the 'class' being applied to what it is you want to link to a modal cart.

The script to go on each page is:
<script async src="//thrivecart.com/embed/v1/thrivecart.js"></script>

Lets look at some other examples:

## 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>

## Image Link
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="http://dalemiles.com/wp-content/uploads/2015/05/fbad09.gif"></a>

## Using Your Themes Shortcodes
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 Bare 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 achor # 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 can see this being used in all the examples.

If you have any questions you can contact us on support@thrivecart.com remember if you need assistance with creating a link we're going to need to see the code, so either let us know your WordPress login details, or paste the code into a text document and attach it to your email (pasting the code directly into the email will not work as the formatting gets stripped when entering our support desk).

Thanks
Dale