Outline
- Overview
- Determine your "Skio Plan Picker" version
- Liquid Instructions
- Lit.js Instructions
- Important note
Overview
A commonly desired customization to the Skio Plan Picker element (which displays the "Onetime" and "Subscription" purchase options on your store's Product pages) is to change the default-selected "Deliver every _____" frequency on initial page-load (i.e. changing from "Deliver every 1 month" to "Deliver every 3 months").
The Skio Plan Picker defaults to the first-available frequency (typically the shortest duration, though this can vary depending on which Subscription / Prepaid selling plan was configured first in the Skio app), however it is fairly simple to update the default-selected value.
Determine your "Skio Plan Picker" version
How to determine which version of the "Skio Plan Picker" you are working with?
There are 2 versions of the Skio Plan Picker instance, depending on when your store installed Skio:
- The Liquid version; to check if this is your version, go into your theme's codebase and check the
snippets
directory for a file titled skio-plan-picker.liquid . If this file exists, you will need to use the Liquid instructions below. - The Lit.js version; to check if this is your version, go into your theme's codebase and check the
assets
directory for a file titledskio-plan-picker-component.js
. If this file exists, you will need to use the Lit.js instructions below.
Liquid Instructions
To change the default-selected "Deliver every _____" frequency on initial page-load for the Liquid version of the Skio Plan Picker, search the file for the <select class="skio-frequency">
element; this is typically found on line 285. Inside of this element are the following lines of Liquid logic:
{% liquid
assign selected = false
if product.selected_selling_plan
if product.selected_selling_plan.id == plan.id
assign selected = true
endif
elsif forloop.first
assign selected = true
endif
%}
The above logic will auto-select the product.selected_selling_plan
, if a selling_plan
value exists in the URL. If not, it will select the first available selling_plan
(i.e. forloop.first
). This can be changed in a few ways; for example, you could change it to always default to the second available selling_plan
by replacing the above with the following lines:
{% liquid
assign selected = false
if product.selected_selling_plan
if product.selected_selling_plan.id == plan.id
assign selected = true
endif
elsif forloop.index == 2
assign selected = true
endif
%}
Alternatively, you can change the above logic to always auto-select an "Every 3 months" selling_plan with the following lines:
{% liquid
assign selected = false
if product.selected_selling_plan
if product.selected_selling_plan.id == plan.id
assign selected = true
endif
elsif plan.name contains '3 months'
assign selected = true
endif
%}
Lit.js Instructions
To change the default-selected "Deliver every _____" frequency on initial page-load for the Lit.js version of the Skio Plan Picker, there are 2 options:
- You can either search for the file containing the include for the Lit.js version of the Skio Plan Picker, which looks like the lines below, and add the
defaultFrequency
value containing a substring of your desired defaultselling_plan
name:<skio-plan-picker
product='{{ product | json | escape }}'
selectedVariant='{{ product.selected_or_first_available_variant | json | escape }}'
formId='{{ product_form_id }}'
defaultFrequency='3 months'
>
</skio-plan-picker>
<script src="{{ 'skio-plan-picker-component.js' | asset_url }}" type="module"></script> - You can alternatively open the
assets/skio-plan-picker-component.js
file, and change thedefaultFrequency
value (typically on line 236) to contain a substring of your desiredselling_plan
name, similar to the below:this.defaultFrequency = '3 months';
Important note
If the above Liquid or Lit.js instructions do not work for your team / you are not able to find the lines referenced above, please reach out to the Skio Support team for assistance at help@skio.com
Articles in this section
- How to set up the Skio Plan Picker on Products page (Self-serve App Block Install)
- How to set up Prepaid Gifting
- Setting up the Skio Plan Picker (Customizer options available)
- Customizing the Skio Plan Picker via the Shopify Customizer tool
- Moving the Skio Plan Picker to a new theme
- Self-serve install + setup
- Going Live with Skio
- Guide for 3rd party for Static Box API
- Skio Universal Plan Picker V2: Lit.JS Component
- Skio Universal Plan Picker V1: Liquid, JS, CSS support