The TryNow Button

Background

The TryNow Button, also called the TryNow CTA Button (call-to-action), is the point where Shopper's are able to utilize Try Before You Buy by adding items to the cart. When clicked, the TryNow Button is responsible for adding the Shopper's selected product variant to their cart as Try Before You Buy.

Typically the TryNow button is added by dragging the TryNow Button App Block into your theme via the Shopify Theme Customizer. See the prerequisites for implementing the TryNow Button via App Blocks here.

Form Selection

The TryNow Button requires a reference to an add-to-cart <form> element in order to render and add the TryNow selling plan to products in the cart. The TryNow Button obtains this reference by looking for typical Shopify add-to-cart forms, but some themes require manual adjustment so that TryNow can learn where your add-to-cart form is.

Under the hood, the TryNow Button will place a new Selling Plan ID element within the <form>, which is serialized in the add to cart request. When a Shopper clicks the TryNow Button, the TryNow Button updates this element with the TryNow Selling Plan and then internally clicks the regular add-to-cart button.

Manually Specifying Form Selector

In most themes, specifying an add-to-cart form selector is not required. If you see the TryNow button rendering, the button has found a reference <form> to bind to, and you do not need to specify anything here.

If no button is rendering when you add the TryNow Button App Block to your page, first ensure:

You are previewing a product that has the TryNow Selling Plan applied to it's variants
The Enable Try Before You Buy App Embed Block is toggled on
Your theme is compatible with App Blocks and renders them.

After validating that the button is not rendering because of a <form> not being found, it is necessary to specify the selector manually by setting the value in the App Block settings. You can determine the <form> by using a tool like Google Chrome Elements Inspector to find the <form> and copy a reference to it. Be sure that this reference does not contain excessive dependencies on page structure or randomized IDs that are likely to change and break things later.

Styling

Like the form, the TryNow Button will attempt to match styles automatically. Additional adjustments may be necessary by providing custom CSS to the button. Attach new class names to the TryNow CTA button in the provided setting box in the Shopify Theme Customizer.

Testing

Test that the TryNow Button is working by finding the TryNow Selling Plan ID inside the <head> of a TryNow product detail page source code. This ID is contained inside a <meta> called trynow:selling_plan_id.

<meta name="trynow:selling_plan_id" content="123456789">

When an item is added to the cart, you should be able to locate the matching selling plan ID on the Shopify add.js request.

// Good add-to-cart request payload including the TryNow Selling Plan ID
{
  items: [
    {
      quantity: 1,
      id: 794864229,
      selling_plan: 123456789,
    },
  ];
}

You can also GET the contents of /cart.js to assert that the product was added as TryNow.

Common problems and causes:

If you're seeing the correct selling plan on the POST request, but not returned in the response or in GET requests to /cart.js, you are likely encountering an eligibility issue with TryNow and/or Shopify Selling Plans.
If clicking the TryNow button does not submit an add-to-cart request, the TryNow button is binding incorrectly to the add-to-cart form.

Elements of the Button

The <trynow-cta-button> element is a group of elements, each of which provides a unique ID for customization. Below is the basic structure of the CTA button.

<trynow-cta-button>
  <button id="trynow-cta-button" type="button"></button>
  <span id="trynow-cta-description">
    <span id="trynow-cta-learn-more">Learn More</span>
    <a href="https://www.trynow.com/shopper" target="_blank"> </a>
  </span>
</trynow-cta-button>