How to integrate the Skio Plan Picker with page builder apps

Skio's Plan Picker integrates with popular page builders like  GemPages, PageFly, Shogun Page Builder, Replo, Ecomposer, Instant, and Zipify. This guide walks you through the setup process for each platform.

GemPages

Step 1: Add Skio files to your theme

1. Open the Skio Plan Picker repository

2. Copy skio-block.liquid and paste it into the snippets folder of your live theme

3. Copy skio-plan-picker-component.js and paste it into the assets folder of your live theme

Step 2: Add the plan picker to your page

1. In your Skio Dashboard, go to Apps > GemPages

2. Select the page where you want to add the plan picker

3. In the elements sidebar on the left, search for Custom Code

4. Drag and drop the Custom Code element into your desired location within the product section

5. Right-click on the added section and select Edit code

6. In the template tab of the editor, copy and paste the following:

{% render 'skio-block', product: product, debug: false %}

7. Save and publish the page

8. Refresh your page to see the plan picker

PageFly

Step 1: Add Skio files to your theme

1. Open the Skio Plan Picker repository

2. Copy skio-block.liquid and paste it into the snippets folder of your live theme

3. Copy skio-plan-picker-component.js and paste it into the assets folder of your live theme

Step 2: Add the plan picker to your page

1. Open the PageFly dashboard

2. Select the page where you want to add the plan picker

3. On the leftmost sidebar of the editor, click the + icon

4. Search for Liquid and drag the element into your product form
   

5. Click Open Code Editor in the right sidebar

6. Paste the following

{% render 'skio-block', product: product, debug: false %}

7. Save and publish the page

8. Refresh your page to see the plan picker

Shogun Page Builder

Shogun Page Builder requires Skio's Universal Plan Picker (SUPP) because it doesn't store data in your theme and doesn't have access to Liquid. This integration is more complex and may require developer support.

Step 1: Create a custom element

1. Open the Shogun Page Builder dashboard

2. Click Advanced in the top navigation bar

3. Click New Custom Element on the right

4. In the Liquid editor, add the SUPP along with any other elements you need

Example with an add to cart button:

<skio-plan-picker productHandle="{{inputProductHandle}}" />
<button onclick="document.querySelector('skio-plan-picker').addToCart(1)">Add to Cart</button>

In the example above, {{ inputProductHandle }} is a dynamic variable. Shogun's editor will recognize this and let you choose a data type for it.

5. Select the appropriate data type for your input (e.g., product handle)
   

6. Save the custom element

Step 2: Add the element to your page

1. Navigate to your page in Shogun

2. Search for your custom element in the right sidebar (using the name you assigned earlier)
   

3. Drag and drop the element where you want it to appear

4. Fill in the input data on the right (e.g., the product handle)

5. Save and publish your page

6. Refresh to see the plan picker

Replo

Step 1: Add the Subscribe & Save component

1. Open the Replo dashboard and select your project

2. Select the page where you want to add the plan picker

3. In the left sidebar, select Components and search for Subscribe & Save in the component library

4. Drag and drop the component into a product box

Ecomposer

Step 1: Add the Selling Plans component

1. Open the Ecomposer dashboard and access the page where you want to sell subscriptions

2. In the Elements section, drag the Selling Plans component into your page
   

3. Save and publish your page

Instant

Step 1: Configure the subscription button

1. Inside Instant, select the button you want to use to trigger the subscription purchase
   

2. Navigate to the interaction panel on the right side of the canvas

3. Under the Actions section, click Cart Actions

4. Open the Cart Actions menu and select Selling Plan
   

5. Choose the appropriate selling plan
   

6. Save and publish your page

For additional help, check out Skio's subscription integration documentation.

Zipify

Zipify offers two options for building product pages: Full customization and Partial customization.

Full customization

Full customization completely replaces your theme's templates with Zipify's own templates. Zipify doesn't include an out-of-the-box plan picker in its component library, so integrating Skio's plan picker requires custom development work.

Recommended workaround: Use Skio's direct checkout links to add products to cart without developer involvement.

Partial customization

Partial customization preserves your theme's header, footer, and main product section while allowing you to add Zipify sections.

Step 1: Add the plan picker through the theme editor

1. In your Skio Dashboard, navigate to Online Store > Themes

2. Click Customize on your live theme

3. Select the product template for the product you've assigned in Zipify

4. Add Skio's plan picker app block to the product section
   

5. Save your changes

For developers

Most page builders save their data as Liquid code chunks in the live theme. Since previewing and debugging in the live theme isn't ideal, use this workaround:

1. Add a comment placeholder where the plan picker is needed

2. Save and publish in the page builder

3. Find and replace the placeholder with the actual plan picker code in a duplicate theme

Important: The code in your live theme and the state in your page builder must always stay in sync. Any edits made in the page builder may overwrite your custom code.