Skip to main content
All CollectionsWidget Installation
Add Subify widget in page builders apps
Add Subify widget in page builders apps

How to add Subify widget to pages you create on PageFly, GemPages, Ecomposer, etc.

Updated over 9 months ago

You can use the Subify widget SDK code to add the Subify widget to your product page template in most page builders apps.

Subify SDK code:

{% assign target_product = product %}
<script id="render-subify-widget-{{ target_product.id }}">
console.log("ecom product",{{ product | json }})

function createSubifyBlock(){
const parent = document.getElementById("render-subify-widget-{{ target_product.id }}").parentElement;
const wrapper = document.createElement("div");
wrapper.className = "subify-app-block-wrapper product-{{ target_product.id }}";
parent.appendChild(wrapper);
}
function initSubifyBlock(){
createSubifyBlock();
function renderWidget(){
const selector = ".subify-app-block-wrapper.product-{{ target_product.id }}";
subifySdk.renderWidget({{ target_product | json }},{renderPosition:{wrapper:selector}})
}
if(window.subifySdk){
renderWidget();
}else{
window.addEventListener("subify:sdkLoaded",()=>{
renderWidget();
})
}
}
initSubifyBlock();
</script>

Add Subify widget in PageFly product template:

  1. Open your product template in PageFly.

  2. From the left side menu, click on Add element.

  3. Select the HTML/Liquid element.

  4. Drag and drop the HTML element in your Product form. (preferably above your add to cart button)

  5. Select the HTML element, and From the right side menu, click on Open code editor.

  6. Paste the Subify widget SDK code into the modal and save.

  7. Make sure the template is assigned to a product that has a selling plan in Subify.

  8. Save your template.

  9. Subify's subscription widget will be added to the product template created with PageFly.
    You can then customize your widget from your Subify panel to match the look and feel of your template:

Screenshots

Add element:

Select the HTML/Liquid element.

Drag and drop the HTML element in your Product form. (preferably above your add to card button)

Select the HTML element, and From the right side menu, click on Open code editor.

Paste the Subify widget SDK code into the modal and save.

Subify's subscription widget will be added to the product template created with PageFly.

You can then customize your widget from your Subify panel, to match the look and feel of your template:

Add Subify widget in GemPages product template:

  1. Open your product template in GemPages.

  2. Make sure the template is assigned to a product that has a selling plan in Subify.

  3. From the left side menu, click on Element.

  4. Select the Custom Code element.

  5. Drag and drop the Custom Code element in your Product form. (preferably above your add to cart button)

  6. Select the Custom Code element, and from the left side menu, paste the Subify widget SDK code into the HTML modal.

  7. Save your template and Publish the template.

  8. Subify's subscription widget will be added to the published product template created with GemPages.
    You can then customize your widget from your Subify panel to match the look and feel of your template:

Screenshots

From the left side menu, click on Element:

Select the Custom Code element and drag and drop the Custom Code element in your Product form. (preferably above your add to cart button)

Select the Custom Code element, and from the left side menu, paste the Subify widget SDK code into the HTML modal:

Save your template and publish the page to view the widget.

Subify's subscription widget will be added to the product template created with GemPages. You can then customize your widget from your Subify panel to match the look and feel of your template:

Add Subify widget in Replo product template:

  1. Open your product template in Replo.

  2. Make sure the template is assigned to a product that has a selling plan in Subify.

  3. From the left side menu, click on Components.

  4. Select the Custom Code component.

  5. Drag and drop the Custom Code component in your Product form. (preferably above your add to cart button)

  6. Select the Custom Code component, and from the right side menu, click on Config.

  7. Click on Launch Code Editor.

  8. Paste the Subify widget SDK code into the Code Editor modal.

  9. Save your template.

  10. Subify's subscription widget will be added to the product template created with GemPages.
    You can then customize your widget from your Subify panel to match the look and feel of your template:

Screenshots:

From the left side menu, click on Components:

Select the Custom Code component:

Drag and drop the Custom Code component in your Product form. (preferably above your add to cart button)

Select the Custom Code component, and from the right side menu, click on Config:

Click on Launch Code Editor, and Paste the Subify widget SDK code into the Code Editor modal.

Save your template.

Subify's subscription widget will be added to the product template created with GemPages.
You can then customize your widget from your Subify panel to match the look and feel of your template:

Did this answer your question?