Self-serve install + setup Self-serve install + setup

Self-serve install + setup

Overview

  • Installing Skio
  • Setting up products in Skio for subscription
  • Adding the Skio widget to your Product pages
  • Customizing the Skio widget
  • Testing
  • Common Issues / Troubleshooting
  • Next Steps

Installing Skio

  1. Open Skio on the Shopify App Store.
  2. Click Install.
  3. Accept permissions.
  4. Skio is now installed on your store!

Setting up products in Skio for subscription

To begin selling subscription products with Skio, you'll first need to set up your products for subscription in the Skio app. You can do this using the following instructions:

  1. Navigate to the Skio app's Selling Plans page (https://dashboard.skio.com/selling-plans)

  2. Click "Create New Plan" in the top-right of the page. You will be prompted to select your Selling Plan Group type type, such as "Subscribe and Save" or "Prepaid" (more details on the difference between these two Selling Plan Group types below)

  3. After selecting your Selling Plan Group type, enter a name for your new Selling Plan Group at the top of the page, and then select the products that you'd like to offer for subscription (note: selecting a product will also select its variants, click the dropdown menu icon to show the variants for a specific product).

  4. With your products selected, it is time to set up the different subscription options for this Selling Plan Group (delivery frequency, subscription discount). Click the "Add subscription plan" button to create a new Selling Plan, and enter the required information.

  5. Once done, remember to click "Save" at the top-right of the page to save the newly created Selling Plan Group!

  6. You can edit your Selling Plan Group anytime by clicking on the Selling Plan Group's name in the Selling Plans page (https://dashboard.skio.com/selling-plans) .

Here is a screen recording that follows these steps as a demonstration:

You can find more information about setting up Selling Plans in Skio here: Selling Plans .

In Shopify, adding purchase options to products is possible through Selling Plans. Selling Plans represent how products can be sold and purchased. For example, a product can be configured to enable it to be billed and delivered on a monthly basis at a 15% discount.

Two common selling plan types include the "Subscribe and save" and "Prepaid" options. "Subscribe and save", also known as "pay per delivery", is a selling method where a customer pays for goods or services on a recurring basis. "Prepaid" is a selling method where a customer makes a single payment upfront, and receives multiple deliveries over a specific period of time. Learn more about purchase option types and associated policies.

 

Adding the Skio widget to your Product pages

Once Skio is installed, the Skio app block will be available to use in the Shopify Customizer tool. The Skio app block will allow you to seamlessly add the Skio subscription plan picker widget to any Product page using an "add to cart" form in your Shopify theme codebase.

Here are the steps to add the Skio widget to your theme via the Shopify Customizer tool:

  1. From the Shopify dashboard sidebar, go to Sales Channels -> Online Store.

  2. Click Customize on the specific theme you want to edit.

  3. In the middle of the top bar, there is a dropdown to select the page - click on it and select Products, then choose your desired template. Usually it should be the Default product, but this will depend on the product being set up for subscription. More about product template here .

  4. Within the Product Information section (for Dawn 2.0 based themes, may be named differently in your theme), click on Add block.

  5. Click Apps, and then choose Skio Subscriptions and drag the block to the order you want the Skio widget to be in on the Product page. Usually, it goes after the variant picker and before the quantity selector.

Here is a screen recording that follows the above steps as a demonstration:

 

Customizing the Skio widget

Within the Skio Subscriptions app block, there are settings fields that allow you to customize the look and functionality of the Skio widget:

Screen Shot 2024-08-29 at 8.21.47 AM.png

The most important field is the very first field, the Form ID field. This field must match the Form ID of the "Add to Cart" button's form. This ensures that the selling plan ID and form event tracking for the Skio widget are attached to the correct form on the product page. The default value is Dawn 2.0 theme's product form ID: product-form-{{section.id}}

Other fields have thorough descriptions and/or self descriptive names. For example: to change the copy of the "One Time" purchase option - you would need the One Time Purchase Title field, to change the displayed discount format you would need the Displayed Discount Format field and etc.

Testing

