Customize plan picker
Plan Picket Customizer
Set One-time Purchase as the Default Selected
From
Snippets/skio-plan-picker-rewrites.liquid find the function onLoad() and remove the function call initialCheckPlanOnSelect(); or you can replace your function with the code below:
function onLoad() { patchRequests(); document.querySelectorAll('fieldset.skio-plan-picker').forEach(function (planSelector) { setupPlanSelector(planSelector); addObserver(planSelector); //initialCheckPlanOnSelect(); planSelector.querySelectorAll('[name="skio-subscription-value"]').forEach(function(node) { node.addEventListener('change', function (e) { filterGroupsForVariantAndThenUpdate(planSelector); }); }); planSelector.querySelectorAll('select').forEach(function(node) { node.addEventListener('change', function (e) { checkPlanOnSelect(planSelector); filterGroupsForVariantAndThenUpdate(planSelector); }); }); }); }
Add Prices to Plan Selected
From Snippets/skio-plan-picker-rewrites.liquid find the function onLoad() and remove the function call initialCheckPlanOnSelect(); or you can replace your function with the code below:
function onLoad() { patchRequests(); document.querySelectorAll('fieldset.skio-plan-picker').forEach(function (planSelector) { setupPlanSelector(planSelector); addObserver(planSelector); //initialCheckPlanOnSelect(); planSelector.querySelectorAll('[name="skio-subscription-value"]').forEach(function(node) { node.addEventListener('change', function (e) { filterGroupsForVariantAndThenUpdate(planSelector); }); }); planSelector.querySelectorAll('select').forEach(function(node) { node.addEventListener('change', function (e) { checkPlanOnSelect(planSelector); filterGroupsForVariantAndThenUpdate(planSelector); }); }); }); }
Add Prices to Plan Selected
From Snippets/skio-plan-picker.liquid find <span>One-time purchase</span> and replace it with the code below:
<span class="one-time-price">One-time purchase: {{ product.selected_or_first_available_variant.price | money }}</span>
From Snippets/skio-plan-picker.liquid find <span>Subscribe and save</span> and replace it with the code below:
<span class="subscribe-price">Subscribe and save: {{ product.selected_or_first_available_variant.selling_plan_allocations[0].price | money }}</span>
Add Savings to Subscribe and Save

From Snippets/skio-plan-picker.liquid find the code block below and uncomment it:
{% assign sellingPlanPrice = group.selling_plans[0].price_adjustments[0].value %} {% assign variantPriceFloat = variantPrice | times: 1.0 %} {% assign sellingPlanPriceFloat = sellingPlanPrice | times: 1.0 %} {% assign savingsFlat = variantPriceFloat | minus: sellingPlanPriceFloat %} {% assign savings = savingsFlat | times: 100.0 | divided_by: variantPriceFloat | round %}
From Snippets/skio-plan-picker.liquid find <span>Subscribe and save</span> and replace it with the code below:
<span class="subscribe-price">Subscribe and save {{ savings }}%</span>