> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.widebundle.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use WideBundle with PageFly?

**Hello WideFamily!** 😁

If you are using PageFly, the way to install WideBundle is a bit different than a classic theme.

So let's see how to do it!

Make sure you've followed the tutorial to get started with WideBundle beforehand (if you haven't, [click here](https://help.widebundle.com/en/article/getting-started-with-widebundle-9zb0t0/))

Then come back to this article when you are asked to do so.

Are you ready? Let's get started!

If you prefer to watch a video you can do it by clicking here 👇

${frame}[](https://www.loom.com/embed/3ede749c088e4fa6bb2cafc8008dd300)

## Introduction

Download PageFly with this special link [here](https://pagefly.io/?ref=YSKvjeP9&target=app-listing). Then use the code **PFWide35** in the PageFly app to get a 35% discount on all the PageFly plans thanks to WideBundle!
---

## Open the product page on PageFly

Start by opening the product page you are interested in on PageFly

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_ifs24i.png)

## Add the variants selector

* Click on **Add Shopify Element** then **Product Variant** and drag and drop the 2nd module on your product page. This step is important for WideBundle to synchronize with PageFly!

The variants selector will then be hidden by WideBundle.

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_1kas3bp.png)

## Add the Add to Cart button

* Click on **Add Shopify Element** then **Product Add to Cart" and drag and drop the 1st module on your product page. The button will then be hidden by WideBundle.

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_i56mgr.png)

## Add the WideBundle module

* Click on **Add a 3rd party element**.

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_1jwxsy6.png)

* Click on **Edit your 3rd party elements** (or on the little cogwheel if the button does not appear)

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_114yqu3.png)

* Search for **WideBundle** and **enable it** !

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_q2g5au.png) 

* Close this popup and you will see the WideBundle module appear in your 3rd party elements

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_16thedz.png)

* Click on the **WideBundle module** and then move **Bundle Offer** to your page where you want WideBundle to appear

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/may-19-2022-12-21-19_5p206z.gif)

## Save and exit

And that's it! Everything is installed, you can now save the page and publish it.

Then, go back to the tutorial "Getting started with WideBundle" if you were reading it

See you soon! 😁