Changing the default "Deliver Every" frequency on initial page-load

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:

1. 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.
2. 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 titled skio-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:

1. 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 default selling_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>

2. You can alternatively open the assets/skio-plan-picker-component.js file, and change the defaultFrequency value (typically on line 236) to contain a substring of your desired selling_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