# Installing Smartrr on a Shopify 2.0 theme (Automatic Install)

Last updated: May 16, 2025

**Note:** Before implementing Smartrr, it's important to[ <mark style="color:blue;">review Shopify's subscription requirements</mark>](https://help.shopify.com/en/manual/products/subscriptions/setup#eligibility-requirements) to determine your eligibility for offering subscriptions on your storefront. You must also have [<mark style="color:blue;">inventory tracking</mark>](https://help.shopify.com/en/manual/products/inventory/transfers/enable-tracking) enabled for a product to be subscription-eligible.

<figure><img src="/files/nGEqCXErJjxTi53zk7hh" alt=""><figcaption></figcaption></figure>

If your store is using [<mark style="color:blue;">one of Shopify’s 2.0 free themes</mark>](https://themes.shopify.com/themes/dawn/styles/default), and have not [<mark style="color:blue;">made any customizations your your theme’s source code</mark>](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code), you’re eligible for our simple one-click automated install of Smartrr via our in-app Setup page.

{% hint style="info" %}
As of 2023, Shopify has begun offering **New customer accounts** as a setting option. New customer accounts are not compatible with apps; please ensure you are using **Classic customer accounts** with Smartrr in order to display our <mark style="color:blue;">Modern Account Portal</mark> where your customers will be able to access and manage their subscriptions.

![](/files/y5C30KWDYb1bRAAufHLO)
{% endhint %}

Within the Smartrr app navigate to **Setup** under RESOURCES in the left-hand menu.&#x20;

<figure><img src="/files/3xGcnXYlO7FaW4sMBw0O" alt=""><figcaption><p>There are two parts to Smartrr setup: Subscription setup and On-site setup. Each has its own tab with required steps to get Smartrr up and running.</p></figcaption></figure>

## 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.&#x20;

<figure><img src="/files/1xbm1H2yHie5hFxKM5DT" alt=""><figcaption></figcaption></figure>

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. [<mark style="color:blue;">Learn more about setting up a Subscription Program here.</mark>  ](https://help.smartrr.com/docs/support/subscription-setup/how-do-i-set-up-subscription-programs)

### 2. Select subscription products

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

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.&#x20;

<figure><img src="/files/XQV64z7GH9YIRefpuLIE" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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".
{% endhint %}

<figure><img src="/files/79TaF8jI8svyJyuce8Ru" alt=""><figcaption><p>If using a demo product, be sure to set Online Store as an available sales channel in your Shopify admin.</p></figcaption></figure>

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.&#x20;

{% hint style="warning" %}
**Note:** We recommend always using [<mark style="color:blue;">variants</mark>](https://help.shopify.com/en/manual/products/variants) for your Shopify products when offering subscriptions, even if there is only one option for your product. Shopify auto-assigns a "Default variant" to a product that does not have any variants associated with it. If you decide to add variants to a product at a later date, and subscriptions are already running with the "Default variant", then those subscriptions will fail and will need to be re-mapped.&#x20;
{% endhint %}

### *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:&#x20;

* [<mark style="color:blue;">Setup subscription loyalty rewards & referrals</mark>](/docs/support/admin-portal/loyalty.md)
* [<mark style="color:blue;">Create dedicated shipping profiles for subscription purchases</mark>](/docs/support/subscription-setup/shipping-methods.md)
* <mark style="color:blue;">Customize the look and feel of your customer account portal</mark>
* [<mark style="color:blue;">Enable a passwordless login experience</mark>](/docs/support/admin-portal/passwordless-login.md)
* [<mark style="color:blue;">Set rules around failed payment attempts</mark>](/docs/support/transactions/failed-payments.md)
* [<mark style="color:blue;">Integrate with the ecosystem’s best</mark>](/docs/support/integrations/available-integrations-with-smartrr.md)

<figure><img src="/files/u11WjmmqQvuoirnLvoP6" alt=""><figcaption></figcaption></figure>

## On-site setup

### 1. Install Smartrr snippets

{% hint style="warning" %}
**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]**.

![](/files/DLsygQh6ByJenw1rFxiU)
{% endhint %}

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.

{% hint style="info" %}
Note: If you're planning on using [<mark style="color:blue;">Smartrr's subscription widget</mark>](#2.-add-smartrr-subscription-widget), leave the ***I'm planning on using Smartrr's subscription widget box*** checked. If you're *<mark style="color:red;">not</mark>* using a liquid Shopify theme compatible with app blocks, *<mark style="color:orange;">and/or</mark>* are planning to manually render subscription options on your shop's PDPs with the assistance of a developer, uncheck this box. \
\
If you're unsure, no worries. You can always duplicate a clean version of your Shopify theme and re-install Smartrr snippets again.
{% endhint %}

<figure><img src="/files/pNzxs0kLOz2tz4cEzLxk" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

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."&#x20;

*Don't see this banner?* [*<mark style="color:blue;">Try our guided install instead.</mark>*](/docs/getting-started/implementation/installing-smartrr-on-a-custom-shopify-theme-guided-install.md#guided-install)

{% hint style="info" %}
**Below are Shopify themes that are compatible with Smartrr's subscription widget:** \
\
Colorblock \
Craft \
Crave\
Creator \
Dawn \
Enterprise \
Expanse \
Fetch \
Focal \
Impact \
Impulse \
Motion \
Origin \
Prestige \
Publisher \
Refresh \
Ride \
Sense \
Spotlight \
Streamline \
Studio \
Taste \
Warehouse
{% endhint %}

<figure><img src="/files/g2WUqKmPIDrKgtxd7aHS" alt=""><figcaption><p>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." </p></figcaption></figure>

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**.&#x20;

<figure><img src="/files/4F6kFbsuKzJCK9VONHZ3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NgDvevecPujX4nVhu0jU" alt=""><figcaption><p>The Subscription Options widget is made up of two parts: <strong>Subscription Program,</strong> which is on top<strong>,</strong> and <strong>Subscription Plan (Frequency)</strong>, which is on the bottom. Both parts can be customized independently of each other.</p></figcaption></figure>

<figure><img src="/files/mBmtPdQ3rqxTdo0AA7Y0" alt=""><figcaption><p>Check <strong>"Show prices?"</strong> to include subscription prices with/without price incentives. Uncheck <strong>"Show one time purchase option"</strong> to make a subscription the only option on a PDP.</p></figcaption></figure>

{% hint style="info" %}
**Note:** 💻 Have a developer who would like to make even more changes to Smartrr's Widget? They can add custom CSS in the **"Custom CSS"** block.&#x20;
{% endhint %}

<figure><img src="/files/9M0030Xd3EO8BgYItl6d" alt=""><figcaption></figcaption></figure>

{% code title="Custom CSS Selectors" overflow="wrap" %}

```css
/* 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 */
```

{% endcode %}

## 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.&#x20;

<figure><img src="/files/5wtgIrrrcnxJ1jdFuJO2" alt=""><figcaption></figcaption></figure>

### 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:&#x20;

{% code lineNumbers="true" %}

```html
<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>
```

{% endcode %}

Styling can be changed by adding the following values to the <mark style="color:blue;">`data-smartrr-price-style`</mark> attribute.

* <mark style="color:blue;">`original`</mark> (Adds the original variant price/one-time purchase)
* <mark style="color:blue;">`original-compare`</mark> (Adds the original variant price/one-time purchase price and the compare price)&#x20;
* <mark style="color:blue;">`overwrite`</mark> (Adds the current selected subscription plan's price)&#x20;
* <mark style="color:blue;">`overwrite-compare`</mark> (Adds the current selected subscription plan's price and compare price)&#x20;
* <mark style="color:blue;">`strike`</mark> (Discounted price struck through)&#x20;
* <mark style="color:blue;">`strike-compare`</mark> (Compare at price struck through)&#x20;

### 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 <mark style="color:blue;">`product.liquid`</mark> or <mark style="color:blue;">`main-product.liquid`</mark>, but can also be uniquely named if your shop uses a custom theme. If you can't find this file, you can also use <mark style="color:blue;">`theme.liquid`</mark>.
2. At the bottom of the file, paste the following code:&#x20;

{% code lineNumbers="true" %}

```javascript
<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>
```

{% endcode %}

3. 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:&#x20;

```javascript
// Class syntax: 

querySelectorAll('.variant-selector')

// Data-attribute syntax: 

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

Note: If your variant selectors are not <mark style="color:blue;">`<input>`</mark> elements, then you can change the <mark style="color:blue;">`'change'`</mark> event listener to <mark style="color:blue;">`'click'`</mark>.

{% hint style="info" %}
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 [<mark style="color:blue;">Grow and Excel plans</mark>.](http://smartrr.com/pricing)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartrr.com/docs/getting-started/implementation/installing-smartrr-on-a-shopify-2.0-theme-automatic-install.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.