Implementing Smartrr on storefronts with one of Shopify’s 2.0 free themes: Dawn, Craft, Crave, and Sense.
Last updated
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.
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 Modern Account Portal where your customers will be able to access and manage their subscriptions.
Within the Smartrr app navigate to Setup under RESOURCES in the left-hand menu.
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.
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.
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 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.
Note: We recommend always using 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.
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:
Customize the look and feel of your customer account portal
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].
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.
Note: If you're planning on using Smartrr's subscription widget, leave the I'm planning on using Smartrr's subscription widget box checked. 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, 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.
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.
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
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.
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.
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.
To add Smartrr's pricing element outside of the subscription widget, you can add the following code:
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)
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.
At the bottom of the file, paste the following code:
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:
Note: If your variant selectors are not <input> elements, then you can change the 'change' event listener to 'click'.
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.
