---
title: "How to integrate the Skio Plan Picker with page builder apps"
slug: "integrating-with-page-builders-gempages-pagefly-shogun-replo-ecomposer-instant-zipify"
updated: 2025-11-21T20:49:38Z
published: 2025-11-21T20:49:38Z
canonical: "help.skio.com/integrating-with-page-builders-gempages-pagefly-shogun-replo-ecomposer-instant-zipify"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://help.skio.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to integrate the Skio Plan Picker with page builder apps
Skio's Plan Picker integrates with popular page builders like [GemPages](https://apps.shopify.com/gempages), [PageFly](https://apps.shopify.com/pagefly), [Shogun Page Builder,](https://apps.shopify.com/shogun)[Replo](https://apps.shopify.com/alchemy), [Ecomposer](https://apps.shopify.com/ecomposer), [Instant](https://apps.shopify.com/instant-builder), and [Zipify](https://apps.shopify.com/zipifypages). This guide walks you through the setup process for each platform.
## Before you start
- [ ] You'll need access to your Shopify theme code for most integrations
- [ ] For some page builders, you'll need developer support or custom development
- [ ] Make sure you're working in a duplicate theme before making changes to your live theme
## GemPages
### Step 1: Add Skio files to your theme
1. Open the [Skio Plan Picker repository](https://github.com/skio-org/skio-plan-picker)
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:
```plaintext
{% render 'skio-block', product: product, debug: false %}
```
1. Save and publish the page
2. Refresh your page to see the plan picker
## PageFly
### Step 1: Add Skio files to your theme
1. Open the [Skio Plan Picker repository](https://github.com/skio-org/skio-plan-picker)
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 .png)
5. Click **Open Code Editor** in the right sidebar
6. Paste the following
```plaintext
{% render 'skio-block', product: product, debug: false %}
```
1. Save and publish the page
2. 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:
```plaintext
```
> In the example above, `{{ inputProductHandle }}` is a dynamic variable. Shogun's editor will recognize this and let you choose a data type for it.
1. Select the appropriate data type for your input (e.g., product handle) .png)
2. 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) .png)
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 .png)
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** .png)
5. Choose the appropriate selling plan .png)
6. Save and publish your page
> For additional help, check out [Skio's subscription integration documentation](https://docs.instant.so/en/articles/9418581-creating-product-subscriptions).
## Zipify
Zipify offers two options for building product pages: **Full customization** and **Partial customization**.
.png)
### 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.
> [!TIP]
> **Recommended workaround:** Use Skio's [direct checkout links](/help/docs/checkout-link-builder) 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 .png)
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
> [!WARNING]
> **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.
---
### FAQ
#### In Gempages, when I select a variant, the prices in the plan picker don't update. How do I fix this?
This happens when the plan picker doesn't catch the variant change event. To fix it, replace the following line in `skio-plan-picker-component.js`:
`this.variantInput.addEventListener('change', e => { this.selectedVariant = this.product.variants.find(variant => variant.id == e.target.value); this.variantChanged = true; })`
With this: `this.form.addEventListener('change', e => { this.selectedVariant = this.product.variants.find(variant => variant.id == this.variantInput.value) this.variantChanged = true })`
####
####
#### Where can I find Skio's plan picker code and documentation?
The plan picker code is publicly available with implementation documentation on [GitHub](https://github.com/skio-org/skio-plan-picker).
The Skio Plan Picker is the subscription widget that displays on your product detail pages, allowing customers to choose between one-time purchases and subscription. The settings are configured in your **Selling Plans.**
Your Skio Dashboard is the backend view of Skio where you manage your subscription program. This is the page you see when you log in to the Skio app, and it's where you'll configure products, view customer data, adjust settings, and access analytics to monitor your subscription performance.