Setup

The typical install process for most Shopify themes.

This guide assumes that you have already installed the Skio app from the Shopify App Store. If not, please do so before proceeding.

Step 1: Getting Skio's Files

In the Skio app, head to the 'Theme Setup' menu located here:

Then, click the install button under 'Advanced: Install Skio theme code'. This process will add all the necessary files for the Skio widget to run.

Note that this will add files to the live theme on your store. Your live store will not be affected by these files.

You'll notice that all the necessary files begin with the prefix skio-, with the Javascript and CSS files located in the assets folder and the Liquid files located in the snippets folder.

In most cases, you will want to work on a development theme, so copy these files over and proceed to step 2.

Step 2: Adding subscription products

Before we can render the plan picker, we'll need products on subscription.

In the Skio App, head to 'Products'. If no subscription products have been created yet, you will see a list of all products hosted on your store. Proceed with creating subscription products as you see fit.

Step 3: Rendering the Plan Picker

In your product page file (typically product.liquid, main-product.liquid or similar), within the product's form, add the following:

{% render 'skio-plan-picker' %}

The plan picker is set up to take in data from the form it is nested in. If you need to place the plan picker outside of the product form, you will need to pass in the form parameter, and if you're working outside of a product page, you will need to pass the product.

Step 4: Styling the Plan Picker

All of the plan picker's styling is encapsulated in skio-plan-picker.css and is fully available for you to customize.. By default, the radio buttons are circular, they can be changed to squares by passing radio_type: square into the plan picker's render statement.

That's it!

Congratulations! You have completed the basic installation of Skio's plan picker.