LogoLogo
  • πŸ› οΈWelcome to Smartrr help docs
  • Links
    • Changelog
    • API Docs
  • Getting Started
    • Implementation
      • πŸͺ„Installing Smartrr on a Shopify 2.0 theme (Automatic Install)
      • πŸ—ΊοΈInstalling Smartrr on a custom Shopify theme (Guided Install)
      • πŸ§Ÿβ€β™‚οΈInstalling Smartrr on a headless store
      • πŸ’»Adding Smartrr to a custom page (Shopify Liquid)
    • Onboarding
      • ⛑️Basic onboarding process
      • 🧀Smartrr team led onboarding
      • πŸ’΅Plans
      • πŸ’³Migrating subscriptions from payment processors
  • Support
    • Subscription Setup
      • πŸ“‡Subscription Programs
      • βš“Subscription anchor dates
      • πŸ—“οΈMaximum/minimum (finite) subscription plans
      • πŸ“§Email subscription notifications (Customer Notifications)
      • πŸ“²SMS subscription notifications (via Twilio)
      • πŸ›οΈSubscription discount codes
      • πŸ’ΈPrepaid subscriptions
      • πŸͺœSequential Flow Builder?
      • πŸ“¦Shipping methods
      • ❔Subscriptions when an item is unavailable
      • πŸ’²Buy-now-pay-later payment methods for subscriptions
      • 🏁Checkout Extensions
    • Admin Portal
      • πŸ”Adjusting customers’ subscriptions
      • πŸ“‡Adjusting customers' information
      • πŸ€Έβ€β™‚οΈ"View as customer" feature
      • πŸ•’Event log
      • πŸ“ŠAdvanced Analytics reporting
      • πŸ–ŒοΈCustomer account portal theming
      • πŸ”€Translations
      • πŸ’»Available actions for customers in account portal
      • 🎨CSS overrides
      • πŸ” Adjusting typography with CSS overrides
      • πŸ“£Marketing Banners
      • πŸ’­Retention
      • 🧺Bundles
      • 🎁Loyalty
      • πŸ”Passwordless login
      • πŸ’ŸCreator upsells
      • 🎞️Instagram feed
    • Customer Account Portal
      • πŸšͺAccessing the Customer Account Portal
      • πŸ”„Creating an account
      • πŸ”œViewing next orders
      • πŸ“Manage subscriptions
      • πŸ—ƒοΈOrder history
      • πŸ“§Updating email address
    • Transactions
      • 🀝Subscription transactions
      • 🚫Failed payments
      • πŸ“†Billing schedule
    • Integrations
      • 🌐Available integrations with Smartrr
      • πŸ“±Attentive x Smartrr Integration
      • πŸ“±Blueprint x Smartrr Integration
      • πŸ“¬Gorgias x Smartrr Integration
      • πŸ“©Klaviyo x Smartrr Integration
      • 🦁Loyalty Lion x Smartrr Integration
      • πŸ“±Postscript x Smartrr Integration
      • πŸ”Recharge x Smartrr Integration
      • 🟩Shopify Flow x Smartrr Integration
      • πŸͺWebhooks
    • Shopify Questions
      • πŸ’²Will updating product prices in Shopify reflect in Smartrr?
    • Developer Documentation
      • Bundles: Developer Documentation
    • Troubleshooting
      • ⏸️Why did my customer's subscription automatically pause?
      • πŸ“žWhy is my customer's shipping address invalid? (Phone number formatting)
      • πŸ†˜Can’t find the answer to your question?
    • RSS Feed
      • πŸ“³Smartrr’s changelog: Stay up-to-date with Slack
Powered by GitBook
On this page
  • Collection Pages
  • Landing Pages
  • Custom Liquid Blocks

Was this helpful?

Export as PDF
  1. Getting Started
  2. Implementation

Adding Smartrr to a custom page (Shopify Liquid)

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

PreviousInstalling Smartrr on a headless storeNextOnboarding

Last updated 4 months ago

Was this helpful?

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, .

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

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

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,

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
click here.
click here