Installing Skio: Step by Step
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.
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.
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.
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.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.Congratulations! You have completed the basic installation of Skio's plan picker. If you're running into problems integrating the plan picker, please head to the next guide: Common Issues & How to Fix Them.
Last modified 6mo ago