Overview

Welcome to Stay AI! The following guide will walk you through how to get your subscription program up and running. We'll take you through installing Stay, creating Selling Plans, installing the buy box code, and adding the Manage Subscription link!

Let's get you started!

Installing Stay AI to your Shopify Store

Find the Stay AI app in the Shopify App Store or follow the link directly here. Make sure you are first logged into your Shopify store and are a user with permission to install apps.

Create Selling Plans in the Stay AI app

Once the Stay AI app is installed in your Shopify store, you’re ready to create selling plans.

Log into your Shopify store and navigate to Apps > Stay AI Subscriptions
Once you’re in the Stay AI app, open the Subscription Setup dropdown on the lefthand navigation menu, and click Selling Plans
Click “New Selling Plan Group” in the top right corner of the page

4. Name your selling plan group and select the type of selling plan group you need.

Standard - A standard selling plan group is for subscriptions that are processed on a recurring cadence. The cadence is based on the frequency the customer selects and when the customer checks out/starts their subscription. The subscription will continue recurring until the customer cancels.

Example:

The standard selling plan group is for you if:

Your products are offered on subscription every 1 month, 2 months, and 3 months
Customers can start their subscription whenever they would like
Subscription orders process according to their subscription start date + frequency

Calendar - A calendar selling plan group is for subscriptions that are processed on a recurring cadence on specific dates with no end date.

Example:

Calendar Selling Plan Groups are for you if:

You offer a subscription that needs to process specifically on every X day of the month
OR if you only process subscription orders on specific dates of the calendar year (i.e. Valentine's Day, Mother's Day, etc)

Prepaid - A prepaid selling plan group is for subscriptions that process on a recurring cadence but is paid for upfront for the duration of the subscription. The cadence is determined by when the customer checks out/starts their subscription. There is an end date, which is when the number of prepaid orders are all fulfilled.

Example:

Prepaid Selling Plan Groups are for you if:

You offer a product that customers need to pay for all of their orders up front (i.e. a 12-month subscription that ships monthly, but all 12 shipments are paid for on the first order)
OR you plan to offer a gifted subscription option

Prepaid Calendar - A prepaid calendar selling plan group is a combination of the calendar and prepaid selling plan groups. This plan is for prepaid subscriptions that need to be processed on specific dates.

Example:

Prepaid Calendar Selling Plan Groups are for you if:

You offer a product that customers need to pay for all of their orders up front
AND the orders need to fire on specific days

Confirming Compatibility

NOTE: If your Shopify store is headless or has custom buy boxes already using selling plans, it is recommended that you reuse the code to ensure it works with Stay AI selling plans.

This solution works for vintage and 2.0 themes.
The main-product-schema portion can be omitted, if necessary, but this will remove the admin interface that allows user customizations.

Adding Source Files

Please reach out to your Onboarding Manager or Sales to receive a file of the Stay AI snippets that you will need for the following steps.

Once received, below is a breakdown of what each file contains and its purpose.

rtx-pdp.liquid: Contains the code and styles related to the purchase options.
rtx-api.liquid: Provides a common/global API for JS to create a standardized subscription interface.
rtx-account-btn.liquid: Incorporates code to add a link for subscription management and logging into the Stay Ai customer portal.
main-product-schema: This file has the code related to the schema that needs to be copied over to the main product section.

Adding Code for Buy Box Set-up

NOTE: If needed, you can skip step 2 “Add schema code” and step 4 “Add the Stay Ai Subscriptions block“. This will exclude the ability to change settings through the theme customizer.

1. Include Stay AI snippet files

In the duplicated working theme, go to the snippets folder and add rtx-api, rtx-pdp and rtx-account-btn liquid files.

2. Add the schema code

To be able to display the buy box as a block through Shopify Admin, you will need to add code to the schema of the main-product section (for Dawn). This may vary depending on the theme.

Go to the bottom of the main product section to see the {% schema %} tag.

2. Copy the code from “main-product-schema” file and paste it after the “variant_picker” portion or the corresponding block in your theme.

3. Render rtx-pdp snippet

Add this code inside the main product where the blocks are being rendered to include Stay Ai snippet:

{%- if block.type == 'stay_ai_subscriptions' -%}

     // Create, if it doesn't exist, the variable to pass to the snippet   
     {%- assign product_form_id = 'product-form-' | append: section.id -%}

     // Render the rtx-pdp snippet, passing the variables product, block, and product_form_id
     {% render 'rtx-pdp', product: product, block: block, product_form_id: product_form_id %}
     {%- endif -%}

Example for the Dawn theme:

{%- for block in section.blocks -%}
   {%- case block.type -%}
     ...          {%- when 'variant_picker' -%}

       {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
            {%- when 'stay_ai_subscriptions' -%}
       {% render 'rtx-pdp', product: product, block: block, product_form_id: product_form_id %}

       ...

NOTE: This code may require modification to align with the theme's structure. Additionally, it's essential to pass the appropriate product, block and product_form_id data to the snippet.

For vintage themes, you will only need to render the snippet, omitting the block variable.

{% render 'rtx-pdp', product: product, product_form_id: product_form_id %}

Adding the Stay AI Subscriptions Block

Navigate to the Shopify admin, select the product template to be used, and add the Stay AI Subscriptions block.

Tip! This step-by-step guide will walk you through how to add the block and customize it to your liking!

After this step, if the settings are correct and the product has selling plans, you should see the widget displaying the purchase options.

Adding the “Manage Subscription” Link to the Shopify Account Page

Navigate to templates / customers / account and find the section that contains the page content, for example, for the Dawn theme, this is the main-account.

Render the snippet:

{% render 'rtx-account-btn', customer: customer %}

NOTE: The “Manage Subscription” link will be displayed if the customer has a subscription on Stay. The user should be logged into their subscription portal after clicking the link.

Adding the Passwordless Login Subscription Portal Link to the Account Login Page

Navigate to templates / customers / login and find the section that contains the page content, for example, for the Dawn theme, this is the main-login.
Include this code under the Create Account button, or the location where you want to add the password-less Manage Subscription link:

<a href="/apps/retextion">Manage Subscriptions Without Password</a>

This link will open the Stay AI login page that allows users to access their subscription portal by receiving a verification code via email.

Considerations

You may need to adjust the buyBox.variantSelectors and buyBox.productPriceLbl according to the theme in use.
You can add the schema part to the main product section, and render the rtx-pdp snippet inside of another snippet, where the block data is available.
All of the variables have default values that can be adjusted if the schema part is not implemented.
The implementation can be used in featured product sections and collection pages. This will depend on the theme particularities, and additional adjustment may be required.