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.

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 }

Last updated: April 15, 2024

Getting Started

Implementation

Getting Smartrr on your site, from Shopify to headless themes.

Onboarding

Everything you need to know about getting started with Smartrr, including basic to white-glove onboarding service-levels.

Support

Subscription Setup

All information on getting a successful subscription program setup on your store.

Admin Portal

The Admin Portal is where you can view and edit your customer’s subscriptions, adjust your theme settings, view analytics, and more.

Customer Account Portal

The Account Portal is where your customers can view and interact with their subscriptions orders.

Transactions

Understand when subscription transactions occur and how to set up rules around your customers’ subscription billing.

Integrations

Instructions on how to integrate Smartrr with some of the leading tech-partners in the ecommerce industry.

Shopify Questions

Developer Documentation

Troubleshooting

RSS Feed

At Smartrr, we’re always working to make our onboarding experience as seamless as possible. Our white-glove onboarding service is ideal for brands who have a custom-built Shopify theme, a Shopify store with a headless CMS, or for stores who do not have access to internal design and development resources.

Go-Live Planning

As the first step, your store will be asked to complete a comprehensive onboarding form. In this form, you’ll be asked to provide information on:

• Basic company details—including your Shopify store/s url

• Design—including plans for how you would like subscription offerings to appear on your site

• Products eligible for subscription

• Shipping rules for subscription products

• 3PL logistics and fulfillment options

• Current payment processor

• Store languages, currencies, and billing time zones

• Current subscription offerings (if applicable)

This information will help the Smartrr team prepare for your launch and match you with the best dedicated Client Success Manager for your brand. Our Client Success Managers (CSMs) work with brands on Smartrr both before going live and on an ongoing basis to make sure they’re taking advantage of all that Smartrr has to offer.

Once the onboarded form has been submitted, your dedicated CSM will reach out to schedule a kick-off meeting. In this meeting, your CSM will define timelines, scope of work, and expectations for launching subscriptions with Smartrr. This is also the best time to discuss any unique requests you may have before launch and make sure we can do our best to accommodate requests within scope.

Subscription Setup

With white-glove onboarding, our in-house development team will fully manage the steps needed to install Smartrr, including:

• Adding relevant code snippets onto your site’s product pages

• Setting up Subscription Programs

• Customizing your store’s Account Portal

• Set up rules around failed customer payments

• Set up a billing schedule for subscription orders

• Set up your businesses shipping profiles

Smartrr also allows you to ​​add advanced subscription features to your store—including but not limited to: setting up subscription discounts, offering custom shipping options for subscription orders, and creating anchor dates for your subscriptions. With white-glove onboarding, our team is happy to help advise and implement these additional features that may help your store grow.

For Excel plan clients, our team is able to provide design consultation and implementation services ranging from full implementation of a theme from our pre-built, customizable theme library or implementation of a completely branded design, provided to us by your team via a shared Figma file.

If you indicated in your onboarding form that you currently offer subscription services and need to migrate from another subscription platform, your CSM will schedule a call to go over migration-specific details and steps.

Go-Live & QA

Once setup is complete, we will schedule a ‘Go-Live’ meeting with your team. During your call, we will show you a preview of your Smartrr integration. If additional modifications for your setup are required before you go-live, we will work with our internal team on second-round revisions and finalize a new target go-live date. Our team will accommodate up to two rounds of revisions to implementation and design prior to launch.

When the go-live date is finalized, your CSM will schedule the following action items to take place on go-live day:

1. Migration (if applicable)

2. Smartrr push-live

3. Full site QA

Following these steps, your CSM can schedule an additional Smartrr Orientation call to show your team how to most effectively use Smartrr day-to-day.

Post Going Live with Smartrr

We encourage our clients to meet regularly with their CSMs! We suggest regular meetings to:

1. Review new feature releases by Smartrr and general product enhancements

2. Discuss joining beta on any upcoming releases

3. Having team trainings on Smartrr

Excel clients also have optional monthly business reviews to discuss their subscription performance and potential areas for improvement. Excel clients will also have the option of a dedicated Slack channel to reach their Smartrr team more conveniently!

Last updated: April 3, 2024

If your store is using one of Shopify’s 2.0 free themes, and have not made any customizations your your theme’s source code, you’re eligible for our simple one-click automated install of Smartrr via our in-app Setup page.

Within the Smartrr app navigate to Setup under RESOURCES in the left-hand menu.

Subscription setup

1. Set up a subscription program

Subscription Programs are the heart of the Smartrr app. If you're just getting started with subscriptions, we can create a demo program for you by clicking Use a demo program. This will automatically create a "Subscribe & Save 10%" program for your shop.

Alternatively, you can create a new program from scratch by pressing Create my own program. You'll be redirected to our Subscription Program tab to complete this step. Learn more about setting up a Subscription Program here.

2. Select subscription products

Now that your Subscription Program is created, your next step is to assign a product/s to this program.

Similarly to above, Smartrr can create a demo product for you if you press Use a demo product. This will create a Smartrr Snack Cookie (Demo) in your Shopify shop. You can use this demo product for previewing purposes, and will be able to delete it at a later date directly within your Shopify admin.

If you want to start with one of the existing products in your shop, press Select from existing products. You can select one or multiple products from the modal that appears.

Optional: Smartrr optimizations

Now that you've completed the required Subscription setup steps, explore the remaining cards on this tab for ways you can further optimize your subscription business:

• Setup subscription loyalty rewards & referrals

• Create dedicated shipping profiles for subscription purchases

• Customize the look and feel of your customer account portal

• Enable a passwordless login experience

• Set rules around failed payment attempts

• Integrate with the ecosystem’s best

On-site setup

1. Install Smartrr snippets

Select the Shopify theme you'd like Smartrr snippets to be in stalled on. Smartrr Snippets are files that are injected into your code base and will not modify any existing liquid files. These are required in order to render Smartrr on your storefront. There are five files that will be added under the Snippets section in your theme's liquid code.

2. Add Smartrr subscription widget (Guided install)

Smartrr's subscription widget is an app block that can be added to your Default product page from your Shopify theme's online customizer. However, if you're not using a liquid Shopify theme compatible with app blocks, and/or are planning to manually render subscription options on your shop's PDPs with the assistance of a developer, you'll need to use our guided install process.

1. Modifying the Product Page

In your duplicated theme’s liquid code files, find the liquid file where your site’s product form information is being stored. This is usually called main-product.liquid or product.liquid. This file is typically located under either the Sections (for Online Store 2.0) or Templates (for older Shopify themes) heading.

Once you’ve opened the file, search for the product form {%- form 'product'}, paste the following Smartrr snippet inside the form. We typically recommend placing between the variant selector and the quantity selector, but you can place in any order you see fit.

{% render 'smartrr-product' %}

When added, the product form should look something like this:

Save the file. You should be able to preview Smartrr on your site upon successfully modifying this product form. Having trouble? Skip to Troubleshooting steps.

3. Modifying the Customer Account Page

