How to get ReCharge and GemPages working together on Shopify

How to get ReCharge and GemPages working together on Shopify

ReCharge is a premium application on the Shopify App Store that allows you to create a subscription based business. At the time of writing it has a rating of 4.9 out of 5 stars based on approximately 1400 reviews. I have worked with a few clients who have used it and I have to say it is a pretty robust solution.

GemPages also has a solid rating of 4.9 out of 5 stars based on approximately 1000 reviews. It is another app that I am quite familiar with and have recommended it to clients who want to design and build their own pages. There are some limitations with the app.

Given that these are two very popular apps you would imagine that they would work well together. Unfortunately that is not the case as a client and I recently discovered 2 days before a planned launch. The obvious question is which app caused the problem but unfortunately the answer is not that clear cut.

The main problem is that ReCharge needs a snippet of code in the product page to work and it isn't included in the custom template that GemPages generates. When you look at the template code in Shopify you can easily add the snippet to the template BUT when someone hits publish in GemPages it overwrites the ALL the template files. There is a clear warning in the GemPages template files that says do not to edit template code outside GemPages editor as changes will be lost but adding the snippet that ReCharge needs is impossible to do in the editor.

It is important that no one else is working GemPages while you follow the steps below.

1 - Finalize Product Page

Go in to GemPages and make the final edits to your product page and publish the page. Make sure you are happy with the page as this is the page that you are going to have for a while.

2 - Add the ReCharge Snippet

Ignore the messages at the start of the template saying not to edit it. This is normally good advice but to get ReCharge to work we will have to ignore it for now. There is documentation on the ReCharge website as to how to integrate ReCharge with your theme so I would recommend following those instructions. I will not duplicate them here. You also should test to make sure that to product page is working correctly and when you add to cart and try to checkout is directs you to ReCharge page.

3 - Duplicate the template

Now we have a working product template let's create a backup and assign it the name like product.backup.liquid. At this point your GemPages template and product.backup.liquid should be exactly the same.

4 - Create Private App

In the APPS section of your Shopify store there is the option to create a Private App. You will need the API keys to access the stores API. There is plenty of documentation on the Shopify site about the API endpoints and how to read/write data to Shopify.

5 - Lets write some code

You can choose what ever language you prefer to interact with the API. The logic is pretty simple. Check the current template file against the backup we created in step 3. If they are the same, do nothing, if they are different overwrite the GemPages template with the backup.

6 - Connect to a monitoring Solution

I deployed the code on my server and used to ping the program every 5 minutes. If there was a difference between the backup and current theme I would get a "page offline" notification and when the code was fixed I was get another notification telling me that all was ok. As this is kind of self healing code the notifications aren't necessary but I like to know how often this is happening.