An indie magazine publication by Subsail

If you're selling magazines using Shopify, you may have wondered if there was a way to list your subscriptions alongside your single issues.

With this guide, I will take you through the steps of updating your Shopify theme to change the "Add to cart" button on a subscription product to say "Subscribe" and load the Subsail overlay checkout instead.

Requirements: This guide assumes you've got a Shopify shop and that you've got your checkout set up in Subsail (you've connected to Stripe and created at least one product).

This is a bit technical as you will need to edit your theme's HTML code, but it's not very complicated (copy and paste).

Step 1 — Create a dummy subscription product in Shopify

The first step is to create a product in Shopify, which we'll use as the subscription. Treat this as a proper product in display terms (it needs to fit in in your shop), but it will never be sold through Shopify.

To make it look and feel like a real product, use a proper name, add a nice image, a description and make sure you add a quantity of at least 1 to avoid "Sold out" messages on your shop.

By the way, this is a great opportunity to explain your subscription choices and really sell customers on the idea of buying a subscription. The Subsail checkout is not designed to show much content, so use your Shopify product description field to your advantage (my example here does not do a very good job!).

If you sell multiple subscriptions in Subsail, the price for this product should match closely to your average subscription price in Subsail so it isn't misleading. Otherwise, just use the same price.

Once you've created the product, note down its ID as you'll need it in a later step. You can find a product's ID in the URL bar when editing:

https://your-account.myshopify.com/admin/products/[productid]

In this example, the product ID is 1568152748132.

Step 2 — Find your Shopify theme templates

In your left side menu, go to "Online Store" and then on your current theme panel, click "Actions" and select "Edit code".

Edit your theme's code

You now need to locate the code that powers the cart button, which may vary depending on your current them. This guide uses a free theme from Shopify called "Narrative". For this theme (and I'm assuming every Shopify-created theme), the cart button is in the product-form.liquid file within the "Snippets" section.

Step 3 — Change the cart button for just your subscription product

We are going to edit the code that creates the "Add to cart" button so that it instead creates a link to your Subsail checkout page that says "Subscribe". We'll do this only for your subscription product by using something called a "conditional if statement".

In the Narrative theme, the code in the product-form.liquid file looks like this...

The "Add to cart" button code.

We want to edit the "Add to cart" <button> (highlighted above) but only for our subscription product. Using an if statement, we're going to display a different button and link it to your Subsail checkout.

You can copy and paste the following code; just don't remove your current <button> code as we need that for all of your other products 😄

Note that we need your subscription product's ID from step 1 here.

{% if product.id == 1568152748132 %}
    {% comment %}Custom subscription button linking to Subsail{% endcomment %}
    <a href="https://your-mag.subsail.com/subscribe/" target="_blank" class="btn btn--to-secondary btn--full">Subscribe</a>
{% else %}
  [Existing <button> code, which will load for every other product]
{% endif %}

You can see that I've copied across the content in the original <button>'s class list to our <a> element:

btn btn--to-secondary btn--full

Classes are used to apply different styles to elements. In our case, we want the Subsail link to look exactly like the cart button so we can simply copy and paste them in. You should do the same with whatever classes are used in your theme.

Here's what our code now looks like:

After pasting our {% if %} statement and <a> link to Subsail.

Click the purple "Save" button.

Step 4 — Use Subsail's overlay checkout

Subsail offers an overlay checkout, which loads the checkout form over your website rather than simply linking customers out to it. This gives your customer a more seamless buying experience, so I recommend using it.

Add the following line of Javascript just after your button. This Javascript watches for people clicking on the "Subscribe" button and creates the overlay checkout on the current page. We add this just before the {% else %}.

<script src="https://static.subsail.com/embed/v1.js" async defer></script>
Adding this line of Javascript will enable the overlay checkout.

Make sure you click "Save" again.

Step 5 — Test the integration

Go back to your Shopify shop and to your subscription product page. The button should now say "Subscribe" and load your Subsail checkout in the overlay.

Your new "Subscribe" button on the subscription product's page.
Once the Javascript file has been added, clicking "Subscribe" will load your checkout over your Shopify shop.

Congratulations!

Any customers coming to your Shopify shop can now see your back issues and subscriptions alongside eachother and can purchase both without leaving Shopify. 💥

(Please note that if you change your theme in the future, you will need to edit your new theme code in the same way.)