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

Outline: 

• Overview
• Gempages
• Pagefly
• Shogun
• Replo
• Ecomposer
• Instant
• For developers

Overview:

Apps like GemPages, PageFly, Shogun Page Builder, Replo and others 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.

GemPages

1. Open Skio Plan Picker repository - https://github.com/skio-org/skio-plan-picker
2. Copy skio-block.liquid and paste it to the snippets folder of your live theme
3. Copy skio-plan-picker-component.js and paste it to the assets folder of your live theme
4. From your Shopify dashboard, go to Gempages dashboard
5. Select your page
6. In the elements sidebar on the left, search for "Custom Code":
7. Drag and drop the component to your desired place within Product section
8. Right click on the added section and select "Edit code"
9. In the template tab of the editor copy and paste the following:
   
   {% render 'skio-block', product: product, debug: false %}
   
   
10. Save, publish and refresh the page. Done!

Common errors:

• When I select a variant, the prices in the plan picker are not updating.
  This happens due to the plan picker not catching the variant change event.
  To fix this, 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 the following:

  this.form.addEventListener('change', e => {
    this.selectedVariant = this.product.variants.find(variant => variant.id == this.variantInput.value)
    this.variantChanged = true
  })

PageFly

1. Open Skio Plan Picker repository - https://github.com/skio-org/skio-plan-picker
2. Copy skio-block.liquid and paste it to the snippets folder of your live theme
3. Copy skio-plan-picker-component.js and paste it to the assets folder of your live theme
4. Open PageFly dashboard
5. Select your page
6. On the leftmost sidebar of the editor, click on the "+" icon. Search for "Liquid"

   

7. Drag and drop the element to the product form
8. Click on "Open Code Editor" button on the right sidebar
9. Paste the following:
   
   {% render 'skio-block', product: product, debug: false %}
   
   
10. Save, publish and refresh the page. Done!

Common errors:

• When I select a variant, the prices in the plan picker are not updating.
  This happens due to the plan picker not catching the variant change event.
  To fix this, 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 the following:

  this.form.addEventListener('change', e => {
    this.selectedVariant = this.product.variants.find(variant => variant.id == this.variantInput.value)
    this.variantChanged = true
  })

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 "Subscribe & Save" in the component library
4. Drag and drop the component to a product box

Ecomposer

1. Open Ecomposer dashboard and access the page where you want to sell subscriptions
2. In the "Elements" section where new components are added, drag in the "Selling Plans" component as shown below!

Instant

1. Inside of 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 on "Cart Actions."

4. Open the "Cart Actions" menu and select "Selling Plan."

5. Choose the appropriate selling plan. 

For extra help check out our subscription integration documentation.

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.