In your duplicated theme’s code base, find the liquid file for your store’s account page. This is usually called customers/account.liquid. This file is typically located under either the Templates heading.

At the very beginning of the file, paste the following snippet:

<!-- BEGIN SMARTRR SNIPPET -->{% render 'smartrr-account' %}<!-- END SMARTRR SNIPPET -->
{{ 'customer.css' | asset_url | stylesheet_tag }}

The file should look like this:

Save the file.

4. Modifying the Order Status Page

If you would like to display a link to your customer’s Account Portal from the order status page, please email us at hello@smartrr.com and we will assist you.

Troubleshooting

Why don't see Smartrr on my theme once I preview?

Whether you've created a demo Subscription Program or made a new program from scratch, you may need to double check and make sure your program details have been successfully "saved". To do this, go to Subscription Programs > Manage Program. Check and see if there is a Discard / Save banner at the top, and click the green Save button.

Last updated: April 3, 2024

Note: Before implementing Smartrr, it's important to review Shopify's subscription requirements to determine your eligibility for offering subscriptions on your storefront. You must also have inventory tracking enabled for a product to be subscription-eligible.

If your store is using one of Shopify’s 2.0 free themes, and have not made any customizations your your theme’s source code, you’re eligible for our simple one-click automated install of Smartrr via our in-app Setup page.

Within the Smartrr app navigate to Setup under RESOURCES in the left-hand menu.

Subscription setup

1. Set up a subscription program

Subscription Programs are the heart of the Smartrr app. If you're just getting started with subscriptions, we can create a demo program for you by clicking Use a demo program. This will automatically create a "Subscribe & Save 10%" program for your shop.

Alternatively, you can create a new program from scratch by pressing Create my own program. You'll be redirected to our Subscription Program tab to complete this step. Learn more about setting up a Subscription Program here.

2. Select subscription products

Now that your Subscription Program is created, your next step is to assign a product/s to this program.

Similarly to above, Smartrr can create a demo product for you if you press Use a demo product. This will create a Smartrr Snack Cookie (Demo) in your Shopify shop. You can use this demo product for previewing purposes, and will be able to delete it at a later date directly within your Shopify admin.

If you want to start with one of the existing products in your shop, press Select from existing products. You can select one or multiple products from the modal that appears.

Optional: Smartrr optimizations

Now that you've completed the required Subscription setup steps, explore the remaining cards on this tab for ways you can further optimize your subscription business:

• Setup subscription loyalty rewards & referrals

• Create dedicated shipping profiles for subscription purchases

• Customize the look and feel of your customer account portal

• Enable a passwordless login experience

• Set rules around failed payment attempts

• Integrate with the ecosystem’s best

On-site setup

1. Install Smartrr snippets

Select the Shopify theme you'd like Smartrr snippets to be in stalled on. Smartrr Snippets are files that are injected into your code base and will not modify any existing liquid files. These are required in order to render Smartrr on your storefront. There are five files that will be added under the Snippets section in your theme's liquid code.

2. Add Smartrr subscription widget

Smartrr's subscription widget is an app block that can be added to your Default product page from your Shopify theme's online customizer.

If you installed Smartrr snippets to a theme that supports our widget, you will see a green banner during this step that reads: "You're using a Shopify theme that supports the block for our Smartrr Subscription widget."

Don't see this banner? Try our guided install instead.

Click Add Smartrr subscription widget to be taken to your live theme editor. Make sure you are viewing Products > Default product. Additionally, make sure you are previewing a product that you have added to a Smartrr subscription program. Under Product information, click Add block and find Subscription Options.

You can customize the look and feel of Smartrr Subscription Options on your by manipulating the block's settings in the left-hand sidebar.

/* Universal Selectors */
.smartrr-plans-frequency-label /* Frequency Text */

[data-smartrr-price-style] /* Pricing Display */
[data-smartrr-subscribe-price] /* Subscription/OTP Price */
[data-smartrr-regular-price] /* Strikethrough Price */

/* Sub Program Radio Selectors */

[data-smartrr-selling-plan-group-input] + .smartrr-selling-plan-group-input-display:before /* Border color */

[data-smartrr-selling-plan-group-input] + .smartrr-selling-plan-group-input-display:after /* Inner Radio Color */

.smartrr-selling-plan-group-name /* Selling Plan Group Name Text */

/* Sub Program Dropdown */
[data-smartrr-selling-plan-group-select-id] /* Sets border/radius, width, padding, text and background color of the select element */

/* Sub Program Pills */
[data-smartrr-selling-plan-group-id].smartrr-group-active [data-smartrr-selling-plan-group-input-display-pills] /* Sets background and text color of active pill element */

[data-smartrr-selling-plan-group-id] [data-smartrr-selling-plan-group-input-display-pills] /* Sets background and text color of inactive pill element */

.smartrr-pills-header /* Used for font size, This affects group and plan pills */

[data-smartrr-selling-plan-group-input-display-pills] /* Sets border/border-radius */

/* Sub Program Grids */
.smartrr-grid-container /* Sets grid template for plan and group grids */

[data-smartrr-selling-plan-group-id].smartrr-group-active [data-smartrr-selling-plan-group-input-display-grid] /* Sets background and text color of active grid element */

[data-smartrr-selling-plan-groups-grid] [data-smartrr-selling-plan-group-input-display-grid] /* Sets background and text color of inactive grid element. Also sets font size */

[data-smartrr-selling-plan-group-input-display-grid] /* Sets border/border-radius of grid elements */


/* Plan Dropdown */
[data-smartrr-selling-plans-select] /* Selling plans dropdown */

/* Plan Radio */
[data-smartrr-selling-plan-radio] + .smartrr-selling-plan-input-display:before /* Border Color */

[data-smartrr-selling-plan-radio]:checked + .smartrr-selling-plan-input-display:after /* Inner Radio Color */

.smartrr-selling-plan-radio-header /* Selling Plan Name */

/* Plan Pills */
[data-smartrr-selling-plan-pills-header].smartrr-plan-active /* Active Pill Element, Used for background color and text color */

[data-smartrr-selling-plans-select].smartrr-pills-header /* Used for inactive elements background and text color. Also used for border settings/border-radius for plan pills */
.smartrr-pills-header /* Used for font size, This affects group and plan pills */

/* Plan Grids */
.smartrr-grid-container /* Sets the grid templates, also sets the width of grid container */

.smartrr-plan-active.smartrr-input-display-grid /* Active grid element’s background and text color */

[data-smartrr-selling-plans-select].smartrr-input-display-grid /* Inactive element’s background and text color. Also used for border settings/radius for all plan grid elements */

Troubleshooting

Why don't see Smartrr on my theme once I preview my shop?

Whether you've created a demo Subscription Program or made a new program from scratch, you may need to double check and make sure your program details have been successfully "saved". To do this, go to Subscription Programs > Manage Program. Check and see if there is a Discard / Save banner at the top, and click the green Save button.

Can I add subscription pricing outside the Smartrr subscription widget?

