Before you start, you should know that the Simplee team offers a completely free setup and configuration service. These installs are typically completed within a day, and all you need to do is to complete a quick survey. Click here to get started.

If you love Shopify Liquid, Javascript and CSS, read on!

Step 1 - Backup Theme

If this store is live or will be live, it's best to start by creating a backup of your existing theme. This only takes a minute - click Online Store, and in the Live theme section click Actions > Duplicate.

Ideally, rename this backup theme so that you can identify it easily.

Step 2 - Create Assets & Snippets

To complete the installation, you will need to create four files in this new theme.

Step 3 - Update Theme

This step may require the most time and patience. Since every Shopify theme is a bit different, the best we can do is to point you in the right direction. Remember, our team can complete this install for you if this is unsuccessful.

To begin, click on Online Store in your Shopify admin, find the backup theme you created before, and click on Actions > Edit code

Update your theme.liquid file

This one is easy - in the file list, click on theme.liquid then look for the closing head tag:

</head>

If you can't find it, click Ctrl-F or Cmd-F and search for </head>. Found it? Now copy this bit of code and paste it right in front:

{% render 'simplee' %}

Now click Save and you're done this step 👌

Update your customer account page

This step is a bit more involved, but you'll figure it out. We will be adding a link in your customers' account page that lets them manage their subscriptions.

First, find the customers/account.liquid file in the list and open it. This is very often in the Templates folder. Got it?

In this file, we will add a link after the customer's address and the link to manage their addresses. Do a search for this text to find the spot in this file:

{{ routes.account_addresses_url }}

Towards the end of the line where you found this, you will likely see a </a> which indicates the end of that link. Click just after the </a>, click Enter for a new line, and paste this in:

<a href="/tools/portal" class="simplee_msl_box">My Subscriptions</a>

By default, this link will say "My Subscriptions" but feel free to change the text to whatever you'd like. Save this file.

Update your product page

This is the difficult step, since product pages are the most commonly customized pages on Shopify sites. We need to render our subscription widget somewhere inside the product form so that when customers add a product to their cart, Shopify understands whether or not it's a subscription.

First, we need to find where your product form is being displayed. Here are the most common files where we typically see the product form. We suggest opening up each file and searching for:

form 'product'

If you find this, then you've found the product form! Here are some files we recommend searching:

  • Sections / product-template.liquid

  • Snippets / product-form.liquid

  • Templates / product.liquid

  • Sections / product

Once you have found your product form, you need to copy this code and paste it into an acceptable location:

{% render 'simplee-widget' %}

It's recommended that you add the widget before the form's submit or add to cart button. Sometimes you can find the section where the buttons are located by searching for the word submit which will be inside a <div> or <span> tag in many cases. Paste the code above before this tag, and save the file.

Updating the cart page

Many newer Shopify themes automatically add subscription properties to the cart, but if your theme was installed before November 2020, you'll probably need to take this step.

Step 4 - Test & Publish

Now that all of the hard work is done, test out the new widget by creating a test order and confirming that everything looks good. We have two articles which will help walk you through this depending on whether your store is currently live:

Step 5 - Celebrate!! 🎉

We won't tell you how to celebrate - but do it!

Did this answer your question?