The ultimate goal of the Skio widget is to pass down the selling plan ID (ex. from the selling plan that you created in Skio) to the "add to cart" API call made to Shopify; this ensures that the product is a "Subscription" purchase, rather than a standard "Onetime" purchase. To make sure that it is being passed and the Skio widget is working correctly:

  1. Navigate to the page where you added the Skio app block.
  2. Make sure the Subscribe option is selected.
  3. Add to cart.
  4. Go to checkout.
  5. On the checkout, you should see your selling plan label that was set in the Skio's selling plan group setup page. If you see the label (ex: Every 4 weeks), then the Skio widget is working correctly!

ScreenRecording2024-04-20at8.01.47AM-ezgif.com-video-to-gif-converter.gif

 

After the subscription order was placed successfully, it will appear in the Skio admin (https://dashboard.skio.com), and the customer will be able to sign in and view the subscription via the Skio Customer Portal. The Skio Customer Portal by default lives at the URL /a/account/login, i.e https://{YOUR_PRIMARY_DOMAIN.COM}/a/account/login.

For additional testing and considerations prior to "Going Live" with the Skio element, please review our Going Live with Skio documentation! This discusses testing before going live, as well as how to actually push the Skio element to your live Shopify theme, and last how to make sure that things are working as expected once the Skio element is live on your store.

Common Issues / Troubleshooting

  1. I've added the Skio app block but it is not showing up on my Product page!

    Please make sure that the product you're viewing has a selling plan group attached to it. To check your selling plan groups, navigate to https://dashboard.skio.com/selling-plans.
    Please additionally confirm that the product you're viewing uses the same Product page template as the one shown in the Customizer tool (i.e. default). You can find more about Product templates here .

  2. I am getting the error, "Cannot apply selling plan to variant" after changing the selected variant on the Product page.

    It sounds like the Skio widget isn't getting notified about the changes in your product form when the selected variant is changed. Please double check your Form ID setting. If the problem persists, please contact help@skio.com or migrations@skio.com .

  3. I am currently selling subscriptions using a different subscription platform, and would like to switch to Skio. Do I need to do anything to make sure that only Skio selling plans are available on my store?

    If you are already selling subscriptions using a different subscription platform, you may need to remove any widgets / functionality in your Shopify theme that are specific to your current platform. This ensures that customers are only able to purchase Skio selling plans, rather than continuing to purchase selling plans offered by your previous subscription platform.

    Removing the widgets / functionality of your current subscription platform may be as simple as removing your current subscription app's app block within the Shopify Theme Customizer tool (related to this recording), or you may need a developer to review your Shopify theme to remove any platform-specific code related to your current platform's selling plan groups. Alternatively, you can also delete all selling plans / selling plan groups from your current subscription platform to ensure that only the Skio selling plan groups exist / are available for purchase.

    As a note, do not delete your current subscription platform unless you don't want to migrate your existing subscriptions into Skio. Once an app has been deleted, it is not always possible to retrieve subscription data from that app in order to migrate customers over to Skio. If you have an existing subscription platform and have are moving to Skio, please reach out to our Support team (help@skio.com) or our Launch team (migrations@skio.com) as soon as your store is live with Skio!

  4. My store's Cart does not show anything related to the subscription; Onetime purchases appear the same as Subscription purchases. How can I update the Cart to show that a product is a Subscription purchase and not a Onetime purchase?

    Depending on your Shopify theme, you may need to edit the code of your Shopify theme's Cart element in order to display the item's selected selling plan name. Here is a screen recording showing how to add the necessary copy to the Dawn 2.0 default Cart drawer element using the `line_item.selling_plan_allocation.selling_plan.name` value:

 

Next Actions

If everything above is done and works as expected, you're ready to sell products on subscriptions with Skio! However, we highly recommend going over the following settings to make sure that everything is setup correctly:

    1. Notifications - https://help.skio.com/hc/en-us/sections/17262773990043-Notifications
    2. Billing windows - https://help.skio.com/hc/en-us/articles/16802722776219-Billing-window
    3. Portal settings - https://help.skio.com/hc/en-us/sections/17263010748827-Portal-Settings

 

You can also review our Launch Process Guide, which covers each step of our Skio Launch process in detail to ensure that your store is setup properly and ready to go live with Skio subscriptions!

If you run into any issues with our Self Serve install instructions, or otherwise need assistance with setting up the Skio plan picker element, please reach out to our Support team (help@skio.com) or our Launch team (migrations@skio.com)!

Add comment

Please sign in to leave a comment.