To add Smartrr's pricing element outside of the subscription widget, you can add the following code:

<div data-smartrr-product-id="{{ product.id }}" data-smartrr-price-
style="overwrite-compare" data-use-quantity="true">
  <span data-smartrr-compare-price></span>
  <span data-smartrr-regular-price></span>
  <span data-smartrr-subscribe-price></span>
</div>

Styling can be changed by adding the following values to the data-smartrr-price-style attribute.

• original (Adds the original variant price/one-time purchase)

• original-compare (Adds the original variant price/one-time purchase price and the compare price)

• overwrite (Adds the current selected subscription plan's price)

• overwrite-compare (Adds the current selected subscription plan's price and compare price)

• strike (Discounted price struck through)

• strike-compare (Compare at price struck through)

How do I enable variant selection within the Smartrr subscription widget?

1. Find the product liquid file in your theme's code. This is usually named product.liquid or main-product.liquid, but can also be uniquely named if your shop uses a custom theme. If you can't find this file, you can also use theme.liquid.

2. At the bottom of the file, paste the following code:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const SmartrrHandler = window.smartrrProductList["{{ product.id }}"];
        const variantSelectors = document.querySelectorAll('[data-variant-
            option - value]
        ');
        variantSelectors.forEach(selector => {
            selector.addEventListener('change', () => {
                // If the variant selectors values are the variant names
                const variantName = SmartrrHandler.ui.apiGetValue(selector);
                const variant =
                    SmartrrHandler.ui.logic.apiGetVariantByName(variantName);
                SmartrrHandler.ui.logic.apiChangeVariant(variant.id);
                // If the variant selectors values are the variant ids
                SmartrrHandler.ui.logic.apiChangeVariant(selector.value);
            })
        })
    });
</script>

1. In lines 4-5 above, input the unique selector for your variant selector elements. This can be done by inspecting the elements using your browser's developer tools and finding a class or data-attribute that is used only for variant selectors. Examples below:

// Class syntax: 

querySelectorAll('.variant-selector')

// Data-attribute syntax: 

querySelectorAll('[data-variant-selector]')

Note: If your variant selectors are not <input> elements, then you can change the 'change' event listener to 'click'.

Last updated: March 26, 2024

Adding an Anchor

When managing a Subscription Program, you will see an option to add an Anchor. Note—this option will not populate if your billing interval is set to "Days".

If you select a Week Day or Month Day from the dropdown, you'll also be presented with the option to add an optional Cutoff Day and determine subscription behavior Pre-Anchor:

Cutoff Days

A cutoff day is how many days in advance of the delivery anchor the order would need to be placed in order to qualify for the next delivery cycle.

Pre-Anchor Behaviors

Pre-Anchor Behavior is the possible fulfillment of the first order when placed within the cutoff. ASAP means orders placed inside a cutoff can be fulfilled or delivered by the next anchor. NEXT means orders placed inside a cutoff can be fulfilled or delivered at the following anchor.

Last updated: April 4, 2024

Overview

You are able to send email notifications through Smartrr based on specific billing events. The available email notifications are:

• New subscription

  • Subscription created – Existing customer: Sent when a new subscription order is created for a customer who already has a customer account.

  • Subscription created – New customer: Sent when a new subscription order is created for a customer who does not have a customer account.

• Subscription management

  • Upcoming subscription: Email sent in advance of a recurring subscription order being placed.

  • Subscription auto-resume reminder: Sent 7 days before a paused subscription is set to auto-resume.

  • Payment expiration notice: This is a CONDITIONAL email because it will only send in place of the "Upcoming subscription" email is the credit card used for an upcoming subscription is set to expire.

  • Item out of stock: Sent when a customer’s subscription has an item has gone out of stock.

  • Subscription canceled: Sent when a subscription order has been canceled.

  • Subscription paused: Sent when a subscription order has been paused.

  • Subscription reactivated: Sent when a subscription order has been reactivated.

• Loyalty and referrals

  • Successful referral: Sent to a customer when someone has successfully used their referral code.

• Gifted subscriptions

  • Gifted subscription: Sent to gifter as confirmation that a subscription gift has been scheduled.

  • Gifter subscription shipped: Sent to gifter when a gifted subscription order has been shipped.

  • Giftee subscription shipped: Sent to the giftee when a gifted subscription order has been shipped along with gift message.

• Passwordless Login (The below emails will only send if passwordless login is enabled in Theming.)

  • One-time code login: Provides a one-time code for a customer to log into their account.

  • Magic link login

How to Customize Default Templates

Navigate to Customer Notifications under CONFIGURATION in the left-hand menu.

Click on Customize defaults to globally add a logo and change color schemes for default email templates.

Settings

• Enable email header / footer: Injects a standard header and footer across all emails

  Reset default styles. Enable to add a JPEG or PNG logo across all emails. Footer information is pulled directly from your store's Shopify contact information.

• Reset default styles: When pressed, resets all header / footer, and color settings for all default email templates.

• Colors: Changes background colors, primary text color, button color, and button text color for all email templates. Note: Secondary text color will only be visible in the footer when "Enable email header / footer" is toggled ON.

Custom HTML Emails

Variables

Within the content of these emails, we provide a variety of event variables that can be used across all email templates in the Email Triggers tab. The syntax is available at the bottom of each page. You can click to copy the syntax and apply it to your emails.

Subscription

Syntax: <%- subscription.VARIABLE %>

Lines

Syntax: <%- subscription.lines[0].VARIABLE %>

Customer

Syntax: <%- customer.VARIABLE %>

Gifting (Note)

Syntax: <%- note %>

Gifting (To)

Syntax: <%- to.VARIABLE %>

Gifting (From)

Syntax: <%- from.VARIABLE %>

Item out of Stock

Syntax: <%- outOfStockItem.VARIABLE %>

Last updated: March 26, 2024

What is a Subscription Program?

Subscription Plans, products, and variants are objects within a Subscription Program. You may set up one or multiple Subscription Plans per shop.

Two examples for the same store are provided below:

• Example 1: You would like to offer a discount for customers who elect to subscribe to your product vs. make a one-time purchase.

• Example 2: You would like to offer a variety-pack product with only a monthly subscription cadence, but the individual products within the product are available on both a bi-weekly and monthly cadence.

Both above examples are possible to execute within the same storefront by creating multiple Subscription Plans within a Subscription Program.

Creating a Subscription Program

Under Configuration in the left-hand menu, click on Subscription Programs. Click on the button Create program.

First, add all required information to your Subscription Program:

• Storefront label: Title of the Subscription Program on your product page, ex. “Subscribe & Save 10%”

• Admin label: Optional—if you would like your Subscription Program to have a different name in your Smartrr app

Next, add all required information for each Subscription Plan within your Subscription Program:

• Cart & Checkout label: Label displayed alongside the product once it’s been added to cart and on the checkout page, ex. “Delivered Every 2 Weeks”. Replace with a "{{H}} " to hide this label from customers.

