Nothing happens when you click the Try Now button?
or
When you click the button, the item added does not have Try Before You Buy details in the cart and checkout?
If either of the above issues occurred, it may be because the correct add-to-cart form has not been selected. Please follow this guide to help you solve the issue.
To begin, we recommend using an updated browser like Google Chrome, as it facilitates the use of the browser's DevTools for obtaining necessary elements from your website. The screenshots in this guide are from a Google Chrome browser.
Here are the steps:
Step 1: Open a product page that has the Try Now button in your browser.
Step 2: Once you're on the product page, open the browser DevTools. You can do this by either clicking on the three dots at the top-right corner of the browser window (refer to the attached screenshot).
Step 3: You can now select an element from the product page and inspect the HTML code that renders it. If no HTML is highlighted in the Elements pane of the DevTools, make sure the arrow on the top-left corner of the DevTools window is enabled. If it's not marked with a blue color, click on it. When hovering over an element from the product page, you should see something like this:
Step 4: Once the DevTools are open and you are able to inspect an element on hovering, then go ahead and click on the add-to-cart button of your product page.
On the Elements pane on the DevTools, you should now see the add-to-cart button highlighted.
Step 5: Once highlighted, you'll need to look for the form element that's wrapping the add-to-cart button; this form element should be somewhere above the add-to-cart button HTML, and should look something like this:
Step 6: Now that you have identified the form element, you need to retrieve a general attribute from that form element. This attribute should be unique on the page but not specific to this product page alone. This ensures that the button will continue to function correctly on other product pages. Below is an example of the HTML code for the form:
<form method="post" action="/cart/add"
id="product-form-template--16815936602327__main-8076130123991"
accept-charset="UTF-8"class="shopify-product-form"enctype="multipart/form-data"
data-product-form=""data-product-handle="face-primer-try-before-you-buy"
>
The TryNow button's code typically searches for the action="/cart/add", so it will not be that attribute (attributes come before the = sign. E.g. actions). Similarly, the id attribute, which contains random numbers specific to this product page, cannot be used for other pages, so we can disregard it as well. The class attribute of the example appears to be specific to this form element but general enough to be present on other product pages, so we can consider using it.
You can double click on it and copy it, like this:
Step 7: Now for it to be entered within our Form Selector setting, we need to wrap it on a form element like the following:
form[class="shopify-product-form"]
Note: Sometimes it may not be class, but it could be one of the other options that provide specificity for this form element. If we had gone with a different attribute, this is what you would insert:
form[enctype="multipart/form-data"]
Step 8: Now you can go ahead and add that into the Form Selector setting of the TryNow button app block. Go to Shopify Themes > Customize > Product Page > Click the TryNow button app block
Step 9: Now hit Save on the Customize editor and refresh the product page you were using so you can verify the TryNow button now works correctly.
If it's not yet working as expected, you can try with different form attributes from step 6, and if not, reach out for support and we'll be glad to help.