Integrating with page builders (GemPages, PageFly, Shogun, Replo)

Introduction

Apps like GemPages, PageFly, Shogun Page Builder and Replo provide interfaces through which you can build pages but integrating 3rd party apps like Skio into them can get tough. This short tutorial will guide you through the integration of our plan picker to mentioned apps.

Prerequisites

1. For page builders that have a Liquid component in their library, Skio's Liquid Plan Picker files should be in the live theme.
2. Page builders that don't offer a Liquid component need to leverage Skio's Universal Plan Picker. Please ask our team to send it to you and provide documentation.
3. For cases when the plan picker is needed outside the product form, Skio's Universal Plan Picker is required.

GemPages

1. Open GemPages dashboard
2. Select your page
3. In the elements sidebar on the left, search for "Liquid":

   

4. Drag and drop the Liquid component to the product form
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-plan-picker' %}
7. Save, publish and refresh the page. Done!

   

PageFly

1. Open PageFly dashboard
2. Select your page
3. On the leftmost sidebar of the editor, click on the "+" icon. Search for "Liquid"

   

4. Drag and drop the element to the product form
5. Click on "Open Code Editor" button on the right sidebar
6. Copy and paste the following to the editor:
   
   {% render 'skio-plan-picker' %}
7. Save, publish (if needed) and refresh your page. Done!

Shogun Page Builder

This is a bit more complex as SPB doesn't store data in your theme and therefore doesn't have access to Liquid. This integration requires Skio's Universal Plan Picker (SUPP) to be imported to the page either globally (with a conditional check against the URL) or directly from the custom element itself via script tag with SUPP uploaded to the Files of the store.

1. Open Shogun PB dashboard
2. Click on "Advanced" on the top navigation bar (https://app.getshogun.com/advanced)
3. Click on "New Custom Element" on the right
4. In the Liquid editor, drop the SUPP along with other elements (if needed)
   Example SUPP with an add to cart button:

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

   Note that in the example above, we used {{ inputProductHandle }}. SPB's editor will understand that inputProductHandle is a dynamic variable and let you choose a data type for it.
5. Select the right data type for your input:

   

6. Save the custom element and go to your page
7. Search for your element in the right sidebar (as you named it earlier)

   

8. Drag and drop the element where you need it
9. Fill the input data on the right (it is the product handle in our case)
10. Save, publish and refresh your page. Done!

Replo

1. Open Replo dashboard and select your project
2. Select your page
3. On the left sidebar select "Components" and search for "Liquid" in the component library
4. Drag and drop the component to a product box
5. In the code editor, copy and paste the following:
   
   {% render 'skio-plan-picker' %}
6. Save, publish (if needed) and refresh your page. Done!

   

For developers

Most page builders save their data as Liquid code chunks in the live theme. As previewing and debugging in the live theme is not the best idea, a workaround is using a comment placeholder in the places where the plan picker is required. Then, after saving and publishing, you can find and replace it with the actual plan picker in a duplicate theme.