• Billing Schedule: Indicate the number of intervals between billings as a numerical value (ex. “2”) and the interval type (Days, Weeks, Months, or Years)

• Discount Incentive: Percentage or fixed amount discount that a customer receives with this Subscription Plan. You can also opt to change the discount percentage after a certain number of subscription orders.

For advanced subscriptions, the following options are available for merchants on Grow and Excel plans:

• Prepaid: If applicable, indicate the number of intervals between billings as a numerical value (ex. “2”) and the interval type will set automatically based on the interval type in the plan's Basic details tab.

• Max/Min: Used when you'd like a subscription to end after a certain number of billing cycles.

• Anchor: Used to set a day on which billing interval calculations should be made. Learn more about anchor dates and why you might use them here

Once all required information has been completed, click Save.

Portal Add-ons

Portal add-ons are accessible by the customer via the Account Portal. Customers can add products to their subscription orders as one-time add ons at a discounted price.

To configure add-ons, navigate to Subscription Programs and then click on the Portal Add-ons tab.

Click on Browse to select one or multiple products/variants to be available to customers as add-ons.

Products that are selected here will be visible to your customers in their account here:

Customers can click on an dd on image from within their account to view all images and read the product's description, which pulls from Shopify.

How can I add filters to add-ons?

If you are a shop with a large add-on offering, it might be helpful to add filters so your customers can easily find what they're looking for. To setup a filter, go to product's page from within the Shopify Admin and create a new product tag including the Smartrr filter prefix, SmartrrFilter: (ex. SmartrrFilter:Cookie). Smartrr will pick up on these tags for applicable add-on products and will automatically create filters to include within the Add-ons section.

Subscription Benefits app block

In your Shopify theme customizer, you can add the Smartrr Subscription Beneftis app block to your product pages. This widget will allow you to elaborate to customers the benefits of subscribing and can be fully customized.

Migrating existing customers doesn't have to be daunting. If you're looking to migrate to Smartrr, you can rest easy knowing we offer in-house migrations from your current subscription app.

Once your initial Smartrr setup is complete, our team will schedule a migration date. On this day, we'll have our QA team ready to review your migration while we run our dedicated migration script. After a successful migration, our QA team does one final review of the site and the data transferred—at which point your shop will be ready to go live.

We have migrated brands from every major subscription app as well as bespoke platforms. Our team is always available to answer any questions about your specific migration-related needs, and you can reach us at with any questions.

Below you will find some more information on the requirements of migrating to a Shopify Subscription API eligible subscription app.

Payment Processors

Smartrr supports migrating subscriptions from multiple alternative payment processors including:

• PayPal Express

• Stripe

• Authorize.net

• Braintree*

Once migration is complete, Smartrr can use any of Shopify's eligible payment processors to handle all new subscription payments. It's always important to to determine your eligibility for offering subscriptions on your storefront.

Braintree

In order to migrate subscriptions from Braintree, subscription data will first need to be transferred into Stripe, which is a supported Shopify payment processor.

If you do not already have a Stripe account you will need to create one to transfer the payment data into from Braintree. Once all customer’s payment information is in a Stripe account we can fully migrate all your subscriptions into Smartrr.

Last updated: April 3, 2024

App Installation

In your Shopify admin ([your-store-name].myshopify.com), navigate to 'Apps'. The Smartrr app should now show on your app list.

Click on the Smartrr app to open. Navigate to the Integrations tab in the left-hand navigation and generate a new API token using the button that reads Add Key.

We recommend setting both your Token Nickname and your Application Name as the name of the platform you are authorizing for. We also recommend that Application Name specifically be in all capital letters, without spaces.

Headless Implementation

Use the below endpoint to call for information about product Subscription Programs.

Call Subscription Program Information

Method 1: Shopify Storefront API

Using Shopify’s Storefront API, product’s selling plan groups can be pulled. To get only Smartrr selling plan groups, filter by appName and limit to Smartrr. Selling plans can be accessed from the selling plan groups.

To retrieve selling plans using Shopify's Storefront API, you can use a GraphQL query. Below is an example of how you might construct a query to fetch selling plans and their details based on a selling plan group:

Shopify product documentation:

https://shopify.dev/docs/api/storefront/2024-10/queries/product

Method 2: Smartrr API

Subscription Programs are configured in the Subscription Programs tab in the left hand navigation of the Smartrr app.

Query Parameters

From the call response, use the data provided in the sellingPlans[ ] array to power the storefront display. Submit the shopifyNumericId value for the field selling_plan in the form POST submission in order to attach a Subscription Group alongside an item added to a customer’s cart.

Attach Subscription Group to Item Added to Cart

Be sure to replace <shopify domain> with your store's shopify domain. Note, this is required to be a part of cart workflow and not checkout workflow as Shopify does not support subscriptions within the checkout workflow.

The selling_plan property NEEDS to be provided for any subscription line item that is added to cart. Use the cartLinesAdd mutation from Shopify Storefront API to do this.

200: OK JSON object of the line items associated with the added items422: Unprocessable Entity Occurs when the exact quantity specified for one of the items can't be added to the cart

Important: The product/variant will need to be enabled for the respective Subscription Program in the Smartrr admin portal. These can be detected with the productIds[ ] and/or variantIds[ ] array.

Displaying Account Portal

There are three methods for brands to display the Smartrr's Shopify liquid account portal on a headless shop.

1. [Recommended] Forward /account –related URLs to your {your-store}.myshopify.com domain.

   1. This is our recommended method as it allows Shopify to continue handling all account actions (Login/Logout/Register/Checkout).

2. Create an account page on your site using the code found in your Shopify theme customers/account.liquid and use <iframe> to display it. This works for headless shops using React.

3. Duplicate smartrr-account.liquid in HTML, replacing the liquid code with the corresponding HTML Code. This works for headless shops not using React.

For methods 2 and 3, please follow these additional instructions:

Pulling in data for liquidCustomer

Below is the schema for the object.

Last updated: March 26, 2024

Setting up a maximum/minimum billing cycle

To define a maximum or minimum number of billing cycles for a selling plan go to Subscription Programs in the left hand navigation.

In the relevant subscription program, click on the tab Max/Min tab for the specific subscription plan you want:

Define minimum and/or maximum number of billing cycles using the input fields.

This optional setting can be enabled for each subscription plan within each subscription program.

Last updated: April 4, 2024

Navigate to Customer Notifications under CONFIGURATION in the left-hand menu. Once on the Customer Notifications page, click the SMS Notifications tab. From this page, you can click on Authorize Twilio to authorize your Twilio integration.

Congratulations on making the decision to get started with Smartrr! To make your onboarding as seamless as possible, we’ve created the article outline that will be your best resource for step-by-step instructions to creating a premium subscription experience for your brand.

Overview

Implementation

1. ​ - Best for stores using an unmodified Shopify 2.0 theme, like

2. ​​ - Best for stores using a modified or custom Shopify liquid theme

