Troubleshooting the Skio Plan Picker

  • Updated on Nov 21, 2025
  • 3 minute(s) read
  • Migration Team
  • K
 Prev Next

If your Skio Plan Picker isn't displaying or functioning correctly on your product pages, this guide will help you identify and resolve common technical issues.

Before you start

You'll need:

  • Access to your Shopify theme code

  • Basic familiarity with your theme's file structure

  • Developer or theme editor permissions in Shopify

If you're using the Skio App Block through Shopify's theme customizer, some troubleshooting steps may not apply to your setup.

Scenario 1: Plan Picker not rendering at all

Verify the Skio head render in theme.liquid

The Skio Plan Picker requires a specific render tag in your theme.liquid file.

  1. In your Shopify admin, go to Online Store > Themes > Actions > Edit code.

  2. Open the theme.liquid file from the Layout folder.

  3. Look for the <head> tag.

  4. Confirm that {% render 'skio-head' %} appears after <head>before </head>.

If this render tag is missing, add it before the closing </head> tag.

Check for the Plan Picker JavaScript file

If you're not using the Skio App Block, your theme must include a specific JavaScript file.

  1. In the Shopfiy theme code editor, navigate to the Assets folder.

  2. Confirm that skio-plan-picker-component.js exists in this folder.

If either the render tag or JavaScript file is missing, contact Skio Support at support@skio.com for assistance with proper installation.

Confirm the Skio element exists in your theme

The Plan Picker requires a specific HTML element to be present in your theme code.

  1. In the theme code editor, use the search function (typically Ctrl+F or Cmd+F).

  2. Search for </skio-plan-picker> across all theme files.

  3. Verify that this closing tag appears somewhere in your product template files.

If you cannot find this element, the Plan Picker may not be properly installed in your theme.

Validate the formId attribute

The Skio element must reference the correct product form to function.

  1. Locate the <skio-plan-picker> element in your theme code.

  2. Verify that it includes a formId attribute that matches your product page's "Add to cart" form ID.

Example of a properly configured element:

The formId value must match the id attribute of your product form element for the Plan Picker to interact correctly with variant selection and cart actions.

Scenario 2: Plan Picker renders but variants or prices don't update

Check variant change event dispatch

If prices don't update when customers select different product variants, your theme may not be communicating variant changes to the Skio Plan Picker.

  1. Locate the JavaScript code in your theme that handles variant selection changes (typically in your product template or a dedicated product JavaScript file).

  2. Add the following event dispatch wherever the variant selection logic executes:

document.dispatchEvent(
  new CustomEvent("variantChanged", { 
    detail: { variantId: variant.id } 
  })
);

Replace variant.id with the appropriate variable name used in your theme's variant selection code to pass the selected variant's ID.

This event ensures the Skio Plan Picker receives real-time updates when customers change product options.

Scenario 3: Plan Picker renders but behaves unexpectedly

Console log variables from the Plan Picker component

If the Plan Picker displays but doesn't correctly retrieve variant data or pricing information, you can debug by logging component variables.

  1. In your Shopify admin, go to Online Store > Themes > three dots beside your theme > Edit code.

  2. Open assets/skio-plan-picker-component.js.

  3. Add console.log() statements to the relevant functions to identify which function calls aren't executing as expected.

  4. Test on your storefront and check your browser's developer console for the logged output.

This technique helps pinpoint where data retrieval or processing may be failing within the component.

What should I do if none of these solutions work?

Contact Skio Support at support@skio.com with details about:

  • Your current Shopify theme name and version

  • Whether you're using the Skio App Block or custom integration

  • Specific symptoms you're experiencing

  • Any error messages visible in your browser console

FAQ

I'm using the Skio App Block. Do these troubleshooting steps apply to me?

Most steps in this guide apply to custom theme integrations. If you're using the Skio App Block through Shopify's theme customizer, you typically won't need to manually check for the JavaScript file or element tags. However, variant change event issues may still be relevant.

How can I check my browser console for errors?

In most browsers, press F12 or right-click on your page and select Inspect. Navigate to the Console tab to view any JavaScript errors or logged messages.

Related articles