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

# Comment utiliser le panier sur le côté sur PageFly ?

Wide Hello!

On va voir dans cet article comment faire pour ouvrir le panier sur le côté sur PageFly lorsqu'un client ajoute une offre WideBundle à son panier.

Avant de commencer, vous devez savoir qu'il est nécessaire d'avoir un panier sur le côté, que ce soit par votre thème ou grâce à une application.

WideBundle ne créera pas un panier sur le côté lui-même.

C'est parti !

Si vous préférez avoir les explications en vidéo vous pouvez la regarder juste ici 👇

${youtube}[Tutoriel vidéo](p98UezSV-9o)

### 1) Ajoutez le sélecteur de variantes, le bouton ajout-au-panier et le sélecteur de quantité

La première étape consiste à ajouter différents éléments sur PageFly qui sont nécessaires au bon fonctionnement du panier sur le côté. WideBundle a besoin de se synchroniser avec les éléments suivant: Le sélecteur de variantes, le bouton quantité, le bouton ajout-au-panier.

Une fois qu'ils sont ajoutés, WideBundle se chargera de les détecter et de les cacher automatiquement pour ne pas qu'ils apparaissent en double avec WideBundle !

1. Ouvrez votre page sur PageFly sur laquelle vous faites apparaître WideBundle
2. Cliquez sur la gauche sur l'icône "Elements" puis "Shopify"

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

3. Cliquez sur le bloc "Product Variants" pour le sélecteur de variantes, puis glissez le deuxième module juste au-dessus de WideBundle

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/nov-14-2022-00-00-02_ufjzoc.gif)

4. Cliquez sur le bloc "Product Add To Cart" pour le bouton ajout-au-panier, puis glissez le premier module juste au-dessus de WideBundle

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/nov-14-2022-00-01-34_hhpe2w.gif)

5. Cliquez sur le bloc "Product Quantity" pour le sélecteur de quantité, puis glissez le premier module sous le sélecteur de variantes (au dessus du bouton ajout-au-panier)

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/nov-14-2022-00-02-47_y8tedf.gif)

### 2) Configurez votre bouton ajout-au-panier pour ouvrir le panier sur le côté

Maintenant il va falloir configurer le bouton ajout-au-panier de PageFly pour ouvrir le panier sur le côté.

On va ensuite s'assurer que le bouton ajout-au-panier ouvre bien le panier sur le côté sans WideBundle.

1. Cliquez sur le module du bouton ajout-au-panier que vous avez ajouté
2. Mettez l'action "Rester sur la même page" après le clic sur le bouton ajout-au-panier

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

3. Sauvegardez et Publiez votre page.

### 3) Testez l'ouverture du panier sur le côté sans WideBundle

On va maintenant s'assurer que le panier sur le côté s'ouvre bien sans WideBundle avant de continuer.

1. Ouvrez l'application WideBundle
2. Désactivez l'affichage de WideBundle pour quelques minutes (afin de tester l'ouverture du panier sur le côté sans WideBundle)

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

3. Rendez-vous sur votre page produit et ouvrez la page produit sur laquelle vous avez ajouter le sélecteur de variante, le bouton ajout-au-panier ainsi que le sélecteur de quantité
4. Essayez d'ajouter le produit au panier et voyez si le panier sur le côté s'ouvre bien comme configuré

|| 💡 Si le panier sur le côté ne s'ouvre pas en ayant bien fait toutes les étapes précédentes, contactez PageFly pour avoir de l'assistance, il doit y avoir un problème qui n'est pas lié à WideBundle.

### 4) Configurez WideBundle pour ouvrir le panier sur le côté

1. Retournez sur l'application WideBundle
2. Activez de nouveau WideBundle

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

3. Depuis WideBundle, cliquez sur **Paramètres & Design** dans le menu de gauche

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/click-parametres-design_1wqh5f0.png)

4. Cliquez sur la section "Bouton Ajout-au-panier"

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/click-atc-page-parametres_swedn.png)

5. Changez la redirection du bouton ajout au panier et mettez "Panier sur le côté"

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

Et voilà !

Vous pouvez à nouveau tester mais il ne devrait pas y avoir de problème