3. ​ - Best for self-hosted stores that pulls data from Shopify via Storefront API

Whether you're just starting with subscriptions or are looking to migrate an existing subscriber base from another platform—we have a plan that will work for your needs.

• 🚀 Launch: Self-service for brands looking to explore the benefits of subscriptions.

• 📈 Grow: Advanced features and support for brands scaling their subscription business.

• 💎 Excel: Maximize brand LTV with extensive features and further customization.

Monthly Pricing

Annual Pricing

Gross Merchandise Volume (GMV)

Gross Merchandise Volume, or GMV, represents the total dollar value of orders facilitated through the Smartrr platform. Smartrr doesn’t charge any transaction fees.

All orders facilitated by Smartrr, whether first subscription orders or automatically created recurring subscription orders are counted in this calculation, including any one-time products that are present in the order (i.e. add-ons). Any orders that include only one-time products are excluded from the Subscription GMV calculation.

Subscription GMV is calculated as the total of all the prices of line items in the order plus the shipping costs and taxes. The line item prices reflect any subscription discounts (e.g. Subscribe & Save 20%), but not any discounts or promotions applied at the cart level (e.g. promo codes).

Feature Breakdown

Changing plans

From within the Smartrr app, navigate to Account located under RESOURCES. Once there, you’ll be met with our three account plans: 🚀Launch, 📈Grow, and 💎Excel.

Click Switch to Plan on the new plan you like. If you are currently on Launch, you will only see this option on Grow, and vice versa. You’ll be redirected to Shopify to approve the subscription. Review all information in Shopify then click Approve. You will be billed via Shopify for your new total amount and your account features access (either upgrades or restrictions) will be adjusted automatically in-app.

We're currently up to date with all Shopify Subscription API approved gateways listed in . These include:

Shopify limitations, "Customers can't use accelerated checkouts or local payment methods such as Amazon Pay, Google Pay, Klarna, mollie iDEAL, and Sofort, to purchase subscriptions . However, customers can use Shop Pay, Apple Pay, and PayPal Express at some stores."

If Shopify enables support for BNPL payment options in the future, Smartrr will also be able to support these payment methods for subscriptions.

Last updated: April 8, 2024

To offer a prepaid subscription, you’ll need to amend the billing schedule for a

Navigate to Subscription Programs under CONFIGURATION in the left-hand menu and click on Create program.

You can create a prepaid offering by changing the settings in the Prepaid tab. The interval type will automatically be matched to the interval type in Basic details.

Last updated: April 4, 2024

Smartrr uses native Shopify discounts, meaning you can create discount codes as you normally would within your Shopify admin. This also means you won’t find anyplace to create discount codes within the Smartrr app. You can however set automatic discounts (no code required) on recurring subscriptions orders in

To create a discount code in Shopify, navigate to Discounts in Shopify’s left-hand menu and follow their instructions for

Within Shopify, you can specify if you want the discount code to be applied to one-time purchases, subscription purchases, or both. You can also specify if you would like the code to apply to all subscription products, subscription products in a specific collection, or only to specific subscription products.

You are also able to restrict usage of discount codes on subscriptions to be for the first payment only, for X number of payments, or to all recurring subscription payments.

Last updated: April 7, 2024

If you're a merchant who uses subscriptions to power refills, or who wants to use your subscriptions to create a custom order journey experience, then the Sequential Flow Builder is for you. You can use this tool to swap the product that is delivered to the customer after certain order numbers.

1. Accessing the Sequential Flow Builder

To access the Sequential Flow Builder, follow these steps:

Log in to your merchant account. Navigate to Subscription Programs > Manage on the program you wish to add the flow to. Scroll down and Look for the card labeled "Sequential Flow Builder."

2. Creating a Sequential Flow

Click on the "Add flow" button.

Define the starting product by clicking "Browse" next to the text: "When the following item(s) are purchased:".

Next, indicate how many orders should eclipse before the swap action happens. By default, this is after order number one.

Then, select the product variant that should be delivered after the defined order number.

Finally, confirm a flow end behavior. By default, this is is Send last item in perpetuity—which means that the customer will continue to receive the last item that the subscription swapped to. You can also opt to End sequence flow—which will terminate the subscription after all swaps have occurred.

Press "Confirm" to save your flow.

3. Editing an Existing Sequential Flow

To edit an existing sequential flow, click the "Manage flow" button to reopen the modal:

4. Deleting a Sequential Flow

To delete a sequential flow, press the red "Delete this flow" button. Confirm the deletion when prompted.

5. Sequential Best Practices and Tips

2. Don't neglect your flows after creation; reguarly review and update your sequential flows based on changing product offerings or customer feedback.

Last updated: April 10, 2024

Bulk Subscription Management

Navigate to Subscriptions in the left-hand menu.

You can quickly search for the particular subscription you're looking for by the customer’s email address or name.

Check a row to reveal options to quickly manage the subscription, including:

• Pause subscription(s)

• Export to CSV

• Open in new tab

• Set new order date

• Cancel subscription(s)

Select all the items on a page by clicking on the checkbox in the header row. To select ALL subscriptions in Smartrr, click on the blue text: Select all 14+ subscriptions.

Before taking any bulk actions like pause or cancel, you will be presented with a confirmation state:

To quickly view the contents of a subscription, hover over the Items row.

Subscription Details Page

To view an individual subscription's details, click on the blue subscription ID number.

You'll then be taken to the subscription's respective subscription details page:

How to pause a customer's subscription

In the Manage subscription dropdown, press Pause subscription.

How to cancel a customer's subscription

In the Manage subscription dropdown, press Cancel subscription.

How to view a customer's raw subscription data

In the Manage subscription dropdown, press View raw subscription contract. This can be helpful if you are working with a developer or a Smartrr Customer Success Manager to troubleshoot a subscription error.

How to skip customer's next order

In the Options dropdown, press Skip.

How to edit a customer's address

In the right pane, press the pencil icon to edit a customer's shipping address.

How to set a customer's next order date

In the Options dropdown, press Set next order date.

How to add items to subscriptions (one-time and recurring)

Press the green Add item button. For one-time add-ons, press One-time item. For adding an item to every recurring subscription order, press Recurring item.

How to bulk update items

Check the items you wish to update. For one item you can Swap and Remove. For multiple items you can only Remove.

How to change a customer's subscription plan

Under Current subscription program, choose a new plan from the dropdown.

How to view/remove a discount code from a subscription

Enter a valid discount code into the Discount code card. Remove it by pressing the X icon next to the code.

How to leave an internal comment / note within event log

Comments can be used to leave internal reminders about why certain actions have been taken on a subscription order by an admin. These comments can also be pinned to the top of the event log for easy visibility.

How to leave order notes

A few examples of how you can use this feature include:

1. Letting customers add dietary restrictions

2. Adding important packing instructions to subscription orders to be picked up by your 3PL

3. Adding information about you/your pets to better inform contents for subscription mystery boxes

