App Block Prerequisites

1. Use an Online Store 2.0 Shopify Theme

The best way to utilize the TryNow Button is through Shopify App Blocks, which allow for dynamically embedded content to be added to your Online Storefront through the Shopify Theme Customizer. This functionality is only available through Online Store 2.0 themes. You can verify that you are able to add the TryNow Button App block as a Section in your theme to test this.

2. Utilize an add-to-cart form with a submit button and variant ID

The TryNow Button App Block needs a reference to an existing add-to-cart <form> element. Read about how to provide this reference through a form selector here.

<form method="post" action="/cart/add" enctype="multipart/form-data">
    <input type="hidden" name="id" value="123" />
    <button type="submit" name="add">Add to Cart</button>
 </form>

When the TryNow button is clicked, it will add a field namedselling_plan to this form and add the items to cart by clicking on the existing submit button. You should therefore ensure that when your form is submitted, it fully serializes the contents or at least specifically includes the selling_plan input.

The TryNow Button App Block expects an input element with the name id to be updated with the actively selected variant ID. You can also inform the TryNow Button of the variant by populating it as a GET parameter named variant in the window URL like ?variant=1233.