Links
🗺

How do I install Smartrr on a modified or custom Shopify theme? (Guided Install)

Implementing Smartrr on storefronts with modified Shopify themes or custom liquid themes
Coming from our app? Click here to skip directly to guided install instructions.
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 themes that is not one of Shopify’s 2.0 free themes or if you’ve partnered with a developer or agency to create a custom theme, you’ll need to install Smartrr on your site by following the guided instructions below.
Within the Smartrr app navigate to Setup under RESOURCES in the left-hand menu.

1. 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. This will automatically create a "Subscribe & Save 10%" program for your shop.
Alternatively, you can create a new program from scratch. You'll be redirected to our Subscription Program tab to complete this step. Learn more about setting up a Subscription Program here.

2. Subscription Product

Now that your Subscription Program is created, your next step is to assign a product/s to this program.
Similarly to step 1, Smartrr can create a Demo Product for you. This will create a "Smartrr Snack Cookie (Demo)" in your Shopify admin. 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.
Note: If you select to create a Demo Product, it won't appear in previews or in your storefront until you go to your Shopify admin and set the product sales channel availability to "Online Store".
If you're opt to add our demo product, be sure to set Online Store as an available sales channel in your Shopify admin.
If you want to start with one of the existing products in your shop, select from the modal that appears. You can select one or multiple products.

3. Smartrr Installation

The third step contains two parts:
  1. 1.
    Install snippets
  2. 2.
    Render Smartrr
For part 1, 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.
Warning: To prevent Smartrr from showing up on your site before you're ready to launch, we recommend navigating back to Shopify’s Themes to duplicate a copy of your current theme (Actions > Duplicate). Name it something that is easily recognizable, such as [Your Store] Smartrr Integration Copy [Date] so that when you modify the below code, you know you are updating the correct theme.
​
​
Click Next Part.
For part 2, continue to Guided Install instructions below.

4. Polish & Optimize

Once you have Smartrr is up and running, you can use this last page as a checklist to keep track of configurations options to optimize your subscription business.

Guided Install

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 [email protected] 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.
Still having trouble installing and don’t have access to a developer? We partner with a handful of excellent agencies. We also offer full white-glove onboarding support with our Grow and Excel plans.​
​