Note: If the Shopify variable for order notes is present in your Shopify order confirmation email, then the note will be visible to your customer when it is processed through Shopify. It would look something like the below:

Last updated: April 9, 2024

Ever have a customer reach out to you with a CX request about their customer account portal? Help troubleshoot directly by seeing exactly what they're seeing by viewing your customer's accounts as they see them by clicking the View portal as customer from the Customer details page in your Smartrr admin.

To view portal as customer, navigate to the customer's detail page by going to Customers in the left hand sidebar. Find the customer you want to manage and click the row.

Once on the customer detail page, the View portal as customer button is on the right hand side of the page. Click on the button.

Once logged in, you will be able to view the customer's account portal as they see it. You will be able to take any actions the customer can.

To exit the View portal as customer preview, click on the Exit customer view button on the fixed gray bottom bar.

Last updated: April 10, 2024

The event log allows you to easily keep track of all actions associated with a customer’s subscription.

There are four possible “actors” that can make edits to a subscription:

1. Smartrr – Automatic process by Smartrr

2. Admin – Merchant admin

3. Script – Any merchant-configured scripts in subscription program

4. API – External partner (Integrations, migrations, etc.)

The following actions are currently recorded in the events timeline:

• Subscription Order Processed

• Frequency Changed

• Subscription Paused

• Subscription Cancelled

• Subscription Reactivated

• Subscription Skipped

• Subscription Unskipped

• Item Price Changed

• Shipping Price Changed

• Discount Successful

• Discount Failed

• Discount Removed

• Address Changed

• Item Added-On

• Item Removed

• Sequential Subscription Updated

• Change Order Date

• Successful Billing Attempt

• Failed Billing Attempt

• Undo Gift

• Swap Line Item (From Member Portal)

• Update Line Item

• Create Transaction

Last updated: April 10, 2024

Currently available on Grow and Excel plans, Advanced Analytics provides best-in-class visualization and reporting capabilities for your subscription business, reflecting a real-time look at performance with customizable time frames and aggregation settings to narrow in on relevant data and trends.

To access Advanced Analytics, please navigate to the Advanced Analytics tab in the Smartrr app:

Definitions

Subscription and subscription customer counts are broken out between Active, Paused, New and Canceled statuses. Subscription customer counts will typically be slightly lower than subscription counts since some subscribers often have multiple subscriptions.

Active subscriptions will generate new recurring orders automatically per the terms of the subscription contract.

Paused subscriptions will not generate new orders automatically, but are available to be set back to active if needed since the subscription contract is still in effect.

Canceled subscriptions will not generate new orders and cannot be set back to active without requiring a new customer checkout and a new subscription contract.

New subscriptions are any subscriptions that were created in that timeframe (e.g. in that month if the Aggregation Interval is set to Monthly).

Using the page

In the upper left of the Advanced Analytics view, you will see options that allow you to configure the Date Range and Aggregation Interval of the report. Aggregation Interval refers to what timeframe the data will be “grouped” by (e.g. customer county by day, month or week).

Just below the Date Range and Aggregation Interval there is a summary of key performance indicators (KPI). The definitions of each of these indicators are visible by hovering over the small ⓘ icon:

Each KPI will be compared to the prior period, so if you have select 90 days, it will compare the most recent 90 days to the 90 day period immediately prior (e.g. January - March compared to October - December).

The rest of the dashboard shows various visualizations of business performance metrics. All data can be exported by clicking the dot menu at the upper right of every dashboard element:

Hovering over any data element will bring up a tooltip showing the underlying data details.

Clicking on any element in a chart legend will hide or show that element in the chart.

Last updated: April 9, 2024

The Customer Detail page is an overview page where you can see:

• Customer name & information

• Whether the customer has logged into their Customer Account Portal

• Customer default address

• Customer payment method

• Lifetime subscription spend

• Total subscription orders

• Event log

• Customer loyalty inforamtion

View a Customer Details page by locating the customer row you want in the Customers table. Click the customer row you want to view details.

How to erase customer data

If you've received a request from a customer to have their data removed from your store, you've likely already deleted their information in Shopify. However, if this customer was also a subscriber, you'll also want to erase all their data in Smartrr.

At the bottom of the Customer Details page, you'll see an Erase all customer data button.

In the Smartrr admin, any records that have been erased will be indicated with CUSTOMER_ERASED.

Last updated: April 10, 2024

Navigate to Theming in the left-hand menu.

Use Portal Settings to customize account portal settings for colors, borders, buttons, and images.

Use Advanced Settings to edit your portal's header as well as custom functionality.

Use the CSS overrides box to directly manipulate how your account portal looks with CSS. Read more about the available CSS variables to reference.

Last updated: April 9, 2024

About

Smartrr offers four Checkout Extensions that offer extra functionality in the Shopify checkout flow. These extensions are available to merchants who are on a Shopify Plus plan.

Checkout Extension #1: Subscription Overview

The Subscription Overview Checkout Extension appears above the product overview and gives a quick-glance summary of a new subscription that's being started. This quick-take helps reinforce the customer's subscription commitments in a more visual way than the default "Recurring total" one-liner that appears during the checkout process.

You might find this extension helpful if:

• Your customers sometimes don't realize they are purchasing a subscription.

• You want to reinforce the cadence the customer selected for their subscription.

• You want to reinforce the discount the customer is receiving by purchasing a subscription.

• You want to remind the customer that they will be able to manage their subscription at any time via their account.

To enable the Subscription Overview Checkout Extension, go to your Settings in Shopify > Checkout > Customize checkout.

Under the Information section, click Add App Block at the bottom:

Click on the app that says Subscription Overview:

Be sure to save your checkout settings.

Checkout Extension #2: Reminder to Create Account

The Reminder to Create Account Checkout Extension is a text-only extension that appears at the Information checkout step below express checkout options and reminds customers that they can create an account to manage their subscription anytime. When expanded, it reads that you can easily change your frequency, gift, skip, or pause your subscription from the account portal.

You might find this extension helpful if:

• Your customers often reach out after purchase to ask how they can manage their subscription.

To enable the Reminder to Create Account Checkout Extension, go to your Settings in Shopify > Checkout > Customize checkout.

Under the Information section, click Add App Block at the bottom:

Click on the app that says Account Banner.

Be sure to save your checkout settings.

Checkout Extension #3: OTP Checkbox Upsell

The OTP Checkbox Upsell Checkout Extension appears at the Information checkout step above express checkout options. It identifies eligible subscription products that are in the customer's cart and gives them and easy way to change it from a one-time-purchase (OTP) to a subscription with the click of a checkbox. This way, you can upsell an item to a customer without them even having to leave the Shopify checkout flow.

You might find this extension helpful if:

• You offer a large incentive to subscribe to products in your shop

• You want to offer an additional "Subscribe" touchpoint that lives outside the PDP page

To enable the OTP Checkbox Upsell Checkout Extension, go to your Settings in Shopify > Checkout > Customize checkout.

Under the Information section, click Add App Block at the bottom:

Click on the app that says OTP Checkbox Upsell:

