After you have added the TryNow purchase option to your product(s), you can add the Try Before You Buy CTA button and customize the button design. You can change the style of the button, color of the button, the length of the button, the words underneath the button and more.
Step 1: Add the app block.
Click on "Add block" in the left sidebar in the Template section. Then click on the "TryNow Button" option.
The Try Now app block will appear in the sidebar. Use the four dot symbol to drag this block to where you want it to appear in the page, such as right below the "Buy buttons" block.
Step 2: Customize the app block.
After adding the TryNow button app block, the sidebar settings should appear with configurable fields. If you click on other elements and are trying to get back to these settings, simply click on the TryNow button app block. Some commonly used app block settings include:
Title: The text in this textbox will replace the text that is on the CTA button.
Button classes: Depending on your theme, the button should have the same formatting as the Add to cart button.
If it does not, then you will need to change the button classes. You can do this by inspecting the Add to cart button block and locating the element class for the button, copying that snippet and pasting it in the Button classes for the TBYB button.
<button id="ProductSubmitButton-template--18483332972845__main" type="submit" name="add" class="product-form__submit button button--full-width button--primary">
<span>Add to cart
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
In this case, the class that we want to enter in the text box is (this is the default text that appears for the button classes):
product-form__submit button button--full-width button--primary
This causes the Try Now button to look the same as the Add to cart button:
Button margin: the default is 0px 0px 5px 0px. You can make edits to the values in order to adjust the spacing between the Add to cart and TryNow buttons or add any desired indents.
Description: the text in this editable text box replaces the copy under the Try Now CTA button.