STEP 2-5

Add the Try Before You Buy button

Add the Try Before You Buy button to your Shopify product pages.

Adding it as an app block
Adding it by writing code directly in your storefront

1. Adding it as an app block

Follow the video below to add the trial button app block in the theme editor.

※Depending on how your theme is built, it may not be possible to add the trial button as an app block. If that is the case, contact your account manager.

If the button does not appear

In your Shopify admin, check that Purchase options has been added to the product's detail page
※Recustomer adds all products in your store to the purchase option when you start using Try Before You Buy, and also adds products you create after that about every 12 hours. Products you remove from the purchase option are not added back (see 2-6 Set the products eligible for a trial). If a product has not been added 12 hours after you created it, contact us
Check that the form and the "Add to cart" button on the product detail page can be found
1. Open the trial block settings in the theme editor and check the current values of Form selector and Add to cart button selector under Selectors (existing theme integration)
2. In your Shopify admin, preview the theme (your online store opens)
3. On a product detail page of your online store, right-click and choose Inspect (the developer tools open)
4. In the Console tab of the developer tools, run the following
```
form = document.querySelector("the value of the form selector you checked in step 1")
addCartButton = form.querySelector("the value of the add to cart button selector you checked in step 1")
```
5. If the result is null (no element is returned), the selectors do not match your theme. Correct Form selector and Add to cart button selector in the trial block settings so that they match your actual theme, then check again

Note
If the button still does not appear, contact us. When you do, please include your collaborator request code (you can find it under Settings > Users and permissions in your Shopify admin).

2. Adding it by writing code directly in your storefront

How it works

To add an item to the cart as a trial, you retrieve the Selling Plan ID associated with the product and send it as a selling_plan parameter on the add-to-cart (/cart/add) form (this is Shopify's standard purchase options mechanism). If your theme uses an AJAX cart (/cart/add.js), include selling_plan in the request parameters. Recustomer associates the selling plan with the product automatically.

How to implement it

The following is a sample implementation. Please implement the finer display conditions to suit your own requirements.

Retrieve the Selling Plan ID associated with the product

Add the Liquid code below to your product page template (the file that renders the product form). It retrieves the ID of the current plan into the selling_plan_id variable when the product is rendered (you use this variable in the code in step 2).

The purchase options group is identified by selling_plan_group.app_id. The app_id for Try Before You Buy is recustomer_tbyb
A group may still contain older selling plans created in the past. Older plans have -deprecated- and a UUID appended to their name (for example, お試し購入-deprecated-123e4567-e89b-12d3-a456-426614174000; お試し購入 is the plan name Recustomer creates, meaning Try Before You Buy). Ordering with an older plan ID would charge the shopper under unintended conditions, so the code below automatically excludes plans marked with -deprecated-
The second half of the code decides whether to show the trial button based on a product tag or a collection, and stores the result in show_trial_button. It is also false when selling_plan_id is null (for example, when no trial plan is associated with the product). Only render the trial button (the form containing the input from step 2) when show_trial_button is true

{&#37;- assign selling_plan_id = null -%}

{&#37;- comment -%} Identify the purchase options group by app_id and pick a plan that is not deprecated {&#37;- endcomment -%}
{&#37;- for group in product.selling_plan_groups -%}
  {&#37;- if group.app_id == "recustomer_tbyb" -%}
    {&#37;- assign active_plan_count = 0 -%}
    {&#37;- assign active_plan_id = null -%}
    {&#37;- for plan in group.selling_plans -%}
      {&#37;- comment -%}
        A deprecated plan is named "original display name + "-deprecated-" + UUID". The conditions are
        that the 12 characters starting 48 characters from the end are "-deprecated-", and that the
        last 36 characters have hyphens in the UUID positions (8-4-4-4-12). A "contains" partial match
        is not used, because a display name that happens to contain "-deprecated-" would then make the
        current plan look deprecated.
      {&#37;- endcomment -%}
      {&#37;- assign deprecated_marker = plan.name | slice: -48, 12 -%}
      {&#37;- assign uuid_part = plan.name | slice: -36, 36 -%}
      {&#37;- assign hyphen_1 = uuid_part | slice: 8, 1 -%}
      {&#37;- assign hyphen_2 = uuid_part | slice: 13, 1 -%}
      {&#37;- assign hyphen_3 = uuid_part | slice: 18, 1 -%}
      {&#37;- assign hyphen_4 = uuid_part | slice: 23, 1 -%}
      {&#37;- assign is_deprecated = false -%}
      {&#37;- if deprecated_marker == "-deprecated-" and hyphen_1 == "-" and hyphen_2 == "-" and hyphen_3 == "-" and hyphen_4 == "-" -%}
        {&#37;- assign is_deprecated = true -%}
      {&#37;- endif -%}
      {&#37;- unless is_deprecated -%}
        {&#37;- assign active_plan_count = active_plan_count | plus: 1 -%}
        {&#37;- assign active_plan_id = plan.id -%}
      {&#37;- endunless -%}
    {&#37;- endfor -%}
    {&#37;- comment -%}
      If exactly one non-deprecated plan cannot be determined, selling_plan_id is left as null.
      Deprecated plans were created under the previous conditions, so picking one by mistake would
      charge the shopper under unintended conditions.
    {&#37;- endcomment -%}
    {&#37;- if active_plan_count == 1 -%}
      {&#37;- assign selling_plan_id = active_plan_id -%}
    {&#37;- endif -%}
  {&#37;- endif -%}
  {&#37;- if selling_plan_id != null -%}
    {&#37;- break -%}
  {&#37;- endif -%}
{&#37;- endfor -%}

{&#37;- comment -%}
  Display control for the trial button. Change the tag name (Trial) and the collection handle (trial)
  to match what you decided in 2-10. Set the products eligible for a trial.
{&#37;- endcomment -%}
{&#37;- assign show_trial_button = false -%}
{&#37;- if selling_plan_id != null -%}

  {&#37;- comment -%} A. Controlling it by product tag (for example, show it on products tagged "Trial") {&#37;- endcomment -%}
  {&#37;- if product.tags contains "Trial" -%}
    {&#37;- assign show_trial_button = true -%}
  {&#37;- endif -%}

  {&#37;- comment -%}
    B. Controlling it by collection (for example, show it on products in the collection whose handle is "trial").
    Use either A or B, and delete the one you do not use.
    If you tag the products that are NOT eligible instead, invert the condition
    (for example, unless product.tags contains "NoTrial").
  {&#37;- endcomment -%}
  {&#37;- assign collection_handles = product.collections | map: "handle" -%}
  {&#37;- if collection_handles contains "trial" -%}
    {&#37;- assign show_trial_button = true -%}
  {&#37;- endif -%}

{&#37;- endif -%}

{&#37;- if show_trial_button -%}
  {&#37;- comment -%} Render the trial button (the form containing the input from step 2) here {&#37;- endcomment -%}
{&#37;- endif -%}

Add an input inside the form that holds the selling_plan_id from step 1 as its value
```
<input type="hidden" name="selling_plan" value="{{ selling_plan_id }}">
```
※If you add this input to your existing "Add to cart" form as is, every regular purchase becomes a trial purchase. Either provide a separate form (button) for trials, or add the input only when the trial button is clicked
With step 2 in place, adding to the cart adds the item with the purchase option applied

Note
If you have any questions about the implementation, contact your account manager.