> ## 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).

# Utiliser WideBundle avec PageFly

**Hello la WideFamily !** 😁

Si vous utilisez PageFly, l'affichage de WideBundle est un peu différent de l'affichage sur un thème classique.

Alors voyons comment faire !

Assurez-vous d'avoir préalablement suivi le tutoriel pour commencer avec WideBundle (si ce n'est pas le cas, [cliquez-ici](https://help.widebundle.com/fr/article/commencer-a-utiliser-widebundle-1ax2bgo/))

Puis revenez sur cet article lorsque l'on vous demande de le faire.

Vous êtes prêts ? C'est parti !

Si vous préférez regarder une vidéo plutôt que lire un article pour le tutoriel, vous pouvez le faire juste ici 👇

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

## Introduction

Téléchargez PageFly en [cliquant ici](https://pagefly.io/?ref=YSKvjeP9&target=app-listing). Utilisez ensuite le code **PFWide35** dans l'application PageFly pour obtenir une réduction de 35% sur tous les plans PageFly grâce à WideBundle !
---

## Ouvrez la page produit sur PageFly

Commencez par ouvrir la page produit qui vous intéresse sur PageFly

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

## Ajoutez le sélecteur de variantes

* Cliquez sur **Ajouter un élément Shopify** puis sur **Product Variant** et déplacez le 2ème module sur votre page produit. Cette étape est importante pour que WideBundle puisse se synchroniser avec PageFly!

Le sélecteur de variantes sera ensuite caché par WideBundle.

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

## Ajoutez le bouton Ajout au panier

* Cliquez sur **Ajouter un élément Shopify** puis sur **Product Add to Cart** et déplacez le 1er module sur votre page produit. Le bouton sera ensuite caché par WideBundle.

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

## Ajoutez le module WideBundle

* Cliquez sur **Ajoutez un 3rd party element**

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

* Cliquez sur **Editer vos 3rd party elements** (ou sur la petite roue dentée si le bouton n'apparait pas)

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

* Cherchez **WideBundle** et **activez le**

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

* Fermez le popup et vous verrez le module WideBundle apparaître dans vos 3rd party elements

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

* Cliquez sur le **module WideBundle** puis déplacez **Bundle Offer** sur votre page où vous souhaitez faire apparaître WideBundle

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

## Sauvegardez et quittez

Et voilà ! Tout est installé, vous pouvez maintenant sauvegarder la page et la publier.

Ensuite, reprenez le tutoriel "Commencer à utiliser WideBundle" si vous étiez en train de le lire

A bientôt ! 😁