# Comment créer un effet parallaxe sur une boutique shopify

{% hint style="info" %}
Disponible depuis la [version 1.6](https://www.docs.shopiweb.fr/theme-premium/documentation/sections/pages/P3fDeYBZbtOaDG7gRaJh#version-1.6.0). Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour.md).
{% endhint %}

<figure><img src="/files/zqHnXHXrJAdb9VkPfoew" alt="La section PARALLAXE DEFILANTE du thème shopify SHOPIWEB PREMIUM rend fixe le background et permet de faire défiler lors du scroll des diaporama transparents dans lesquels il y a des blocs de texte comprenant un titre et un paragraphe."><figcaption><p>La section PARALLAXE DÉFILANTE</p></figcaption></figure>

### Comment utiliser la section PARALLAXE DÉFILANTE de SHOPIWEB PREMIUM

Le thème SHOPIWEB PREMIUM offre une large gamme d'outils de personnalisation pour votre site e-commerce Shopify. L’un des plus puissants est l’**effet parallaxe** de la section PARALLAXE DEFILANTE. Cet effet donne une impression de profondeur en faisant défiler l’arrière-plan à une vitesse différente de celle des éléments au premier plan. Dans cet article, nous allons vous guider à travers l’utilisation de la section PARALLAXE DÉFILANTE pour **créer un site web moderne** et engageant.

{% hint style="success" %}
**AVANT DE COMMENCER :** Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, [commandez une licence SHOPIWEB PREMIUM](https://www.shopiweb.fr).
{% endhint %}

### Qu’est-ce que l’effet Parallaxe ?

L’effet parallaxe est une technique de **web design** qui consiste à créer une illusion de profondeur grâce à un décalage de défilement entre différents calques visuels. Lorsqu'un utilisateur fait défiler la page, certains éléments se déplacent à une vitesse différente, ajoutant un **effet de mouvement** fluide et attirant. Cette technique est particulièrement populaire pour les pages d’accueil et les sections visuellement riches qui souhaitent capter l’attention.

### La particularité de la section PARALLAXE DÉFILANTE du thème SHOPIWEB PREMIUM

Si vous aimez les **effets d’animation** du site Apple®, vous allez adorer la section PARALLAXE DÉFILANTE de SHOPIWEB PREMIUM. Pendant que l’utilisateur fait **scroller** son écran, l’arrière plan (image ou vidéo) reste fixe et des paragraphes avec titres défilent. Vous pouvez ajouter plus d’une dizaine de diapositives permettant de mettre en valeur votre copywriting. Il suffit de quelques minutes seulement pour personnaliser cette **section no-code**.

#### Apprenez à créer un effet parallaxe sur Shopify en suivant notre tuto en vidéo

{% embed url="<https://youtu.be/AQZmse9rmLU>" %}

### Configuration de la Section Parallaxe

<figure><img src="/files/MjgVQlZCB8kr99srQEXX" alt="Depuis l&#x27;interface de personnalisation du thème, cliquez sur &#x22;Ajouter une section&#x22; depuis la colonne située à gauche de l&#x27;écran, puis sélectionnez la section &#x22;Parallaxe défilante&#x22;."><figcaption><p>L'ajout de la section PARALLAXE DÉFILANTE depuis l'interface de personnalisation du thème shopiweb sur Shopify®.</p></figcaption></figure>

#### Ajouter la section à votre page Pour ajouter la section PARALLAXE DÉFILANTE dans SHOPIWEB PREMIUM, suivez ces étapes :

1. Accédez à l’éditeur de thème Shopify.
2. Cliquez sur « Ajouter une section ».
3. Sélectionnez la section Parallaxe Défilante dans la liste.
4. Cliquez sur « Ajouter » et la section apparaîtra immédiatement sur la page.

<figure><img src="/files/ZGiBC0jiJSMuBS7eFP2m" alt="Sélectionnez la section pour faire apparaître les options de personnalisation vous permettant de personnaliser le background du parallaxe."><figcaption><p>Les options de personnalisation de la section</p></figcaption></figure>

#### Importer et configurer l’image de fond

Votre image d’**arrière-plan** (image ou vidéo) est un élément clé de l’**effet parallaxe**. Pour obtenir un rendu optimal, suivez ces recommandations :

* **Taille de l’image :** Assurez-vous que l'image a une résolution assez élevée (généralement autour de 1920 pixels de large) pour maintenir une bonne qualité sur les grands écrans.
* **Format :** Les formats **JPEG** ou **PNG** fonctionnent bien pour les images de fond. Vous pouvez aussi utiliser des **GIFs** (images animées) et même une **video** pour un effet plus dynamique.
* **Les effets d’image :** Ajoutez un **effet bokeh** grâce à l’option OVERLAY et il est aussi possible de flouter le visuel à l’aide du réglage FLOU.

#### Activer l’effet de parallaxe

L’effet de parallaxe va s’activer automatiquement lorsque vous ajouterez un slide. Seul ces éléments seront en mouvement pendant le défilement. L’arrière plan restera fixe.

### Comment ajouter et personnaliser un slide&#x20;

Sous la section PARALLAXE DÉFILANTE apparaissent par défaut 3 slides (ou diaporama). Vous pouvez les supprimer en cliquant sur l'icône "Poubelle" situé à droite ou en ajouter d'autres en cliquant sur "Ajouter slide".

<figure><img src="/files/KpG9ZcFp7Q7a9c8e1Is1" alt="Sélectionnez le slide pour voir apparaître les options de personnalisation."><figcaption><p>La personnalisation d'un slide de la section PARALLAXE DEFILANTE</p></figcaption></figure>

Pour personnaliser votre slide, sélectionnez-le pour voir apparaître les options de personnalisation. Vous pourrez ainsi ajouter le titre et le paragraphe qui défilera lors du **défilement** de l'utilisateur.

#### Optimisation pour mobile et responsive design

L'un des avantages de SHOPIWEB PREMIUM est qu'il est entièrement **responsive**. Cela signifie que l'effet parallaxe s’adapte automatiquement aux différents types d’écrans et de navigateurs, y compris les terminaux **mobiles** et les **tablettes**. Il est important de vérifier la prévisualisation sur mobile pour s'assurer que l'image et l'effet de parallaxe fonctionnent bien sur tous les terminaux, et ne ralentissent pas le **temps de chargement** de la page.

Le thème vous permet d’importer une image ou une vidéo spécialement conçu pour le **format mobile**. Pour réaliser un montage vidéo facilement et sans connaissance technique, vous pouvez utiliser l’outil Canva®. Ce même outil gratuit vous permet également de retoucher chaque image que vous souhaitez utiliser pour votre effet parallaxe. **Canva®** est beaucoup plus facile à utiliser que les outils de la suite **Adobe Photoshop** et **Illustrator**.

### Astuces pour un effet Parallaxe réussi

* **Images de fond :** Choisissez des images avec une bonne luminosité et un contraste suffisant pour que le texte reste lisible. Si ce n’est pas le cas, vous pouvez ajuster l’**opacité** à l’aide du réglage OVERLAY et ajouter du **flou** avec FLOU.
* **SEO et performance :** Assurez-vous que vos visuels sont optimisés pour le web afin de ne pas ralentir le temps de chargement. Utilisez des balises ALT appropriées pour améliorer votre référencement sur les **moteurs de recherche**. Ces balises sont particulièrement utiles pour les personnes mal voyantes utilisants un lecteur d’écran.
* **Effet bokeh :** Si vous utilisez Photoshop ou un autre logiciel de **retouche photo**, vous pouvez ajouter un **effet bokeh** (flou artistique) sur votre image de fond pour mettre davantage en avant votre contenu. Et si vous ne voulez pas vous prendre la tête, le thème gère ces effets depuis les options OVERLAY et FLOU, ce qui est un gain de temps considérable.
* **Expérience utilisateur :** Pour améliorer l’**UX** de votre site internet, l’effet parallaxe de la section SHOPIWEB PREMIUM effectue les **transitions** entre chaque **diaporama** d’une façon très fluide. Vos clients vont pouvoir découvrir les avantages de votre produit dans les meilleures conditions.

***Félicitations, vous avez réussi à ajouter et personnaliser la section PARALLAXE DÉFILANTE du thème SHOPIWEB PREMIUM.***

#### Avec SHOPIWEB PREMIUM, créer un effet de parallaxe est simple et intuitif.

Cette fonctionnalité vous permet de donner vie à votre **site internet** en ajoutant de la profondeur et du **mouvement** à vos **pages web**. Que vous soyez un **développeur** expérimenté, un **designer** ou une graine d’**e-commerçant**, les options proposées dans ce thème vous permettent de personnaliser facilement votre site tout en offrant une excellente **expérience utilisateur**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.docs.shopiweb.fr/theme-premium/documentation/sections/comment-creer-un-effet-parallaxe-sur-une-boutique-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.