Customizing the Plan Picker

All of the frontend code for Skio's plan picker lives within your theme. This means you're free to customize the plan picker to best match your business's needs!

Feel free to check out how some of our customers have customized the Skio Plan Picker by clicking on any of the logos on our homepage. 

Note: Skio is not responsible for any breaking changes you make to your theme.

Plan picker files, and what they do

Skio's liquid plan picker incorporates the following files:

snippets/skio-plan-picker.liquid

This is where the HTML and some javascript functionality of the plan picker lives. Go here if you want to alter the structure of the plan picker.

snippets/skio-details.liquid

This file contains the popup that lives below the plan picker with additional information about subscribing. If you want to edit this content, head here.

assets/skio-plan-picker.css

Skio's custom styles all live in the central CSS file. Head here to update styling of the plan picker.

assets/skio-plan-picker.js

All of the logic for pulling selling plans, updating form elements, etc. lives here. Head here if you need to add reactive functionality to the plan picker (for example, do something on selecting subscribe, such as updating an external price element).

Common Custom Updates

Set Default Purchase Type to Subscribe & Save

1. Navigate to the file in your theme where the plan picker is rendered (typically product.liquid, product-form.liquid, or similar) and find the render tag: {% render 'skio-plan-picker' %}
2. Change the render tag to the following: {% render 'skio-plan-picker', start_onetime: false %}

There are many other customization options available to you through passing properties in the render tag. Check out the comment at the top of skio-plan-picker.liquid to learn more!

If you require further assistance with customizing Skio's plan picker, feel free to reach out to our front end experts at migrations@skio.com who will be happy to assist you!