Once the extension is selected, you'll have the option to enter your own custom title and subtitles. For each title and subtitle, you'll select the product variant you'd like to apply this extension to:

Be sure to save your checkout settings.

Checkout Extension #4: Subscription Plan Editor

The Subscription Plan Editor Checkout Extension appears in the product overview and gives the customer the ability the edit the subscription plan of a product with a subscription, or convert the subscription product to a one-time purchase (OTP).

You might find this extension helpful if:

• You have multiple subscription plans set up in your subscription program with different frequencies / incentives

• You want to the ability for customers to convert OTPs to subscriptions without leaving the Shopify checkout flow, and vice versa

To enable the Subscription Overview Checkout Extension, go to your Settings in Shopify > Checkout > Customize checkout.

Under the Information section, click Add App Block at the bottom:

Click on the app that says Subscription Plan Editor:

In order to use this extension, it will have to be placed as a child element under "Items in cart" on the left hand side. This will allow the extension to appear for each line item in the customer's order.

Be sure to save your checkout settings.

Last updated: April 10, 2024

Under Theming > Advanced Settings, you are able to define define which actions you want your customer to be able to take when managing their subscriptions in the customer account portal.

The following options are turned ON by default:

• Next order actions

  • Send now

  • Skip

  • Gift

  • Swap

  • Delay

  • Edit address

• Manage subscription actions

  • Edit frequency

  • Set next date

  • Edit address

  • Edit payment

  • Pause

  • Cancel

Unchecking possible actions will hide these options in the applicable "Next order" and "Manage subscription" modals that appear when a customer goes to manage their next order or their overall subscription, respectively.

Last updated: April 10, 2024

Overview

Brands on our Grow and Excel plans have access to a Retention— a feature allows merchants to gain insight on why customers pause and cancel their subscriptions.

Cancellation Reasons

Brands can add up to eight reasons to display in your customers’ account portal alongside a text field for your customers to provide more information. The following reasons show up by default:

Retention Actions

Each cancellation reason can be assigned an optional retention action that will prompt the customer with an additional module before they cancel:

Prompts

Prompts, when set to YES, provide an additional box for for the customer to provide more information on why they are trying to cancel. If a customer volunteers information it will appear on hover over the chat icon in the table of retention results.

Pause Reasons

Brands can add up to eight reasons to display in your customers’ account portal alongside a text field for your customers to provide more information.

Retention Table

Brands can see a full breakdown of Cancellation attempts by customer and Cancellation reason summary, Pause attempts by customer and Pause reason summary, or quickly export all data to CSV.

Last updated: April 10, 2024

Custom code placed in the CSS Overrides box in Theming will override any global or product settings.

CSS override rules will be scoped to the following selectors:

• #smartrr_account

• #smartrr_wrapper

• #smartrr_toast_container

• #smartrr_inner

• #smartrr_header

Below is the full list of CSS variables that manipulated. ⬇️ Jump to examples of how to use these CSS overrides to further customize your shop's customer portal.

• header

• customer-name

• customer-email

• customer-since

• marketing-banner

• inner

• year-select

• delivery-address-input

• delivery-address-row

• address-wrapper

• current-address-1

• address-1

• current-address-2

• address-2

• settings-grid

• addon

• addon-wrapper

• addon-selected

• item-product-container

• item-product-image

• next-order-price

• addon-no-products

• subscription-grid

• upcoming-deliveries

• your-subscriptions-wrapper

• edit-item-quantity-container

• product-name

• product-variant-name

• manage-order-buttons

• modal-center-text

• modal-center-text-title

• modal-center-text-subtitle

• edit-subscription-apply-discount

• ship-to

• date-picker

• list-item

• list-item-selected

• list-item-disabled

• list-item-prepaid

• upcoming-order-card

CSS Override Examples

Typography Examples

/* Headings */

h1, h2, h3, h4, h5{
  font-family: "Lota Grotesque";
}

/* Body */

