Integrate CPB with Pagefly

This articles explains how to use Custom product builder if you are building your product pages with PageFly

To add the Custom product builder to the PageFly, you need to press "Add element" and select type of the content as HTML / Liquid. Add this block anywhere you need on the page.

On the right side press: Open Code editor

Add the following code:

{% comment %} == BEGIN CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}

{% if product.type == 'cpb_product' %}

{% assign productId = product.id | append: '' %}

{{ '//cdn.shopify.com/s/assets/external/app.js' | script_tag }}
{{ 'https://cdn.thecustomproductbuilder.com/dist/latest/custom-product-builder.js' | script_tag }}
{{ 'https://cdn.thecustomproductbuilder.com/dist/latest/customizer-theme-main.js' | script_tag }}
{{ 'customproductbuilder.css' | asset_url | stylesheet_tag }}

<div
id="product-builder"
data-engine="shopify"
data-shop-name="{{shop.permanent_domain}}"
data-product-id="{{productId}}"
data-styles-path="{{'customproductbuilder.css' | asset_url }}"
data-config-path="{{product.metafields.customproductbuilder['configurableUrl']}}"
data-cpb-user-id="{{customer.id}}"
data-customer-id="{{customer.id}}"></div>

{{ 'customproductbuilder.css' | asset_url | stylesheet_tag }}
{{ 'customproductbuilder.js' | asset_url | script_tag }}

{% endif %}

{% comment %} == END CUSTOM PRODUCT BUILDER GENERATED CODE. DO NOT EDIT OR REMOVE. == {% endcomment %}