# Adding Smartrr to a custom page (Shopify Liquid)

## Collection Pages

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

Add the <mark style="color:orange;">`{% render 'smartrr-product', product: product, smartrr_unique_id: product.id, smartrr_collection: true %}`</mark> snippet to the desired product form.

Ensure <mark style="color:orange;">`smartrr_unique_id`</mark> value is the product ID.&#x20;

Add the <mark style="color:orange;">`{% render 'smartrr-product-styles %}`</mark> tag to the top of the collection page file.

Add the <mark style="color:orange;">`<script type="text/javascript" src="{{ 'smartrr-product-script.js' | asset_url }}"></script>`</mark> script tag to the collection page. Make sure this is placed *before* the <mark style="color:orange;">`{% render 'smartrr-product' %}`</mark> 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.&#x20;

{% hint style="info" %}
One method of getting the liquid product object is by using the <mark style="color:orange;">`all products`</mark> objects and assigning the product handle. \
\
Example: \
\ <mark style="color:orange;">`{% assign product = all_products['product-handle'] %}`</mark> \
\
For more information, [<mark style="color:blue;">click here</mark>](https://shopify.dev/api/liquid/objects/all_products).
{% endhint %}

Add the <mark style="color:orange;">`{% render 'smartrr-product' %}`</mark> snippet to the desired product form alongside the <mark style="color:orange;">`smartrr_unique_id: product.id %`</mark> attribute.&#x20;

{% hint style="info" %}
Ensure <mark style="color:orange;">`smartrr_unique_id`</mark> value is the product ID.&#x20;
{% endhint %}

Example:&#x20;

```javascript
{
    % 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, [<mark style="color:blue;">click here.</mark>](https://shopify.dev/api/liquid/objects/selling_plan_group)

Example:&#x20;

```javascript
{% 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 %}
```

{% hint style="warning" %}
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, [<mark style="color:blue;">click here</mark>](https://shopify.dev/api/ajax/reference/cart#add-a-selling-plan).
{% endhint %}