Setting up the Skio Plan Picker (Customizer options available)

This documentation is intended for Agency Partners, who are setting up the Skio Plan Picker for Shopify themes utilizing Online Store 2.0 / app blocks. If you are not sure if this applies to you or have any questions, please reach out to help@skio.com!

Overview

• Setup explanation

• Files explanation

• Steps to take

Setup Explanation

The new-and-improved version of the Skio Plan Picker is built to utilize Online Store 2.0's Customizer tool to allow for codeless customizations to be made to the layout, styling, and copy of the Skio Plan Picker. This is achieved by dropping a Skio snippet file into the Product page's main section file (typically sections/main-product.liquid) in order to utilize the Sections and Blocks functionality. We will also need to update the Schema of the Product section file, and finally make sure that everything is working as expected in the Customizer tool.

Files Explanation

There are 2 files needed to set this up: assets/skio-plan-picker-component.js and snippets/skio-app-block.liquid. The snippet file will be the one rendered inside of the main section block loop, and the asset file is included in the snippet file and gets passed all of the block settings via the snippet file. At the bottom of the snippet file is the required schema for adding the Skio Plan Picker to the section file's Customizer settings.

Steps to add Skio Plan Picker to Shopify theme

1. Make sure you've added the assets/skio-plan-picker-component.js and snippets/skio-app-block.liquid files to your store's theme codebase.
   
   
2. Navigate to the sections/main-product.liquid file (or otherwise search your theme codebase for the line "for block in section.blocks", which is the Liquid code for looping through the section blocks).
   
   
3. Find the "for block in section.blocks" loop, and then look for the {%- case block.type -%} conditional statement; this is checking what kind of block is being accounted for.
   
   
4. After the first 'when' statement (ex. {%- when '@app' -%} ) and right before the next 'when' statement, paste the following (which can be found at the top of snippets/skio-app-block.liquid): 
   

   {% when 'skio-plan-picker' %} {% render 'skio-app-block', block: block, product: product %}

5. Now search the file for '@app', and there should be a mention of it that looks like this in the section file's schema: 
   
   
   {

   "type": "@app"

   },
   
   We'll want to copy the Skio Plan Picker's schema settings at the bottom of the snippets/skio-app-block.liquid file and paste them immediately after the schema settings for the '@app' block. Make sure to add a comma at the end of the Skio schema if there are additional settings in the section file schema to ensure that the JSON doesn't throw an error.
   
   
6. Once the above steps are complete, open the Shopify Customizer tool and navigate to the Product page. On the left-hand side of the page, click "Add block" and select the "Skio Plan Picker" block. Once that's been added, clicking on it should show additional configuration settings on the right-hand side of the page. IMPORTANT: make sure that the "Form ID" field is properly configured for your Product page's "Add to cart" form.
   
   
7. That's it! Please feel free to review this documentation that discusses the Customizer settings in more detail: Customizing the Skio Plan Picker via the Customizer Tool .