Previous Step Step 1 Creating Subscription Billing Models

Introduction

The sticky.io Subscriptions for Shopify application now fully supports vintage (v1) themes!

While the application now works seamlessly for both v1 and v2 themes, one additional step is needed for the purchase options to display as expected.

Additionally, if v1 theme stores decide to use a different location than the default placement (just before the “Add to cart” button) then there is an easy mechanism to do that.


In a hurry? Watch our Product Marketing Manager guide you through the process of activating the Purchase Options block in 2:13. Inversely, review our step-by-step article below.


What This Article Covers

The following article will guide you through the process of:

  • Activating the sticky.io Purchase Options app block (for Merchants on OS 1.0 or OS 2.0)

And, as relevant:

  • Manually removing the previously inserted snippet from the Product template (for merchants on OS 1.0 who have already enabled the Purchase Options block using the manual insertion of a code snippet)

  • Modifying the Purchase Options location on the PDP in v1 themes

This update will make it easier for new merchants to install and enable the sticky.io Subscriptions app. For merchants who have already installed the app, this will make it easy to stay current with any deployed updates to the application without the need for manual edits to your theme files.

Without further ado, let's begin!


For Merchants On V2 (OS 2.0) Themes

With the latest updates, v2 themes will work just as before. The “Purchase Options” app block can be positioned wherever desired, and the purchase options will be displayed as expected.

However, there is now one extra step needed during the initial setup that each store will need to complete for each theme the store decides to use. Additionally, any stores that have already installed the sticky.io app will now need to complete the one-time step documented below (Activate New App Embed Block).

In summary, v2 themes simply need to do the Activate New App Embed Block steps.


For Merchants On V1 (OS 1.0) Themes

By utilizing the power of app embed blocks (and a little JS magic), we can now inject the purchase options into v1 themes much like the way v2 themes work with app blocks. However, the way the app block is injected is a little different and instead of editing the app block location in the theme editor, the location needs to be specified by modifying the theme code.

By default, the purchase options will be injected just above the “Add to cart” button section. No additional steps are necessary to support v1 themes. If this default location needs to be changed, the store admin simply needs to follow the instructions below for Modifying Purchase Options Location in V1 Themes.

In summary, v1 themes need to do the following after installation.

  1. Activate New App Embed Block

  2. Remove the snippet previously added to the product template

  3. Optional: Modifying Purchase Options Location On the Product Display Page in V1 Themes


Activate New App Embed Block (for Both v1 and v2 Themes)

To begin, start by logging into your Shopify store as an admin.

In the left context menu, click Online Store > Themes to display the Themes page.

Once on the Themes page, look to the center panel for information about your Current Theme. In the Current Theme section, click the Customize button.

On the Theme Customization screen, look to the bottom left-hand corner of your screen. Click the Theme settings button.

Within the Theme settings menu (displayed on the right-hand side of your screen), click App embeds.

In the App embeds menu, ensure that both Purchase Options app embeds are turned on.


Positioning and Modifying the Purchase Options Location On the Product Display Page (V2 or OS 2.0 Themes)

The instructions contained within this section are not relevant to merchants on OS 1.0 or V1 themes. For merchants on OS 1.0, please click here to skip ahead to the next relevant section.

To begin, start on the home screen of your Shopify store admin.

Under Sales Channels, select Online Store and then Themes.

Here, you'll see information about your current theme and you'll have the option to make customizations to your Shopify storefront theme.

Select Customize. You will see a preview of your storefront's home page with functional links and navigation. The panel at the left will allow you to select and customize specific elements of the current page. At the top of the page, you'll see a dropdown menu, pictured below.

Open the dropdown and select Products.

Choose a product that you would like to enable subscriptions for. For the purposes of this demo, we will select our one and only product in the demo storefront, denoted by Default product.

Now, we will add the subscription widget to the product display page's buy box. To do so, locate the Product information dropdown on the left side of the screen.

Open the dropdown and select Add block. Select sticky.io Subscriptions.

Once your selection is made, you will see the sticky.io Subscription module appear within the Product information dropdown. Drag and drop the Subscription module to be positioned directly above the Buy buttons module.

That's it! Click Save to preserve your selections. Confirm the application of your suggestions by visiting the live product display page and confirming that your applied subscription billing models are visible there.


Remove the Snippet Previously Added to the Product Template (V1 or OS 1.0 Themes)

The following steps are only relevant to merchants on OS 1.0 or V1 themes. Merchants on OS 2.0 can disregard the following instructions.

To begin, start by logging into your Shopify store as an admin.

In the left context menu, click Online Store > Themes to display the Themes page.

On the Themes page, look to the center panel for information about your Current Theme. In the Current Theme section, open the Actions drop-down menu and choose Edit code.

In the theme files, locate the Sections category. Select the product-template.liquid file to open it in the editor.

Within the product-template.liquid file, remove the following code:

{% include 'subscription-block', variant: variant, available: true %}

Finally, click Save and the following confirmation message should be displayed.


Modifying the Purchase Options Location On the Product Display Page (V1 or OS 1.0 Themes)

To begin, start by logging into your Shopify store as an admin.

In the left context menu, click Online Store > Themes to display the Themes page.

On the Themes page, in the Current Theme section, open the Actions drop-down and select Edit Code.

In the theme files, locate the Sections category. Within that section, select the product-template.liquid file to open it in the editor.

Within the product-template.liquid file, simply add the following code wherever the Purchase Options block should be displayed.

<div id="subscriptionBlock" class="subscriptionBlock"></div>

The default is just above the Add to Cart button (shown below).

Click Save and the following confirmation message should be displayed.


Congratulations! You're now an expert on enabling and repositioning the sticky.io Subscriptions Purchase Options block on your Product Display Pages.

Next Step — Step 3 — Adding Existing Billing Frequencies to Products

Did this answer your question?