Check your theme.liquid file and assets folder
If the Skio Plan Picker is not rendering, it is usually best to double check your theme.liquid file to make sure you have the following render after the <head> tag:
{% render 'skio-head' %}
You should additionally have the following file in the assets folder of your store's Theme codebase (unless you are utilizing the Skio App Block element via the Shopify Customizer tool):
skio-plan-picker-component.js
If you are missing either of these (and are not using the App Block), please reach out to our Support team (help@skio.com) for assistance.
The Skio element should be included somewhere in your Theme code
If the 'skio-head' render is there and the 'skio-plan-picker-component.js' file exists (and you are not using the Skio App Block element via the Shopify Customizer tool), then next is to check that the Skio element exists somewhere in your Theme codebase. You can confirm this by searching for the following HMTL element end tag:
</skio-plan-picker>
The Skio element should include a valid `formId` value
Once you find the <skio-plan-picker> element in your Theme codebase, you should confirm that it is being passed a valid `formId` value that is used for the actual "Add to cart" form, similar to the below example:
Skio plan picker is not working correctly?
Console log the variables from assets/skio-plan-picker-component.js
In the case that your Skio plan picker is rendering but still having issues with grabbing variants/prices you will want to console log the functions within skio-plan-picker-component.js to find the function call that might not be working properly.
Skio element price isn't changing when the selected Variant changes?
If the Skio element doesn't seem to be responding when a new variant is selected on the Product page, please place the following Event dispatch in your Theme codebase wherever the JS code that controls the changing of the variant on the Product page occurs:
document.dispatchEvent( new CustomEvent("variantChanged", { detail: { variantId: variant.id } }) );
where `variant.id` should be replaced as needed to pass the selected variant's ID value to the Event detail object.
Was this article helpful?
Articles in this section
- 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
- Theme work scope
Add comment
Please sign in to leave a comment.