How to set up the Skio Plan Picker on Products page (Self-serve App Block Install)

Outline:

• Overview
• How can I setup the Skio Plan Picker?

Overview

This article is for setting up Skio's auto-installed Plan Picker on the Products page via the Shopify Customizer tool. For additional questions (or if you run into any issues/bugs) please reach out to our Support team at help@skio.com !

What is the Skio Plan Picker?

The Skio Plan Picker widget is an automatically installed App block element that allows merchants to easily set up their store with Skio to begin selling subscriptions to their customers from the Product page's "Add to cart" form. This installation process does not require any developers, and can be customized using the settings available within the app block itself. 

How can I setup the Skio Plan Picker?

To add the Skio Plan Picker to your Product page, follow the below steps:

1. Open the Shopify Theme Customizer (click Customize in your Shopify Admin > Theme page)
2. At the top of the Customizer, go to Home page, and then Products
3. Click the desired Product page template (typically Default product, but some stores may have multiple)
4. Under Template, you should be able to see a list of elements such as Title and Price; these are sections currently added to your Product page's template. The default title for the main customizable Product page section is Product information.
5. At the bottom of  Product information (may be a different label if not using a Dawn 2.0 based Shopify theme), click Add block, and then Apps to find the "Skio Subscriptions" app block option.
6. Click the Skio Subscriptions option to add the Skio app block to the Product page section.
7. Drag the Skio Subscriptions block to be directly under the other Variant picker block, or wherever you would like it displayed on the page.
8. The Skio Subscription block shows a few checks to ensure that the data from the page is being loaded into the Skio element properly. If any of those fields (except for Variant Change Detection) shows a red X instead of a green checkmark, please check the Form ID field option inside of the Skio Subscriptions block's settings. The Form ID value should match the actual ID of the Add to cart form on the Shopify theme's Product page. You can find the Product page's Add to cart form ID using this documentation.
   1. If the Form ID has been confirmed as matching the ID of the "add to cart" form on the product page and you still have more than 1 red X, please reach out to help@skio.com for assistance.
   2. If only the Variant Change Detection check is red, you need only to try switching variants on the page to test that variant detection is working as needed. If your store doesn't offer any variants / you don't have a "Variant picker" element set up, you can skip this step / ignore this check.
9. Copy / styling customizations can be made within the Skio Subscriptions block's settings
10. Make sure to click "Save" at the top-right of the screen to save your changes.
11. You should now be able to see the Skio Subscriptions Plan Picker on all product pages that use the selected Product page template and feature a Skio selling plan option!

Here is a video walkthrough of the process, showing how to add the "Skio Subscriptions" app block inside the Shopify theme Customizer tool:

Here's how to confirm that the "Skio Subscriptions" app block is working as expected on your Shopify theme / Product page: