💻How do I add Smartrr to a custom page? (Shopify Liquid)

How to add Smartrr to collection pages, landing pages, and custom snippet blocks within Shopify.

Collection Pages

Smartrr can be added to any collection page where a product form is present.

Add the {% render 'smartrr-product', product: product, smartrr_unique_id: product.id, smartrr_collection: true %} snippet to the desired product form.

Ensure smartrr_unique_id value is the product ID.

Add the {% render 'smartrr-product-styles %} tag to the top of the collection page file.

Add the <script type="text/javascript" src="{{ 'smartrr-product-script.js' | asset_url }}"></script> script tag to the collection page. Make sure this is placed before the {% render 'smartrr-product' %} tag is rendered.

Landing Pages

Smartrr can be added to any landing page where a product form is present AND you are able to manually pull in the liquid product object.

One method of getting the liquid product object is by using the all products objects and assigning the product handle. Example: {% assign product = all_products['product-handle'] %} For more information, click here.

Add the {% render 'smartrr-product' %} snippet to the desired product form alongside the smartrr_unique_id: product.id % attribute.

Ensure smartrr_unique_id value is the product ID.

Example:

{
    % render 'smartrr-product', product: product, smartrr_unique_id: product.id %
}

Custom Liquid Blocks

Lastly, you can use custom liquid to pull in selling plan groups (a.k.a. subscription programs) and their selling plans (a.k.a. subscription plans). With this, you can loop through the selling plans to build a UI where selling plans can be selected. For more information on selling plan groups, click here.

Example:

{% assign filtered_selling_plan_groups = product.selling_plan_groups | where: "app_id", "4836205" %}

{% for group in filtered_selling_plan_groups %}
  <div>
    <label>{{ group.name }}</label>
    <input type="radio" value="{{ group.id }}">
  </div>
  <div>
    <select>
      {% for plan in group.selling_plans %}
        <option value={{ plan.id }}>{{ plan.name }}</option>
      {% endfor }
    </select>
  </div>
{% endfor }

Make sure that the selling plan ID is being captured upon adding product to the cart. The selling_plan property is needed for the POST request to the cart API. For more information, click here.