Standalone Operation

The TryNow Button works best when it is added via a Shopify App Block to the page. For custom storefronts and product detail pages, the TryNow Button must be operated manually to render and handle eventing. This is Standalone Operation, which allows the TryNow Button to work outside of the typical context.

You can use Standalone Operation of the TryNow Button to handle:

• atypical product detail pages, such as pages that aggregate more than one product into a single page.
• headless websites and implementations, when the button renders on a different domain than the myshopify.com domain.
• when Shopify App Embed Blocks are accessible, but not Shopify App Blocks on the product page.

By nature, implementing the TryNow Button with Standalone Operation requires some intermediate knowledge of HTML and JavaScript.

Prerequisites

Before beginning, ensure that the TryNow SDK is initialized. You can check that window.trynow.initialized === true in your code or listen for the trynow:initialized CustomEvent on the window.

window.addEventListener('trynow:initialized', function(){
  console.log('TryNow was initialized correctly')
})

Render the TryNow Button

When the TryNow Button is added to the product page, it uses Shopify's Liquid templating language to add parameters. These parameters can be provided by hand to the button through JavaScript.

Render a TryNow Button by creating the element in JavaScript, after the SDK is loaded. Alternatively, add the component to your HTML. It will not render until the TryNow SDK is loaded and initialized.

document.createElement('trynow-button')

The TryNow Button requires a set of attributes to function properly. The below attributes must be defined in order for the button to work. See below for an example of a button with all provided attributes.

<trynow-button
  data-product='{{ product | json | escape }}'
  data-shopper-tags='[OPTIONAL_TAGS]'
  data-add-to-cart-container='form[action="/cart/add"]'
  data-description='Try at home for [trial_period] days'
  data-cta-title='Try Before You Buy - $0'
  data-should-autoposition='false'
  data-button-classes
  data-button-margin='0px 0px 5px 0px'
  data-cta-button-custom-css='{{OPTIONAL_CSS}}'
  data-logo-color='black'
  data-description-font-size='12px'
  data-view-collection-text='View TryNow collection'
  data-collection-url
  data-logo-vertical-alignment='1px'
  data-logo-horizontal-alignment='0px'
  data-logo-width='46px'
  data-gated-toggle-font-size='12'
  data-gated-toggle-size='0.7'
></trynow-button>

If implementing with JavaScript, the above attributes can be added as below:

const tryNowButton = document.querySelector('trynow-button')
   tryNowButton.setAttribute('data-cta-title', 'Try Before You Buy - $0')
   ...restOfAttributes

The data-product attribute

Pay special attention to the data-product because it has to have the structure that Shopify Liquid offers. If you are using JavaScript to get the product data, the structure of the data might be different. So we you must use the following structure.

let productData = {
      id: null,
      title: "",
      handle: "",
      description: ``,
      published_at: "",
      created_at: "",
      vendor: "",
      type: "",
      tags: [],
      price: 0,
      price_min: 0,
      price_max: 0,
      available: true,
      price_varies: false,
      compare_at_price: null,
      compare_at_price_min: 0,
      compare_at_price_max: 0,
      compare_at_price_varies: false,
      variants: [
      			available: true,
            barcode: variant.barcode,
            compare_at_price: variant.compare_at_price,
            featured_image: {},
            featured_media: {},
            id: variant.id,
            inventory_management: variant.inventory_management,
            name: '',
            option1: variant.option1,
            option2: variant.option2,
            option3: null,
            options: [],
            price: 0,
            public_title: "",
            quantity_rule: variant.quantity_rule,
            requires_selling_plan: false,
            requires_shipping: variant.require_shipping,
            selling_plan_allocations: [
                {
                    "price_adjustments": [],
                    "price": 0,
                    "compare_at_price": 0,
                    "per_delivery_price": 0,
                    "selling_plan_id": YOUR_SELLING_PLAN_ID,
                    "selling_plan_group_id": ""
                }
            ],
            sku: variant.sku,
            taxable: variant.taxable,
            title: variant.title,
            weight: variant.weight,
      ],
      images: [],
      featured_image: "",
      options: [],
      media: [],
      requires_selling_plan: false,
      selling_plan_groups: [],
      content: ``
    }

Provide product and variant data

The TryNow Button needs to be informed of what product and variant the Shopper is viewing so it can determine how to render. You can provide this information by calling the setProduct and setSelectedVariant methods on the TryNow class.

// call once product is loaded/determined. setProduct is provided with the product JSON blob
window.trynow.components.ctaButton.setProduct({ ... })
                                               
// when Shopper selects a variant
window.trynow.components.ctaButton.setSelectedVariantId(123)

When these methods are called, the TryNow Button will work in Standalone Operation and will make its own add-to-cart XHR request when clicked.

Handle events

Since the TryNow Button will make it's own request, other page features like minicarts may not trigger as expected. To handle this, the TryNow Button will emit events on success and error of the XHR request.

document.addEventListener("tn-add-to-cart-success", () => {
  console.log("added to cart successfully");
});
document.addEventListener("tn-add-to-cart-failed", () => {
  console.log("something went wrong while adding to cart");
});

Redirection

If you'd like to redirect the shopper directly to the Checkout after adding a TryNow item to the cart, you can leverage TryNow events to trigger a redirect:

document.addEventListener("tn-add-to-cart-success", () => {
  window.location.href = '/checkout' 
});