p{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* Captions */

[class*="caption"] {
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* "Customer since" text */

[class*="customer-since"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  text-transform: uppercase;
  color: #2B2D70;
}

/* "Primary button text */

[class*="primary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* "Secondary button text */

[class*="secondary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

Badge Examples

/* Captions within badges */

[class*="caption1"], [class*="info-badge"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* Icon color */

[class*="info-badge"] svg{
   stroke: #2B2D70;
}

Page Margin

/* Desktop portal top margin */

[class*="customer-header"]{
  margin-top: 160px;
}

/* Mobile portal top margin */

@media screen and (max-width: 600px) {
  [class*="customer-header"]{
  margin-top: 100px;
	}
}

Quantity Indicators

/* Quantity indicators */

[class*="quantity-container"]{
  background-color: #2B2D70;
  button{
      padding:0px;
  }
}

Lines

/* Lines */

hr{
  background-color: #2B2D70;
  border-width: 0px;
  height: 1px;
}

Next Order / Subscription Tabs

/* Styling unselected tab*/

[class*="tab-wrapper"] [class*="tab-button"]{
  background-color:rgb(0 0 0 / 30%);
  
  /* Add space between the tabs - Optional */
  
  :first-child{
    margin-right: 10px;
  }
  
  /* Change color of Icon*/
  
  svg {
    stroke: #fff;
  }
  
}

/* Styling selected tab*/

[class*="tab-wrapper"] [class*="selected"]{
    background-color:#000 !important;
}

/* Hiding active indicator bar*/

.MuiTabs-indicator{
  display:none;
}

Prevent Navigation from Overlapping Portal Header

.smartrr-portal-header{
  padding-top: 150px; // Adjust value to fit navigation height
}

Last updated: April 7, 2024

Deleted & Archived Products

In the case when a product or variant is deleted or archived, any customer subscriptions containing these items will be automatically paused to prevent missing items from subscription deliveries or unexpected transaction errors during billing.

From the customer's account, a banner will appear in these instances, guiding customers on necessary actions to resume their subscription. Whether it's swapping or removing the affected item, these changes aim to ensure a seamless experience for customers when needing to make adjustments to their subscriptions.

Customers will also receive an email notification informing them that their subscription has been paused. You can edit the contents of this email in your admin portal under Customer Notifications > Subscription Paused.

Customers will receive an email notification informing them of the update to their subscription. They'll also receive a corresponding “Item out of stock” email notification under Customer Notifications > Item out of stock or deleted.

Out of Stock Products

Brands have the option to custom rules around subscription behaviors based on your Shopify inventory settings. By default, if your Shopify product’s inventory settings under Subscription Programs > Global Settings are set to “Always create order and reduce inventory”. This means that Smartrr will always create the subscription order and decrement Shopify’s inventory.

However, you have the option to automatically PAUSE your customers’ subscriptions if an item in their order is out of stock by changing the setting to "Create order only if inventory is available / PAUSE".

In this case, when a product or variant is marked as out of stock in a shop's inventory, any customer subscriptions containing these items will be automatically paused to prevent missing items from subscription deliveries or unexpected transaction errors during billing.

From the customer's account, a banner will appear in these instances, guiding customers on necessary actions to resume their subscription.

Customers will also receive an email notification informing them that their subscription has been paused. You can edit the contents of this email in your admin portal under Customer Notifications > Subscription Paused.

Customers will receive an email notification informing them of the update to their subscription. They'll also receive a corresponding “Item out of stock” email notification under Customer Notifications > Item out of stock or deleted.

Last updated: April 10, 2024

As one of the many ways using Smartrr allows you to fully brand what your customers see when they log-in to manage their subscriptions—we allow brands to add a Marketing Banner to their Customer Account Portal.

Under Theming and Portal Settings, make Banner visible by clicking on the eye icon.

For plain text, simply type what you'd like to appear in your banner. For example:

📦 Subscribers get free shipping on all orders

For HTML, enter type in HTML syntax. For example:

<h2 style="text-align: center;">Did someone say "Marketing Banners"?</h2>
<p style="text-align: center;"><iframe class="giphy-embed" src="https://giphy.com/embed/26ufdipQqU2lhNA4g" width="60" height="60" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

Set a background color for your banner by clicking on the color-selector.

Potential Use Cases

• 📦 Promote free shipping

• 🆕 Announce an upcoming product

• 🎅🏼 Gate an exclusive holiday promotion to existing customers only

• 🔗 Embed a form or other brand collateral

• 🛎 Let customers know where to reach out for help if the have a question about their subscription

Last updated: May 7, 2024

Bundles features are available to merchants on our 💎 Excel plan. With Bundles, you can offer "build-a-box" style subscriptions for your customers by allowing them to curate their own assortment of recurring products.

There are several parts to setting up Bundles with Smartrr, outlined below:

1. How to create a Bundle in Shopify

2. How to create a Bundle in Smartrr

3. Injecting Bundle snippets into your theme

4. Rendering your bundle

5. How to implement Bundles on your live site

How to create a bundle in Shopify

1. Create a dummy bundle product

Create a bundle product to sell in Shopify by navigating to Products and clicking Add product.

Fill in product details, including name, photos, price, etc.

Add at least one Variant. If your bundle is determined by size we recommend setting up variants something like 4 pack, 6 pack, 8 pack etc.

Make sure that your products are in stock, and then Click Save.

2. Create a collection for your bundle product

In order to know which products can be included in this bundle, create a new collection in Shopify with all potential bundle products. We recommend naming this collection the same as your newly created dummy bundle parent product. Set the Collection type to Manual.

How to create a bundle in Smartrr

In Smartrr, navigate to Subscription Programs and Bundles. Click Create bundle.

The first step is to select a Subscription Program to link the bundle you're about to create.

Next, select the parent dummy bundle product you created above as your Bundle Product. *You will not see this as an option in the modal if the product has not been added to your Subscription Program first.

Finally, add as many Bundle Variants as you linking to the variants you set up in Shopify for your parent dummy bundle product. Link the variant to the collection you created in Shopify in the above step.

Once you've completed this step, you've now built the bundle product within Shopify, created an associated collection with variants included, and linked the bundle with a subscription program in Smartrr.

From here, we need to properly implement bundles on your live site by creating a new bundles page, and "injecting" the Smartrr bundle snippet into the code of your live theme.

Injecting Bundle snippets into your theme

To inject the bundle snippet onto your live theme, navigate to the theme in Shopify, click the three dots to the side, and then "edit code"

Go to"add a new template" on the left side, and select "page" as the template type. Then select "liquid", and name the bundle to something relevant. This will create a new page in Shopify for your bundle.

Now you've created the page, scroll down to Snippets, and you'll find the Smartrr bundle snippet you created earlier, it should be titled "smartrr-bundle-bundle name.liquid". In this example, "smartrr-bundle-georges-tea-box.liquid".

Double click the snippet, and it'll "inject" the bundle code onto the new page you've just created.

Now we've injected the snippet, we need to render the code to make it visible and functional on our live site.

Rendering your Bundle

Navigate back to the bundle page we created, and add the Smartrr bundle render code.

This part of code will always be the same, just changed to reflect the name you gave your bundle. In this example, the render code looks like this:

{% render 'smartrr-bundle-georges-tea-box' %}

Paste the code into the page, and then click "save".

Once you've saved, navigate back to Shopify, go into the "Online Store" sales channel, and then click "Pages". From there, click "Add page".

Name the page the same as your bundle, and click the drop-down "Theme template" on the right-hand side. You should see the template we created in the backend appear as an option. Select it and click save.

If you click "View page" from here, you'll be directed to your (very basic) bundle page!

How to implement Bundles on your live site

The ability to trigger the Bundles modal can be placed anywhere on your site. For example, it can live on your parent bundle PDP as a CTA button: "Build my bundle".

On our 💎 Excel plan, you have access to our implementation team which can help you get Bundles up and running on your shop.

Once installed, the Bundles modal can also be styled with custom colors and typography by editing the CSS on the snippet smartrr-bundle-css.liquid in your theme’s liquid code.

Frequently Asked Questions

I removed a bundle item from my Shopify collection and subscription program. Why do my customers still see the item in their account portal when they are editing their bundle?

Currently, while bundle items removed from your Shopify collections and subscription program will no longer be available new customers to add to their bundle, it will still show up for customers who have already purchased subscriptions a bundle with this item. This is a known issue, and Smartrr is actively working on a fix. Please contact your CSM for more information.

How are Smartrr bundles passed to my 3PL?

Smartrr offers two ways to pass bundle information to your 3PL for picking and packing:

1. As custom attributes

2. As line items

By default, Smartrr appends bundle items to a Shopify order with the custom attributes. When this is the case, your customers' orders in Shopify will look something like the below:

Alternatively, you can check to enable Use line items when creating your bundle:

When line items are enabled, your customers' orders in Shopify will look something like the below:

This will allow you or your 3PL center to fulfill items at a line-item level:

To validate an order has been updated with line items, your 3PL can check for order line item properties in the ORDER_CREATE payload. If this payload contains _smartrr_info then the 3PL should continue to wait on that order for another 10 minutes.

Last updated: April 10, 2024

CSS can be placed in the CSS Overrides section of the Theming page in the admin portal to apply custom typography settings to your brand's Customer Account Portal.

Below are the main predefined typography types that can be manipulated:

Use this CSS Reference to learn more about how to style typography by font-family, font-size, color, and more.

@font-face {
  font-family: "Font name";
  src: url({{ [font-file-name] | asset_url }}) format("[font-format]");
}

General Typography Examples

/* Headings, Links, & Lists*/

h1, h2, h3, h4, h5, a, li{
  font-family: "Lota Grotesque";
}

/* Body */

p{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* Captions */

[class*="caption"] {
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* "Customer since" text */

[class*="customer-since"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  text-transform: uppercase;
  color: #2B2D70;
}

/* "Primary button text */

[class*="primary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* "Secondary button text */

[class*="secondary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}