Skip to main content
All CollectionsSetting Up
Getting Started on Stay AI
Getting Started on Stay AI

This guide covers your first steps in getting started with Stay AI.

Ashley Kim avatar
Written by Ashley Kim
Updated over a week ago

Overview

Welcome to Stay! The following guide will walk you through how to get your subscription program up and running. This will cover the steps from installing the Stay app, to adding code snippets to your theme, to customizing your buy box widget and customer portal.

Installing Stay AI and Creating Selling Plans

Install the Stay AI app 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.

  1. Log into your Shopify store and navigate to Apps > Stay AI Subscriptions

  2. Once you’re in the Stay AI app, open the Settings dropdown on the lefthand navigation menu, and click Selling Plans

  3. Click “New Selling Plan Group” in the top right corner of the page

Markup 2024-06-27 at 15.55.46.png

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 based on the frequency the customer selects and when the customer checks out/starts their subscription. There is also no end date to the subscription, until the customer cancels.

    • For example, if you offer products on subscription every 1 month, 2 months, and 3 months, and customers can start their subscription whenever they would like and have orders process according to their subscription start date + frequency, the standard selling plan group is for you.

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

    • For example, if you offer a monthly subscription box that needs to process in Shopify every 1st of the month, or if you only process subscription orders on specific dates of the calendar year (e.g. Valentine’s Day, Mother’s Day), the calendar selling plan group is for you.

  • 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.

    • For example, if you offer a 12-month monthly subscription of vitamins that customers need to pay for upfront, or a 12-month monthly wine subscription that you want customers to be able to gift (or order for themselves), the prepaid selling plan group is for you.

  • 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.

    • For example, if you offer a yearly flower delivery service on the major holidays (e.g. Valentine’s Day, Easter, Mother’s Day, Father’s Day, Thanksgiving, Winter Holidays), the prepaid calendar selling plan group is for you.

NOTE: If you are looking to create a bundle selling plan group, navigate to Settings > Bundles.

5. Once you’ve selected the selling plan group type, add the products and/or variants you want being offered on subscription on the same frequency offerings and discount.

6. Create the selling plans. The selling plans are frequencies and discounts. For example, a 1-month frequency at a 10% discount is one selling plan; a 2-month frequency at a 10% discount is a second selling plan. Create as many selling plans as you would like to offer your customers as a frequency option on the subscription buy box.

Tip! Think about the lifestyle and usage of your product. If you offer a 30-day supply, you may be want to offer a 30-day frequency for the regular solo user, perhaps a 60-day frequency for the occasional forgetter, and maybe even a 14-day frequency for two-person households.

7. Once you’ve created your selling plans, filled out the labels, and clicked submit, you’re ready to implement buy box code into your Shopify theme to make this all come to life!

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.

  1. 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

  1. 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.

  2. 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

  1. 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.

  2. 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.

Did this answer your question?