---
title: "PageFly pre-orders integration"
slug: "pagefly-pre-orders-integration"
date: "2022-05-20T12:56:12+00:00"
modified: "2026-05-05T04:46:53+00:00"
author: "Eliza"
canonical: "https://preproduct.io/docs/pagefly-pre-orders-integration/"
---

> Use PreProduct to take pre-orders from your PageFly-generated pages.

### About PageFly

[PageFly](https://pagefly.io/) helps businesses of all sizes create and publish custom Shopify pages. From small businesses to Shopify Plus brands, PageFly provides the tools to design high-quality pages.

### Requirements

Before setting up pre-orders on PageFly pages:

1. Both PageFly and PreProduct installed via the [Shopify app store](https://apps.shopify.com/preproduct)
2. Only one PreProduct element is allowed per product page

### Steps in PreProduct

[Set up a product](https://preproduct.io/docs/listing-a-new-product/) for pre-order in PreProduct:

1. Navigate to PreProduct and click the ‘New Listing’ option from the top menu
2. Search for the product you would like to list and click it
3. You will now be on the main listing creation screen. From here you can configure your pre-order listing
4. Click ‘Create listing’

### Steps in PageFly

In your PageFly editor:

1. Go to the Integrations section
2. Search for PreProduct
3. Enable the PreProduct element

![enabling PreProduct integration](https://preproduct.wpengine.com/wp-content/uploads/2022/05/pagefly_1.gif)

### Adding a PageFly Pre-order Button to Your Page

1. From your PageFly app, choose your product page
2. From the left-hand side ‘third-party elements’ section, search for the PreProduct element
3. Drag and drop the PreProduct element on to your page, so that it’s close to the add-to-cart button.
4. Save and Publish your page

**Note:** PreProduct will only be visible when viewing a published page.

![add via Pagefly editor](https://preproduct.wpengine.com/wp-content/uploads/2022/05/pagefly_3.gif)