Prerequisites
Checklist for using the TryNow Button App Block
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
.
Updated 2 months ago
Review toggle docs if you are using a one-button implementation, customize the style to your button, or add more conditional customizations.