Initialization
Adding the TryNow SDK to a storefront to enable Try Before You Buy
Background
TryNow provides a JavaScript SDK that powers it's Shopper-facing components and exposes a series of methods that can be used by developers to create rich Try Before You Buy experiences. Once initialized in the browser through the methods described below, the SDK is made available through window.trynow
. Once initialized, a window.trynow.initialized
boolean property is set to true
.
Prerequisites
In order to ensure a successful launch of your TryNow implementation, we suggest reviewing some of the below requirements to streamline your process.
Requirements
- If using App Blocks, product templates must be using Shopify 2.0.
- Use a form
submit
action to add items to a cart. If that is not being used, whichever method adds items to the cart should be able to accept or pass a Selling Plan in the request. - Shopify Payments are enabled.
Nice-to-haves
- If using App Blocks, the collection template should be Shopify 2.0 in order to better streamline integration.
- Cart line items render the selling plan name on the Cart Page or Side Carts to give visibility to shoppers about their cart.
Shopify App Blocks
Typically, the TryNow SDK is initialized automatically when using the TryNow Shopify App Blocks. To enable this:
- Open the Shopify Theme Customizer and open the App Embeds section on the lefthand side.
- Turn on the "Enable Try Before You Buy" App Embed Block
Once enabled, window.trynow
will be available for use.
Via <script>
Tag
<script>
TagThe TryNow SDK can be injected via static URL as well. For storefronts who cannot use Shopify App Blocks (such as headless stores or legacy storefronts) or who need to customize their initialization configuration, TryNow initialization can be performed manually.
// initTryNow() MUST be defined before including the TryNow SDK asset.
<script>
const config = {
myshopifyDomain: 'acme-store.myshopify.com', // required
waitForEvent: 'test-string', //optional
debug: false // optional
}
function initTryNow() {
window.trynow.initialize(config)
}
</script>
<script async src='https://components.trynow.net/shopify/1.2.0/trynow.min.js' onload='initTryNow()'>
</script>
waitForEvent
is helpful when you need to delay initializing TryNow. React and Vue applications, for example, may need to load completely or partially before TryNow is loaded onto the page.
If you chose to add a waitForEvent
string, you must dispatch that event in order to initialize TryNow properly:
window.dispatchEvent(new CustomEvent('test-string'))
Updated about 1 month ago
Check out what you need to ensure you can utilize our app blocks if you are using a Shopify theme.