Adding Smartrr to a custom page (Shopify Liquid)

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

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.

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

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 %}