Self-serve install and setup

This guide walks you through installing the Skio widget on your Shopify store's product pages. If you're comfortable working in your theme code, this is the fastest way to go live with subscriptions, no migration process required.

If you're working with a developer, the latest version of the Skio widget is available in our GitHub repository. This approach gives you full access to the widget's code directly in your theme, making advanced customizations straightforward. If you'd prefer a code-free setup, continue with the steps below.

Installing Skio

1. Open Skio on the Shopify App Store and click Install.
   

2. Review the permissions that Skio needs access to and confirm by clicking Install
   

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)

   • In your Skio dashboard, click the Products drop-down and select Selling Plans.

2. Click Create New Plan. 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 (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 Plan Picker 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 to any Product page using an "add to cart" form in your Shopify theme codebase.

Here are the steps to add the Skio Plan Picker 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 Add block.

5. Click Apps, and then choose Skio Subscriptions and drag the block to the order you want the Skio Plan Picker 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 Plan Picker

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

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 Plan Picker 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 Skio Plan Picker

The ultimate goal of the Skio Plan Picker 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 Plan Picker is working correctly:

1. Navigate to the page where you added the Skio app block.

2. Make sure the Subscribe option is selected and Add the product to your cart.

3. Go to checkout.

4. 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 Plan Picker is working correctly.

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). You can learn more about how customers can login to the customer portal in our help doc on account logins here. 

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.

Customer Portal Settings and Customizations

After a customer purchases a Skio subscription on your store, they'll need a way to manage their subscription (ex. change their next order date, update their delivery frequency, add / remove products). They will be able to do this using the Skio Customer Portal, which exists on all stores with Skio installed at the following URL suffix: your-domain.myshopify.com/a/account/login.

See Customer Portal for more details.

Next Steps

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

• Notifications: Email Notifications

• Billing windows: Billing & orders settings guide

• Portal settings:  Customer Portal

You can also review our Migration Process Guide, which covers each step of our Skio Migration 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 Migrations team (migrations@skio.com).

FAQ and Troubleshooting