PageFly pagebuilder (options)

Our app is integrated and can be used directly inside PageFly pagebuilder.

Product details

Inside Pagefly, make sure to have an element of type Product details in your page outline:

Most product templates already contain this element, but if not you can always add it from the left side bar:

Live Product Options Element

Inside Pagefly, click on the 3rd party element menu icon:

Next click on the Settings icon next to the search bar:

Search for the integration: live

Make sure that the integration is activated with the toggle switch:

Close the Integrations popup and select the 3rd party menu icon on the left. Now you should see the Live Product Options element, select it and drag the element on the page on your desired location:

The element should now show on your outline, you can move it at your desired location:

Note: to configure the options you have to go back into the Live Product Options app, there you can select on which products the options should appear.

Form validation validation

The add to cart button executes the add to cart process right aways and skips our apps validation flow. To let our app know that the add to cart button was clicked, we can apply an attribute on the button element.

In the page outline select the Product add to cart element:

Next, on the right sidebar, click on the Attributes section and them click on More settings:

Click on Add new item, and add the following attribute: data-live-validate

Save and publish the template, now the form validation should work as intended.