> This is part 1 of 2 of the full documentation (pages 1–100 of 155).
> The content is paginated: fetch every part to see all of it.
> Next part: https://www.docs.shopiweb.fr/theme-premium/llms-full.txt/1
> Page index: https://www.docs.shopiweb.fr/theme-premium/llms.txt

# Welcome — Shopiweb Premium

Bienvenue dans la documentation officielle du thème Shopify® français : SHOPIWEB PREMIUM.

Shopiweb Premium est un thème Shopify conçu pour offrir une expérience e-commerce moderne, fluide et performante.\
Il combine design soigné, fonctionnalités avancées et grande flexibilité pour s’adapter à toutes les boutiques.\
Pensé pour maximiser les ventes, il simplifie la création d’un site professionnel et efficace.\
Que vous soyez débutant ou expérimenté, Shopiweb Premium vous aide à créer une boutique qui se démarque.

Cette documentation a pour objectif de vous guider dans l’utilisation des éléments exclusifs ajoutés dans Shopiweb Premium.

***

## Par où commencer ?

Vous venez d'acheter votre licence SHOPIWEB PREMIUM mais vous ne l'avez pas encore installée ? 

Alors voici comment y accéder :

{% content-ref url="/pages/sMiyMOpyg8R7aHs0Peyx" %}
[POUR COMMENCER](/theme-premium/pour-commencer/installation)
{% endcontent-ref %}

Suivez les étapes ci-dessus pour libérer la puissance du thème Shopify® SHOPIWEB PREMIUM. Il s’agit, à ce jour, du thème le plus complet du marché, grâce à ses plus de 100 sections, applications et blocs produits réunis au même endroit !

***

## Apprendre à utiliser le thème

***C'est bon ? Le thème est opérationnel et vous souhaitez maîtriser SHOPIWEB PREMIUM jusqu'au bout des doigts ?*** Chacun des tutoriels classés dans les catégories ci-dessous, vous présente une fonctionnalité, une section ou une application. En les lisant attentivement, vous serez capable de maîtriser le thème SHOPIWEB PROFESSIONNEL comme un véritable expert e-commerce.

Pour plus de facilité, nous avons rangé chaque tutoriel dans des catégories du même nom que ceux des menus de votre interface de personnalisation Shopify®.

{% content-ref url="/pages/ixmgYhlXj8ohxbA0FOeu" %}
[PARAMÈTRES DU THÈME](/theme-premium/documentation/parametres-du-theme)
{% endcontent-ref %}

{% content-ref url="/pages/cnirW6HzkTQr1LrQgHv8" %}
[SECTIONS](/theme-premium/documentation/sections)
{% endcontent-ref %}

{% content-ref url="/pages/b78K0BK5KbR1dMIVaLjP" %}
[METAFIELDS](/theme-premium/documentation/metafields)
{% endcontent-ref %}

{% content-ref url="/pages/tQhNOjlxZEOOw328qwMz" %}
[PAGE PRODUIT](/theme-premium/documentation/page-produit)
{% endcontent-ref %}


# Installation de Shopiweb Manager

Avant d’installer Shopiweb Premium, vous devez installer l’application officielle Shopiweb Manager sur votre boutique Shopify. Cette application permet d’activer votre licence et de gérer votre thème.

{% hint style="info" %}
**Information** 

Temps estimé : **3 à 5 minutes**

Avant de commencer, assurez-vous de disposer de : 

• une boutique Shopify active \
• votre email d’achat \
• votre numéro de commande
{% endhint %}

{% stepper %}
{% step %}

### Étape 1 — Acheter votre thème Shopiweb

Rendez-vous sur :

{% embed url="<https://shopiweb.fr>" %}

Après votre achat, vous recevez un **email de confirmation** contenant :

* votre **email d’achat**
* votre **numéro de commande**

Exemple :\
Commande #1042

Ces informations seront nécessaires pour **vérifier votre licence dans l’application Shopiweb Manager**.

***

{% endstep %}

{% step %}

### Étape 2 — Créer une application Shopify

Dans l’administration de votre boutique Shopify, allez dans :

**⚙️ Paramètres**\
→ Applications et développer des applications\
→ développer des applications dans le Dev Dashboard

Cliquez sur :\
**Créer une application**

Nom de l’application :

```
Shopiweb Manager
```

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/8PwJtuq0nWZ7T1lxWjI2/image" alt=""></div>

Cliquez sur :\
**Créer**

***

{% endstep %}

{% step %}

### Étape 3 — Configurer l’application

Configurez votre application avec les paramètres suivants :

<table><thead><tr><th>Paramètre</th><th>Valeur</th></tr></thead><tbody><tr><td><strong>Nom de l’application</strong></td><td><pre><code>Shopiweb Manager
</code></pre></td></tr><tr><td><strong>URL de l’application (App URL)</strong></td><td><pre><code>https://app.shopiweb.fr
</code></pre></td></tr><tr><td><strong>Intégrer l’application dans l’interface administrateur Shopify</strong></td><td>Oui (cocher)</td></tr><tr><td><strong>URL des préférences (facultatif)</strong></td><td>—</td></tr><tr><td><strong>Version de l’API des webhooks</strong></td><td>2026-01</td></tr><tr><td><strong>Champs d’accès requis (Scopes)</strong></td><td><pre><code>write_theme_code,read_themes,write_themes
</code></pre></td></tr><tr><td><strong>Champs d’accès facultatifs</strong></td><td>Aucun</td></tr><tr><td><strong>Utiliser le flux d’installation hérité</strong></td><td>Non (décocher)</td></tr><tr><td><strong>URLs de redirection</strong></td><td><pre><code>https://app.shopiweb.fr/api/auth/callback
</code></pre></td></tr><tr><td><strong>POS</strong></td><td>—</td></tr></tbody></table>

Une fois la configuration terminée, cliquez sur :\
**Publier**

Une fenêtre de confirmation apparaît.

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/HXZOON4nc3ORTuPekPsO/image" alt=""></div>

Cliquez de nouveau sur :\
**Publier**

***

{% endstep %}

{% step %}

### Étape 4 — Installer l’application Shopiweb Manager

Une fois votre application configurée et publiée, vous devez installer **Shopiweb Manager** sur votre boutique Shopify.

#### Méthode 1 — Installer depuis la page de l’application (recommandée)

Dans la plupart des cas, vous pouvez installer l’application directement depuis la page d’accueil de votre application Shopify.

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/koqeBMUmp3v6jOGS6bFp/image" alt=""></div>

Cliquez simplement sur :\
**Installer l'application**

Shopify ouvrira automatiquement la page d’installation.

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/FkqxWzsuMDZyx2hU0EIh/image" alt=""></div>

Cliquez ensuite sur :\
**Installer**

L’application **Shopiweb Manager** est maintenant installée sur votre boutique Shopify.

***

#### Méthode 2 — Générer un lien d’installation (mode développeur)

Si vous êtes en **mode développeur** ou si vous ne voyez pas le bouton **Installer l'application**, vous pouvez générer un lien d’installation.

Dans votre application Shopify, allez dans :

**Distribution**\
→ Sélectionner le mode de distribution

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/GzxNarWiG0S6ke2DUOAi/image" alt=""></div>

Sélectionnez :\
**Distribution personnalisée**

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/0PBkwerVV98FUJAOIRgQ/image" alt=""></div>

Cliquez sur :\
**Sélectionner**

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/3geqfNnI2cX3aC7A2kiQ/image" alt=""></div>

Puis sur :\
**Générer un lien**

Shopify générera un **lien d’installation sécurisé**.\
Copiez ce lien et ouvrez-le dans un nouvel onglet pour installer l’application.

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/2f3PNCfEfZTa0rFf4DHr/image" alt=""></div>

Cliquez ensuite sur :\
**Installer**

L’application **Shopiweb Manager** est maintenant installée sur votre boutique Shopify.

***

{% endstep %}

{% step %}

### Étape 5 — Connecter votre boutique

Après l’installation, l’application s’ouvre automatiquement.\
Une fenêtre **Étape 1 sur 3 : Connexion Shopify requise** apparaît.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FQt4hDfr8nuEQTsgrz0U2%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2011.47.17.png?alt=media&amp;token=0715ac83-9493-48b9-b4b7-ef8a95e4f5a7" alt=""><figcaption></figcaption></figure></div>

* **Client ID**
* **Secret**

***

#### Récupérer les identifiants API

Retournez dans votre application Shopify :

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FWyJOpCstPOtn9uxEgfzy%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2011.51.05.png?alt=media&amp;token=665e5969-506b-4118-b1d2-1ef0b7bd232a" alt=""><figcaption></figcaption></figure></div>

**Paramètres**\
→ Encart **Identifiants**

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/Ql1YZxVlNfIY3rCjDs7y/image" alt=""></div>

Copiez :

* **ID client**
* **Secret**

Revenez ensuite dans **Shopiweb Manager** et collez ces informations.

Cliquez sur :\
**Installer**

***

### Étape 6 — Vérifier votre achat

Après l’installation, l’application ouvre une deuxième fenêtre.\
Une fenêtre **Étape 2 sur 3 : Vérifiez votre achat** apparaît.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FWrhei3Mi0p6BOPk0shGn%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2011.53.45.png?alt=media&amp;token=d75963d8-efde-4da1-ba2c-98b14100ac4c" alt=""><figcaption></figcaption></figure></div>

Dans la section **Vérifier votre achat**, renseignez :

**Email d’achat**\
Adresse email utilisée lors de votre achat sur **shopiweb.fr**

**Numéro de commande ou référence**\
Numéro indiqué dans votre email de confirmation. (ex. #1234)

Cliquez sur :\
**Vérifier mon achat**

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F7OvDywPoJ7MkUFcJ1ZIA%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2012.05.14.png?alt=media&amp;token=1bbdf208-70dc-41cc-b72d-51f63bd517b3" alt=""><figcaption></figcaption></figure></div>

Puis cliquez sur :\
**Continuer**

***

{% endstep %}

{% step %}

### Étape 7 — Ajouter l’icône de l’application

{% hint style="info" %}
**Astuce** — Ajouter une icône permet d’identifier plus facilement l’application dans l’administration Shopify.
{% endhint %}

Une fois la connexion réussie, une fenêtre **Optionnel : personnaliser l’icône de l’app** apparaît.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fq1TS8OYcp3ZqiRnh6PYT%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2012.08.03.png?alt=media&amp;token=c6b935f5-6873-4a5b-92c7-99d591b1d8ad" alt=""><figcaption></figcaption></figure></div>

Cliquez sur :\
↓ **Télécharger l'icône**

***

#### Ajouter l’icône dans Shopify

Retournez dans votre application Shopify :

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FZcrNdTFQlPZKZICtzLdU%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2012.12.47.png?alt=media&amp;token=8fa3d5f3-9460-4329-85d7-d779f60cef9d" alt=""><figcaption></figcaption></figure></div>

**Paramètres**\
→ Encart **Icône de l’application**

<div data-with-frame="true"><img src="https://content.gitbook.com/content/U04y3nhEi7BOPySOeTqn/blobs/hXf9Lss4RAZYlgu6rhsr/image" alt=""></div>

Cliquez sur :\
**Charger une icône**

Importez ensuite l’icône précédemment téléchargée.

***

{% endstep %}
{% endstepper %}

#### **Important**

{% hint style="warning" %}
**Shopiweb Manager est obligatoire**

Sans cette application, il n’est pas possible de :

* activer votre licence
* installer le thème
* recevoir les mises à jour
  {% endhint %}

***

#### **Besoin d’aide ?**

Si vous rencontrez un problème lors de l’installation, notre support est disponible :

📩 <support@shopiweb.fr>


# Activer la licence Shopiweb Premium

Avant de pouvoir installer Shopiweb Premium, vous devez activer votre licence via l’application Shopiweb Manager.

Cette étape est obligatoire pour associer votre licence à votre boutique Shopify et débloquer l’accès au thème.

***

### Pourquoi activer la licence ?

L’activation permet de :

* lier Shopiweb Premium à votre boutique
* débloquer les fonctionnalités premium
* accéder à l’installation du thème
* recevoir les mises à jour officielles

📌 Une licence correspond à une boutique Shopify.

***

{% stepper %}
{% step %}

### Étape 1 — Accéder à vos licences

1. Connectez-vous à Shopify
2. Ouvrez l’application **Shopiweb Manager**
3. Rendez-vous dans la rubrique **Licences**

Vous verrez une ou plusieurs licences disponibles selon vos achats.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FPb6kexncyVmHxYVH32Or%2FCapture%20d%E2%80%99e%CC%81cran%202026-05-20%20a%CC%80%2012.22.22.png?alt=media&amp;token=80af9482-b603-4786-87bd-df23eb97f7a5" alt=""><figcaption></figcaption></figure></div>

***

{% endstep %}

{% step %}

### Étape 2 — Activer la licence

1. Cliquez sur **Activer la licence**
2. La licence est alors associée à votre boutique

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F1a4dolWzZc7Yop4ivBPA%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-06%20a%CC%80%2015.38.51.png?alt=media&amp;token=19211f70-800a-4bd7-93f9-0c326c30b09b" alt=""><figcaption></figcaption></figure></div>

Une fois activée, vous débloquez automatiquement l’accès à la rubrique **Thèmes** dans Shopiweb Manager.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FsPjb8GolFfGowkhZeITM%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-06%20a%CC%80%2015.39.07.png?alt=media&amp;token=ea02451c-c863-4236-8cd9-9ea41892652d" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

***

#### Besoin d’aide ?

Si vous rencontrez un problème lors de l’activation, notre support est disponible :

📩 <support@shopiweb.fr>


# Installation de Shopiweb Premium

Une fois l’application Shopiweb Manager installée et votre licence activée, vous pouvez installer Shopiweb Premium sur votre boutique Shopify.

L’installation se fait directement depuis Shopiweb Manager, en quelques clics.

{% stepper %}
{% step %}

### Étape 1 — Accéder à l’onglet Thèmes

1. Connectez-vous à Shopify
2. Ouvrez l’application **Shopiweb Manager**
3. Cliquez sur la rubrique **Thèmes**

📌 Cet onglet est disponible uniquement après activation de votre licence.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FfSgc0nhtLeg7lysQWZ6i%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-06%20a%CC%80%2015.39.07.png?alt=media&amp;token=0aa8bec1-a47e-46f9-be96-81b1f61eda3b" alt=""><figcaption></figcaption></figure></div>

***

{% endstep %}

{% step %}

### Étape 2 — Installer Shopiweb Premium

Dans l’onglet Thèmes :

* Cliquez sur **Ajouter**
* L’installation se lance automatiquement sur votre boutique

Une fois terminé, le thème apparaît dans votre bibliothèque Shopify.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FqjsdTXQUmMfm9YDoBfEU%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-09%20a%CC%80%2011.37.21.png?alt=media&amp;token=6d74f9ad-aa0e-4e53-a85b-dae62237adee" alt=""><figcaption></figcaption></figure></div>

***

{% endstep %}

{% step %}

### Étape 3 — Publier le thème dans Shopify

Après installation :

1. Allez dans **Boutique en ligne → Thèmes**
2. Repérez Shopiweb Premium dans la liste
3. Cliquez sur **Actions → Publier**

Shopiweb Premium devient alors le thème actif de votre boutique.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FuS6G0iuSWfM6XIbCDkOc%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-09%20a%CC%80%2011.40.28.png?alt=media&amp;token=a8bdd895-0f85-4ef0-96fa-3ccdf63c1722" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

***

#### Besoin d'aide ?

Si vous rencontrez un problème lors de l’installation, notre support est disponible :

📩 <support@shopiweb.fr>


# Mises à jour de Shopiweb Premium

Une fois l’application Shopiweb Manager installée et votre licence activée, vous pouvez mettre à jour Shopiweb Premium sur votre boutique Shopify.

Grâce à l’application **Shopiweb Manager**, vous pouvez mettre à jour votre thème facilement tout en conservant une installation propre.

***

### Pourquoi mettre à jour Shopiweb Premium ?

Les mises à jour permettent de :

* bénéficier des dernières sections premium
* corriger des améliorations techniques
* rester compatible avec les évolutions Shopify
* profiter des nouveautés Shopiweb Premium

📌 Nous recommandons de toujours utiliser la dernière version disponible.

***

{% stepper %}
{% step %}

### Étape 1 — Accéder à la rubrique Mises à jour

1. Connectez-vous à Shopify
2. Ouvrez l’application **Shopiweb Manager**
3. Cliquez sur la rubrique **Thèmes**
4. Rendez-vous dans l'encart **Mettre à jour un thème**

Vous verrez la version actuelle installée ainsi que les nouvelles versions disponibles.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FZ8Fp7cdLMMfZR6rMa6yU%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-06%20a%CC%80%2015.39.07.png?alt=media&amp;token=3b680165-0ce8-4d2c-95b3-6bbcda666859" alt=""><figcaption></figcaption></figure></div>

***

{% endstep %}

{% step %}

### Étape 2 — Lancer la mise à jour du thème

Lorsque qu’une nouvelle version est disponible :

* **Sélectionnez le thème Shopiweb Premium** que vous souhaitez mettre à jour dans la liste des thèmes installés.
* Cliquez sur **Mettre à jour Shopiweb Premium**
* Patientez pendant l’opération

Shopiweb Manager va alors :

* **dupliquer automatiquement le thème sélectionné**
* **conserver tous vos réglages et personnalisations**
* **installer la nouvelle version du thème sur cette copie**

Aucune action technique n’est nécessaire.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FXpSMa7KlwOYmdvO3GOsq%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-09%20a%CC%80%2012.17.22.png?alt=media&amp;token=0dd4a27a-d20b-45c7-afc5-530f4fb6ef2b" alt=""><figcaption></figcaption></figure></div>

***

{% endstep %}

{% step %}

### Étape 3 — Vérifier votre thème après mise à jour

Après la mise à jour :

* le **nouveau thème est ajouté dans votre bibliothèque de thèmes**
* vos **réglages et sections sont conservés**
* vous pouvez accéder aux **nouvelles fonctionnalités**

Nous recommandons de vérifier rapidement :

* la **page d’accueil**
* les **pages produits**
* les **sections principales**

Une fois la vérification effectuée, vous pouvez **publier la nouvelle version du thème si vous le souhaitez**.

<div data-with-frame="true"><figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FWAmAYxzd9RSmA35FUtQ6%2FCapture%20d%E2%80%99e%CC%81cran%202026-03-09%20a%CC%80%2012.19.16.png?alt=media&amp;token=ee9d8b9c-7fbd-4e19-95ed-f2fcf6daa849" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

***

#### Besoin d’aide ?

Si vous rencontrez un problème lors de la mise à jour, notre support est disponible :

📩 <support@shopiweb.fr>


# Shopiweb Premium

Bienvenue dans le Thème Premium Shopify de Shopiweb !

Bienvenue dans une nouvelle ère de la conception de boutiques en ligne, où chaque détail compte et chaque expérience utilisateur est soignée avec précision. Le Thème Shopiweb Premium est bien plus qu'un simple habillage pour votre site ; c'est une transformation complète, pensée pour maximiser vos ventes tout en offrant à vos clients une navigation fluide et mémorable.

Conçu avec passion et une attention inégalée aux détails, Shopiweb Premium combine esthétique moderne, fonctionnalités avancées et flexibilité pour s'adapter à toutes les niches commerciales. Que vous soyez un débutant en e-commerce ou un vétéran aguerri, ce thème est conçu pour répondre à vos besoins et surpasser vos attentes.

Plongez dans l'univers de Shopiweb Premium, et découvrez comment nous redéfinissons les standards du design e-commerce. 🌟

### Aperçu vidéo

Vous avez 2 minutes ? Découvrez notre thème en vidéo :

{% embed url="<https://vimeo.com/850576489?share=copy>" %}
Boutique Demo Shopiweb Premium
{% endembed %}

{% hint style="success" %}
**Boutique Demo :** Métamorphosez votre boutique en ligne en une merveille envoûtante grâce au thème Shopiweb Premium ! Découvrez la boutique démo en cliquant sur le lien suivant : [https://demo.shopiweb.fr/](https://demo.shopiweb.fr)
{% endhint %}


# Achat du thème

Vous ne savez pas comment acheter le meilleur thème Shopify® français ? Ce tutoriel va vous montrer comment faire.

Achetez dès maintenant le thème e-commerce N°1 du marché francophone.

**SHOPIWEB PREMIUM est le seul thème qui inclut 41 VRAIES applications et + de 100 fonctionnalités qui vont vous permettre de créer des boutiques professionnels rapidement et à moindre coût.**

👉 Toutes les applications et fonctionnalités sont inclus avec votre licence

👉 Aucun abonnement à payer, les applications vous appartiennent et sont intégrées au thème

👉 1 licence SHOPIWEB PREMIUM est vendue au prix de 399 €

👉 Pour 2 licences achetées, la 3ème est offerte soit le pack de 3 licences au prix de 798 €

👉 Pour 7 licences achetées, la 8ème, 9ème et la 10ème sont offertes soit le pack de 10 licences au prix de 2793 €

👉 Mise à jours gratuites inclus

👉 Chaque licence est valable à vie

### Acheter sa licence SHOPIWEB PREMIUM

👉 Rendez-vous sur le site officiel <https://www.shopiweb.fr> ou cliquez [ici](https://www.shopiweb.fr)

👉 Choisissez la formule qui vous intéresse (1 ou 3 ou 10 licences)

👉 Remplissez le bon de commande

👉 Effectuez le paiement avec la CB de votre choix

👉 Téléchargez le thème depuis votre espace membre SHOPIWEB MANAGER accessible depuis le lien envoyé par e-mail après confirmation de votre paiement

Pour apprendre à bien installer et activer votre licence, rendez-vous dans la suite de notre guide accessible en cliquant sur le bouton NEXT ci-dessous 🤓


# Nos Fonctionnalités

Le thème Shopify "Shopiweb Premium" est à la fois robuste et doté de nombreuses fonctionnalités.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F2TIk5ptg9TZRLBHBrE74%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-08%20a%CC%80%2014.20.14.png?alt=media&amp;token=9f89e2d9-837f-4f9b-8789-5bc1ad6d1aa5" alt=""><figcaption><p>Shopiweb Premium</p></figcaption></figure>

### **Caractéristiques de Shopiweb Premium**&#x20;

c'est un thème Shopify robuste et multifonctionnel, adapté à toutes sortes de boutiques en ligne. Il offre notamment :

* **Adaptabilité** : Visualisation optimale sur tous les appareils, du PC au smartphone.
* **Personnalisation de la page d'accueil** : Créez un accueil distinctif avec nos sections modifiables.
* **Filtres de recherche** : Les clients peuvent filtrer les produits par différents critères comme le prix, la marque, etc.
* **Feedback client** : Un système d'avis intégré pour que les clients notent et commentent les produits.
* **Multidevise** : Facilite les transactions internationales.

Il y a bien plus à découvrir avec Shopiweb, l'allié des petites et grandes entreprises pour une boutique en ligne prospère.

### **Sections Optimisées pour la Conversion**

* Mode sombre, Contrôles des frontières, Blogging, Barre d'annonces, Images avec cartes, Formulaire de contact, Vidéos YouTube & Vimeo, Newsletter, Caractéristiques Shopify 2.0, Ventes croisées, Ventes incitatives, Intégrations produit, Badges de produits, FAQ, Suggestions de produits, Listes de souhaits, Créateurs de paquets, Comparaisons d'images, Options de remplissage, Navigation hors-toile, Polices spéciales, Liquide pour pages produits, Réglages d'arrière-plan, Animations, Zoom sur produits, Tableaux produits, Images parallax, Onglets de produits, Carrousels, Accordeons en pied de page, Textes enrichis, Listes d'images, Vidéos Interne, Galerie TikTok, Galerie Instagram, Abonnements, Annonces programmées, Recherches vocales.

### **Expertise du Produit**

* [Fil d'Ariane](/theme-premium/documentation/sections/ajouter-un-fil-dariane-sans-code-sur-shopify), Collections, Recherche prédictive, Recherche et vente incitative, Recherches de blogs, Ventes incitatives, Filtrages avancés, Vues récentes, Méga menus, Micro menus, Formulaires personnalisés, Menus de produits, Offres spéciales.

### **Spécificités du Panier**

* Chariot coulissant, Seuils du panier, Ventes incitatives, Notes sur le panier, Icônes de paiement, Suggestions de produits, Tiroirs d'expédition, Bloc Témoignages de panier, case à cocher pour la protection des colis.

### **Caractéristiques des Collections**

* Filtrage direct, Bannières d'images, Changements d'images au survol, Échantillons de couleurs, Options d'ajout au panier, Remplissages variés.

{% hint style="info" %}
**Mises à Jour Prochaines : Nouvelles Sections en Approche !** De nouvelles sections seront ajoutées progressivement. Restez à l'écoute pour des mises à jour et des améliorations continuelles.
{% endhint %}


# MISE EN PLACE

<details>

<summary>Step1: Acheter une ou plusieurs Licence</summary>

</details>

<details>

<summary>Step 2: Installer le thème Shopiweb Premium</summary>

</details>

<details>

<summary>Step 3: Activer la Licence Shopiweb Premium</summary>

</details>

<details>

<summary>Step 4: Accepter la demande de collaboration</summary>

</details>


# Installation du thème

Le tutoriel ci-dessous vous montre comment installer le thème SHOPIWEB PREMIUM sur votre boutique Shopify®.

{% hint style="info" %}
**PRÉ-REQUIS :** Vous devez avoir une licence du thème SHOPIWEB PREMIUM active et installée sur votre boutique e-commerce. Si ce n’est pas encore le cas, vous pouvez en commander une depuis [cette page](https://www.shopiweb.fr).
{% endhint %}

**Merci de suivre les étapes suivantes pour installer en quelques minutes le thème SHOPIWEB PREMIUM :**&#x20;

* Connectez-vous à votre espace membre SHOPIWEB en cliquant [ici](https://theme.shopiweb.fr/dashboard/fr/login)
* Depuis votre tableau de bord, entrez dans la formation SHOPIWEB PREMIUM
* Allez dans le menu TÉLÉCHARGEMENT DU THÈME
* Cliquez sur le bouton TÉLÉCHARGER LE THÈME SHOPIWEB PREMIUM
* Un fichier .Zip se télécharge
* Une fois le téléchargement terminé, connectez-vous à votre boutique Shopify®
* Depuis votre Tableau de bord Shopify®, cliquez sur le menu BOUTIQUE EN LIGNE > THÈMES
* Dans BIBLIOTHÈQUE DE THÈMES cliquez sur AJOUTER UN THÈME > METTRE EN LIGNE UN FICHIER COMPRESSÉ
* Une fois la mise en ligne terminée, votre thème SHOPIWEB PREMIUM est maintenant installé sur votre boutique Shopify®
* À présent, il ne vous reste plus qu'à activer votre licence SHOPIWEB PREMIUM en installant au préalable l'application SHOPIWEB MANAGER. Apprenez comment faire en suivant le tutoriel suivant.

### Retrouvez l'ensemble des étapes dans la vidéo explicative 👇

{% embed url="<https://vimeo.com/854634617/72315cf120?share=copy>" %}
Vidéo tutoriel pour apprendre à installer le thème SHOPIWEB PREMIUM sur une boutique Shopify®
{% endembed %}


# Installation de l'application Shopiweb Manager

L’application SHOPIWEB MANAGER est une exclusivité SHOPIWEB. Elle vous permet d’activer et désactiver vos licences SHOPIWEB PREMIUM. Vous pouvez également effectuer le suivi de vos installations et ré

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Ff1SgsJyllS232BHZ6jVs%2FPresentation-shopiweb-manager.jpg?alt=media&amp;token=ee7fa89e-b929-44de-bdee-6f2bfcd97aff" alt="Capture d&#x27;écran de l&#x27;interface de l&#x27;application SHOPIWEB MANAGER"><figcaption><p>L'application SHOPIWEB MANAGER vous permet de gérer vos boutiques Shopify® créées avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% hint style="info" %}
**PRÉ-REQUIS :** Vous devez avoir une licence du thème SHOPIWEB PREMIUM active et installée sur votre boutique e-commerce. Si ce n’est pas encore le cas, vous pouvez en commander une depuis [cette page](https://www.shopiweb.fr).
{% endhint %}

La suite du tutoriel expliqué ci-dessous est disponible également dans la vidéo située en bas de cette page.

### Depuis le tableau de bord Shopify®

* Cliquez sur PARAMÈTRES > APPLICATIONS ET CANAUX DE VENTE.
* Cliquez ensuite sur le bouton DÉVELOPPER DES APPLICATIONS situé en haut de l’écran puis, sur le bouton noir CRÉER UNE APPLICATION.
* Acceptez les autorisations que vous demande Shopify®.
* Une fenêtre popup s’affiche. Dans le champ NOM DE L’APPLICATION, inscrivez : Shopiweb Manager. Dans le champs DÉVELOPPEUR D’APPLICATION, sélectionnez votre nom. Terminez en cliquant sur CRÉER UNE APPLICATION.
* Une nouvelle interface s’affiche. Rendez-vous dans l’onglet IDENTIFIANTS D’API. Dans l’encadré JETONS D’ACCÈS, cliquez sur le bouton CONFIGURER LES CHAMPS DE L’API ADMIN.
* Dans la barre de recherche, inscrivez THEME. Cochez les cases WRITE\_THEMES ET READ\_THEMES. Terminez en cliquant sur le bouton SAUVEGARDER.
* Maintenant, cliquez sur l’onglet IDENTIFIANTS D’API. Depuis l’encadré JETONS D’ACCÈS, cliquez sur le bouton noir INSTALLER L’APPLICATION. Une popup s’ouvre, cliquez sur INSTALLER.
* Votre JETON D’ACCÈS À L’API DE L’INTERFACE UTILISATEUR a bien été créé !
* Dans le champs, vous voyez une suite de signe caché par des points. À droite du champs il y a un lien vous indiquant : RÉVÉLER LE JETON UNE FOIS.
* ATTENTION : Vous ne pouvez pas cliquer plusieurs fois sur le lien. Il est donc crucial de bien noter ce jeton d’accès après l’avoir révélé.
* Préparez une note ou un document dont vous seul aurez accès pour y coller le jeton après avoir cliqué sur le lien RÉVÉLER LE JETON UNE FOIS.
* Dans votre document, indiquez les informations suivantes :
  * NOM DE LA BOUTIQUE
  * CLÉ API
  * CLÉ SECRÈTE DE L’API
  * JETON D’ACCÈS
* Une fois votre document créé, cliquez sur RÉVÉLER LE JETON UNE FOIS puis copiez-le dans votre document. Complétez ensuite les autres informations du document qui, elles, sont accessibles quand vous le souhaitez.
* La CLÉ API et la CLÉ SECRÈTE se trouvent en bas de votre page, dans l’encadré CLÉ API ET CLÉ SECRÈTE. Copiez ces informations et ajoutez-les à votre document.

FÉLICITATIONS ! L’application SHOPIWEB MANAGER est correctement installée sur votre boutique Shopify®.

### Que faire si vous ne pouvez plus révéler le jeton ?

Pas de panique, désinstallez l’application et recommencez le processus.

### Découvrez les détails dans le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/914753936/82123fc0ab?share=copy>" %}
Vidéo tutoriel pour apprendre à installer l'application SHOPIWEB MANAGER sur une boutique Shopify®
{% endembed %}


# Activation de la Licence

Le tutoriel suivant vous explique comment activer votre licence SHOPIWEB PREMIUM.

Depuis votre tableau de bord Shopify®, cliquez sur BOUTIQUE EN LIGNE > THÈMES > puis sur le bouton PERSONNALISER du thème SHOPIWEB PREMIUM préalablement installé.

* Une fois la fenêtre de personnalisation ouverte, une popup vous demande d'activer votre licence. Cliquez sur le bouton vert ACTIVER MA LICENCE
* Votre navigateur peut vous demander votre autorisation pour être redirigé sur une autre page. Si c'est le cas, cliquez sur OK
* Une nouvelle page s'ouvre. C'est le formulaire de connexion à votre espace membre SHOPIWEB.
* Entrez votre email d'achat ainsi que votre mot de passe. Si vous ne vous souvenez plus de votre mot de passe, cliquez sur MOT DE PASSE OUBLIÉ ?
* Une fois connecté à votre espace personnel, cliquez sur Licence SHOPIWEB PREMIUM
* Ensuite, cliquez sur ACTIVATION DE LICENCE
* Indiquez votre adresse email d'achat dans le premier champ
* Dans le deuxième champ, entrez votre URL myshopify.com

{% hint style="danger" %}
**ATTENTION :** Votre URL .myshopify.com n'a rien à voir avec votre nom de domaine. Pour trouver votre URL .myshopify.com, rendez-vous dans votre tableau de bord Shopify® puis, dans la barre d'adresse vous trouverez : admin.shopify.com/store/LENOMDEVOTRESHOP/themes. Copiez LENOMDEVOTRESHOP
{% endhint %}

* De retour dans votre espace membre SHOPIWEB, collez dans le deuxième champ LENOMDEVOTRESHOP suivi de : .myshopify.com
* Indiquez votre clé secrète de l'API dans le troisième champ
* Indiquez votre jeton d'accès à l'API dans le quatrième champ
* Cliquez ensuite sur le bouton vert ACTIVER MA LICENCE
* Un message de confirmation vous indiquera que votre licence est bien activée
* Retournez sur votre boutique Shopify®, rafraichissez la page et vous verrez la popup d'activation disparaître
* Vous pouvez commencer à utiliser le thème SHOPIWEB PREMIUM 🥳

Pour suivre ces étapes en vidéo, voici un tutoriel complet :&#x20;

{% embed url="<https://vimeo.com/914774807/e6ad2e60e0?share=copy>" %}
Vidéo pour apprendre à activer une licence du thème SHOPIWEB PREMIUM sur une boutique Shopify®
{% endembed %}


# Collaboration Shopiweb

Autorisations de collaborateur pour Shopiweb

{% hint style="info" %}
**Collaboration:** Shopiweb soumettra une demande d'accès à votre magasin afin d'effectuer des mises à jour cruciales pour le thème Shopiweb Premium.
{% endhint %}

Vous pouvez octroyer un accès aux Partenaires Shopify, tels que Shopiweb, à votre interface administrateur Shopify en utilisant des comptes collaborateurs. Ces partenaires peuvent se connecter via leur propre tableau de bord partenaire ou grâce à l'application Shopify. Les droits attribués aux comptes collaborateurs assurent que les Partenaires n'accèdent qu'aux parties de votre boutique que vous souhaitez qu'ils voient. De plus, ces comptes collaborateurs ne sont pas inclus dans le quota de comptes d'employés de votre boutique.

Seuls le propriétaire de la boutique ou les employés dotés de la permission "Gérer les requêtes de collaborateurs" peuvent voir ou approuver les demandes d'accès collaborateur. Lorsqu'un partenaire Shopify, tel que Shopiweb, envoie une demande d'accès à votre boutique, un e-mail vous est envoyé et une notification apparaît sur votre page d'accueil Shopify.

<details>

<summary>Qu'est-ce qu'un collaborateur ?</summary>

Un collaborateur est un partenaire Shopify avec un accès autorisé à votre boutique. Bien qu'ils aient un rôle semblable à celui des employés, ils présentent des bénéfices additionnels. Les collaborateurs peuvent se connecter via leur propre tableau de bord partenaire et leur accès peut être révoqué depuis l'interface administrateur de votre boutique. De plus, leur présence n'influe pas sur le quota d'employés de votre boutique.

</details>

<details>

<summary>Comment accorder un accès à Shopiweb ?</summary>

Lorsque Shopiweb sollicite un accès pour collaborer à votre boutique, vous avez la possibilité de consulter cette demande. Pour l'accepter ou la refuser, rendez-vous dans l'interface administrateur Shopify, puis allez dans **Paramètres > Utilisateurs et autorisations > Collaborateurs.**

</details>

<details>

<summary>Puis-je réguler l'accès d'un collaborateur à certaines applications et canaux ?</summary>

Oui. Lors de l'approbation de l'accès, vous avez la possibilité d'attribuer aux collaborateurs les mêmes droits que ceux définis pour les employés. Si un collaborateur sollicite l'accès à votre boutique, il ne verra que l'option pour demander l'accès aux applications, sans avoir la visibilité sur la liste des applications déjà installées dans votre boutique.

</details>


# Assistance Technique

Profitez d'une assistance technique 7J/ 7 😌

### Rejoignez dès maintenant notre Groupe Facebook® Privé.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F0TOtQ1DCj3esXU1yPxZ7%2FFacebook%20(1).png?alt=media&amp;token=118e57fb-4b00-4353-85d2-14dec8d89026" alt=""><figcaption></figcaption></figure>

**Vous rencontrez des difficultés dans la création de votre boutique ? Vous n'arrivez pas à changer la couleur d'un bouton ? Vous avez besoin d'avoir l'avis d'autres utilisateurs SHOPIWEB ?** Posez vos questions dans notre groupe Facebook® et l'un des membres de la communauté SHOPIWEB vous réponds dans la journée. Gagnez du temps et sortez enfin des impasses 💪

{% embed url="<https://www.facebook.com/groups/133448203019703>" %}
Rejoindre le groupe privé Facebook
{% endembed %}


# Support Premium

LES SERVICES SHOPIWEB

### **ENFIN, UN SUPPORT À LA HAUTEUR DE VOS AMBITIONS.**

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FULncN6IfxBnWROhiYUlO%2FA_V1.png?alt=media&amp;token=7c534f12-e7b4-41f8-bf38-188da8787ab0" alt=""><figcaption><p>Support Premium Shopiweb</p></figcaption></figure>

***L’EXTENSION DE SUPPORT SHOPIWEB est un service haut de gamme pour vos boutiques e-commerce Shopify® conçues avec le thème SHOPIWEB PREMIUM. Finis les pannes, un agent dédié intervient sur votre boutique. Retrouvez enfin votre sérénité :)***

{% embed url="<https://theme.shopiweb.fr/support-premium>" fullWidth="true" %}
Souscrire au Support Premium
{% endembed %}


# PARAMÈTRES DU THÈME


# ÉCOSYSTÈME DU THÈME

Pour bien utiliser votre nouvel outil de création de boutique e-commerce, vous avez besoin de comprendre avec quelle logique SHOPIWEB PREMIUM a-t-il été conçu.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FAnqtXJumkQv7ybv8qrT8%2FCapture-ecran-ecosysteme-shopiweb-premium.png?alt=media&amp;token=084efcf4-2e63-4de6-9ebc-932ee6a95cae" alt="Capture d&#x27;écran d&#x27;un tableau de bord Shopify® pour personnaliser le thème français SHOPIWEB PREMIUM"><figcaption><p>Tableau de bord Shopify® pour accéder à la personnalisation du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

### Ce que vous devez savoir

Sur une boutique Shopify®, le thème est l’outil qui vous permet de rendre votre boutique esthétique. Vous ne créez donc pas une boutique sur un thème, mais sur la plateforme Shopify® et vous utilisez un thème pour mettre en forme l’esthétique de votre site.

Les produits, les pages, les variables, les articles de blog, les modules de paiement, vos prospects, etc., toutes ces informations sont régies depuis votre interface Shopify®.

### Comment fonctionne le thème SHOPIWEB PREMIUM ?

Depuis votre tableau de bord, cliquez sur BOUTIQUE EN LIGNE > THÈMES > puis sur le bouton PERSONNALISER de la version installée du thème.

Contrairement aux autres thèmes, SHOPIWEB PREMIUM intègre déjà des dizaines de sections avancées préconfigurées (qui ne nécessitent pas de codes) ainsi que des applications. Ces différences sont importantes pour vous, car elles vous permettent de concevoir rapidement des boutiques e-commerce professionnelles pour vous ou vos clients. De plus, elles rendent votre site plus rapide et facile à paramétrer, parce que vous restez toujours dans la même interface (la personnalisation du thème). Personnalisez une section et vous saurez toutes les paramétrer.

Pour prendre en main le thème SHOPIWEB PREMIUM et découvrir par quelles étapes commencer pour le paramétrer en fonction des besoins de votre projet, suivez le tutoriel ci-dessous.

### Le tutoriel vidéo👇

{% embed url="<https://youtu.be/tUKaoW4N_6c>" %}
Vidéo explicative pour comprendre L'ÉCOSYSTÈME dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}


# CODE PERSONNALISÉ

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# COULEURS

Le réglage des couleurs dans le menu PARAMÈTRES DE THÈME vous permet d'ajouter facilement votre charte graphique.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Le tutoriel vidéo suivant vous montre pas à pas comment intégrer rapidement votre charte graphique à votre thème SHOPIWEB PREMIUM.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

De cette manière, vous pourrez personnaliser facilement chacune de vos sections en respectant l'identité de votre marque.

Regardez la vidéo ci-dessous pour découvrir comment faire.

{% embed url="<https://vimeo.com/856401173?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser les COULEURS dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}

{% hint style="info" %}
Version 1.3.0
{% endhint %}

#### **Mise à jour 1.3.0 - Nouveauté : Couleur Tertiaire**

Dans la version 1.3.0, nous avons ajouté une option de couleur supplémentaire appelée "Tertiaire". Cette mise à jour vous offre plus d'options de personnalisation. Profitez de cette nouvelle fonctionnalité pour une expérience encore plus riche !


# STYLE

Personnaliser le Favicon, le Rayon des bordures, les SVG sous-titre, les Boutons et les Panneaux coulissant.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Vous aimeriez personnaliser votre panier coulissant ? Changer la taille des lettres de vos boutons ? L'arrondis de vos images ? Vos SVG sous les titres ?***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Si oui, le tutoriel suivant va vous expliquer comment fonctionnent ces personnalisations.

Le menu STYLE dans les PARAMÈTRES DE THÈME vous permet de régler ces différentes options :&#x20;

* Le Favicon
* Le Rayon des Bordures (images, boutons, cartes, listes déroulantes)
* Les SVG sous-titre (Choisissez parmi 20 SVG préconfigurés rien que pour vous ou ajoutez votre propre SVG)
* Les Boutons (leurs tailles, l'espacement des lettres, la couleur)
* Les Panneaux coulissant (panier, la Wishlist, la barre de recherche, le panneau des filtres, etc.)

Pour découvrir en détail comment paramétrer votre menu STYLE, regardez la vidéo suivante enregistrée par Xavier 👇

{% embed url="<https://vimeo.com/860212412?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser l'onglet STYLE dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}

### SVG sous-titre

Voici comment intégrer et personnaliser des SVG animés sous les titres de vos sections.

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


# TYPOGRAPHIE

Personnalisez votre boutique Shopify® aux couleurs de votre branding grâce aux options de personnalisation des typographies.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Le thème SHOPIWEB PREMIUM intègre déjà plusieurs centaines de Polices appartenant au catalogue Google Fonts.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Il est possible de choisir une Police spéciale pour vos *titres* et une autre vos *corps de texte*.

**La Police de votre identité visuelle ne se trouve pas dans SHOPIWEB PREMIUM ?** Pas de problème. Le thème vous permet de télécharger vos propres Polices depuis fonts.google.com ou depuis tout autre site de fonts (attention : *valable uniquement pour les titres car ils est recommandé d'utiliser des polices simples et lisibles pour les corps de texte*).

Apprenez à personnaliser facilement le menu TYPOGRAPHIE en regardant la vidéo tutoriel enregistrée par Xavier 👇

{% embed url="<https://vimeo.com/859035828?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la TYPOGRAPHIE dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}

Pour convertir votre fichier de font comme expliqué dans la vidéo ci-dessus, rendez-vous sur le l'outil en ligne gratuit suivant :&#x20;

{% hint style="info" %}
**TRANSFONTER :** Générateur CSS @font-face moderne et simple

<https://transfonter.org/>
{% endhint %}


# ANIMATIONS

{% hint style="info" %}
Version 1.0.0
{% endhint %}

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# RÉSEAUX SOCIAUX

Partagez de manière design et élégante vos réseaux sociaux.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FD5IvJwn6ONZnR3wQOdWO%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2018.18.01.png?alt=media&amp;token=1d5e71a0-bfc9-41e1-a183-a24691352b2f" alt="Exemple de liens vers les réseaux sociaux ajouté dans l&#x27;application MICRO MENU de l&#x27;en-tête d&#x27;une boutique e-commerce créée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Les liens vers les réseaux sociaux dans l'en-tête d'une boutique Shopify® avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FzbSyvdJqN4HVT3b4kTak%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2018.18.48.png?alt=media&amp;token=29bc036c-4d21-4522-bfd7-109d04cd8438" alt="Exemple de liens vers les réseaux sociaux dans le PIED DE PAGE de la boutique DEMO du thème Shopify® SHOPIWEB PREMIUM"><figcaption><p>Les liens vers les différents réseaux sociaux dans la section Pied de page d'une boutique personnalisée avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***Le thème Shopify® français SHOPIWEB PREMIUM vous permet d'afficher facilement vos différents réseaux sociaux sous forme de logos cliquables.***

Le thème gère les réseaux sociaux suivants :&#x20;

* Facebook®
* Twitter®
* Instagram®
* Pinterest®
* TikTok®
* Snapchat®
* Youtube®
* LinkedIn®
* WhatsApp®
* Email
* Discord®

Pour rediriger les utilisateurs vers vos profils, il vous suffit d'ajouter vos liens en passant par la personnalisation de votre licence SHOPIWEB PREMIUM.

**Cliquez sur PARAMÈTRES DE THÈME > RÉSEAUX SOCIAUX puis collez vos liens dans les réseaux sociaux correspondants, comme indiqué dans la capture d'écran suivante**.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F0pg0y3CQuVIh7yEtY0JT%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2018.17.00.png?alt=media&amp;token=a0ab74ab-40df-4021-a3dd-d3e9d7cb7010" alt="Capture d&#x27;écran du menu RÉSEAUX SOCIAUX dans les PARAMÈTRES DE THÈME depuis la fenêtre de personnalisation du thème SHOPIWEB PREMIUM"><figcaption><p>Personnaliser les RESEAUX SOCIAUX dans les paramètres du thème de SHOPIWEB PREMIUM</p></figcaption></figure>

### Comment permettre aux visiteurs de vous écrire un email en cliquant simplement sur le logo d'email ?

Voici l'explication 👇

{% hint style="warning" %}
**Email :** Pour insérer un lien qui permet à vos visiteurs de vous envoyer directement un e-mail, vous devez utiliser le préfixe "mailto:". C'est une norme sur le Web qui indique au navigateur de l'utilisateur qu'il doit ouvrir le programme de messagerie par défaut lorsqu'on clique sur le lien.
{% endhint %}

Le thème SHOPIWEB PREMIUM vous permet également d'ajouter vos réseaux sociaux dans un MICRO MENU design qui sera ajouté dans la section En-tête de votre boutique Shopify®. Ce menu apparaîtra seulement en version DESKTOP afin de préserver l'esthétique de votre site en version mobile.

*En version mobile, les logos de vos réseaux sociaux normalement présents dans le MICRO MENU seront ajoutés au menu principal qui s'affichera sous forme d'un panneau coulissant*.

**Besoin d'apprendre à insérer vos logos de réseaux sociaux dans un MICRO MENU ?**

Si oui, suivez le tutoriel suivant à partir de 3mn10s jusqu'à 3mn30s. Et pour tout savoir sur le MICRO MENU, regardez la vidéo entièrement.

{% embed url="<https://vimeo.com/860175987/a137da879e?share=copy&ts=191000>" %}
Vidéo tutoriel pour apprendre à ajouter un MICRO MENU sur une boutique e-commerce créée avec Shopify® et le thème français SHOPIWEB PREMIUM
{% endembed %}


# APPLICATIONS

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# Titre onglet inactif

Application affichant un appel à l'action en mouvement lorsque l'utilisateur ne consulte plus votre boutique en ligne Shopify.

{% hint style="info" %}
Disponible depuis la version 1.3. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FRGqqbyZTVdgpUwx4T3x3%2FIMAGE1_Titre-onglet-inactif.png?alt=media&amp;token=f643c12e-29e5-4a0e-8b05-7653537e6753" alt="L&#x27;application TITRE ONGLET INACTIF permet la diffusion d&#x27;un appel à l&#x27;action lorsque l&#x27;utilisateur n&#x27;est plus sur la boutique."><figcaption><p>L'application TITRE ONGLET INACTIF</p></figcaption></figure>

{% 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 %}

### COMMENT ACTIVER L'APPLICATION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FHcwtBjhaQaDdInQSeFHj%2FIMAGE2_Titre-onglet-inactif.png?alt=media&amp;token=912a1793-1876-49a6-bb9b-968a748d9d38" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur PARAMÈTRES DE THÈME puis sur APPLICATIONS"><figcaption><p>Activer l'application TITRE ONGLET INACTIF du thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur PARAMÈTRES DE THÈME > APPLICATIONS > Application Titre Onglet Inactif > puis cochez la case d'activation.

### COMMENT PERSONNALISER L'APPLICATION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FEZh6rxmPj2GQiYkNrqCp%2FIMAGE3_Titre-onglet-inactif.png?alt=media&amp;token=92621fcd-e3a0-4fd5-84db-63a2aaae476e" alt="L&#x27;application est équipée d&#x27;une case d&#x27;activation et d&#x27;un champs texte pour écrire l&#x27;appel à l&#x27;action à diffuser lorsque l&#x27;onglet de la boutique est inactif."><figcaption><p>Personnalisation de l'application TITRE ONGLET INACTIF</p></figcaption></figure>

* Écrire l'appel à l'action souhaité qui sera diffusé lorsque l'onglet de la boutique est inactif.

***Félicitations, vous avez réussi à activer et personnaliser l'application TITRE ONGLET INACTIF du thème SHOPIWEB PREMIUM.***

### L'ASTUCE

Privilégiez un appel à l'action court pour que celui-ci puisse s'afficher entièrement.

### LA VIDÉO

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


# Compte à rebours panier

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


# Objectif panier

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


# Chat WhatsApp

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FGhk71R43iLU8gAAiDKV1%2FIMAGE1-Chat-WhatsApp.png?alt=media&amp;token=1f230bcf-3f63-42ec-8fb4-454d09d9d58b" alt="Capture d&#x27;écran de l&#x27;application WhatsApp gratuite fournie avec le meilleur thème Shopify, SHOPIWEB PREMIUM"><figcaption><p>Application de Chat WhatsApp incluse avec le thème Shopify SHOPIWEB PREMIUM</p></figcaption></figure>

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


# Protection boutique

Application pour bloquer les clics droits et empêcher la sélection de texte sur votre boutique Shopify.

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


# Cookies RGPD

L'application pour gérer la conformité RGPD de votre boutique Shopify.

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


# PANIER

{% hint style="info" %}
Version 1.3.0
{% endhint %}

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# Panier coulissant


# 🏆 Protection Colis

Proposez des options de livraison dans le panier (suivis de colis, assurance, paquet-cadeaux…) en UPSELL à vos clients et améliorez l’expérience d’achat ainsi que vos marges.

{% hint style="info" %}
Version 1.3.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FNXsCp0rzO3LAM8LOle5y%2FCapture%20d%E2%80%99e%CC%81cran%202024-01-25%20a%CC%80%2013.50.52.png?alt=media&amp;token=440650b2-0620-4fd4-86a8-f9bde824ce0c" alt="Capture d&#x27;écran de l&#x27;application d&#x27;upsell Shopify pour vendre des options de livraison dans le panier à l&#x27;aide du thème SHOPIWEB PREMIUM"><figcaption><p>Application PROTECTION COLIS dans les paramètres du thème de SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

1/ Depuis la personnalisation du thème, cliquez sur PARAMÈTRES DE THÈME > PANIER puis descendez jusqu’à PROTECTION COLIS.

2/ La case ACTIVER PROTECTION COLIS vous permet en un clic d’afficher ou non l’upsell dans le panier.

3/ Choisissez le produit que vous souhaitez vendre en upsell. Au préalable, vous devez créer un produit depuis le tableau de bord de Shopify®. Retrouvez les explications détaillées dans la vidéo disponible au bas de cette page.

4/ L’option suivante vous permet d’afficher une image différente de celle de votre produit. Pour ne pas en afficher, n’en sélectionnez aucune.

5/ Le réglage suivant est un champ texte qui vous permet d’écrire votre appel à l’action. Pour afficher automatiquement le prix de l’upsell, écrivez le code `[price]` à la place du prix.

6/ Cliquez sur ENREGISTRER pour publier vos modifications.

### L’astuce

Proposer des options de livraison premium à vos clients vous permet d’augmenter le panier moyen ainsi que vos marges. Ces services sont très appréciés des clients exigeants. Cette option incluse avec votre licence SHOPIWEB PREMIUM vous aide à attirer et à fidéliser une nouvelle clientèle.

#### Retrouvez l'intégralité du tutoriel dans la vidéo suivante 👇

{% embed url="<https://vimeo.com/906355075?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser l'Application PROTECTION COLIS dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}


# Témoignage Panier

Affichez un témoignage de client en haut du panier coulissant et sur la page panier afin de rassurer vos clients.

{% hint style="info" %}
Version 1.3.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F1BTxSK8JmQ4Dfdk2bDZ2%2FCapture%20d%E2%80%99e%CC%81cran%202024-01-25%20a%CC%80%2014.09.43.png?alt=media&amp;token=d8f9de2a-82f3-43de-8aa4-1640810a028b" alt=""><figcaption><p>Fonctionnalité TÉMOIGNAGE PANIER dans les paramètres du thème de SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

1/ Depuis la personnalisation du thème, cliquez sur PARAMÈTRES DE THÈME > PANIER puis descendez jusqu’à TÉMOIGNAGE.

2/ La case AFFICHER LE TÉMOIGNAGE vous permet en un clic d’afficher ou non le témoignage dans le panier.

3/ Dans la zone de texte TÉMOIGNAGE, écrivez le témoignage de client que vous souhaitez afficher.

4/ Depuis le réglage IMAGE, sélectionnez la photo du client. Si vous ne voulez pas faire apparaître d’image, n’en sélectionnez pas ou supprimez celle présente en cliquant sur le bouton situé sous la photo, MODIFIER > SUPPRIMER UNE IMAGE.

5/ Cliquez sur ENREGISTRER pour publier vos modifications.

### L’astuce

Vous n’êtes pas obligé d’afficher un témoignage de client. Écrivez, par exemple, un argument supplémentaire pour motiver vos clients à passer commande ou transmettez une information importante. L’effet carte sur fond gris vous permet de mettre en valeur votre contenu directement dans le panier, là où vos visiteurs sont les plus attentifs. *Alors… Laissez parler le marqueteur qui sommeille en vous.*

#### Retrouvez l'intégralité du tutoriel dans la vidéo suivante 👇

{% embed url="<https://vimeo.com/906368142?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la fonction TÉMOIGNAGE PANIER dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}


# RECHERCHE

Aider ses visiteurs à trouver rapidement un produit ou une information pour améliorer votre expérience utilisateur.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***La fonctionnalité de recherche du thème SHOPIWEB PREMIUM est bien plus qu'une simple loupe. C'est un outil marketing qui peut inciter à vendre certains de vos produits tout en améliorant l'expérience utilisateur.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

L'option de recherche s'ajoute dans une fenêtre coulissante, dans l'en-tête de votre boutique mais aussi sur une page dédiée.

**👉 Elle se paramètre depuis la personnalisation du thème dans le menu PARAMÈTRES DE THÈME > RECHERCHE.**

Vous avez la possibilité de l'activer pour vos collections, vos pages et articles de blog.

La page dédiée pour effectuer une recherche permet à vos visiteurs de faire une recherche en ajoutant eux-même un filtre (produit, article, page)

Pour apprendre à paramétrer rapidement la fonctionnalité recherche sur votre boutique Shopify® avec le thème SHOPIWEB PREMIUM, regardez le tutoriel suivant enregistré par Xavier 👇

{% embed url="<https://vimeo.com/859050522?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la RECHERCHE dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}


# VARIANTES

Les variantes du thème SHOPIWEB PREMIUM vous permettent de présenter les couleurs et textures de vos produits sous forme de pastilles de couleurs, de textures mais aussi de boutons

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F1UY4ciY4O0RsIp50GSmv%2FVariantes-produit-theme-shopiweb-premium.png?alt=media&amp;token=add2112b-08c0-41c1-a87e-fdeb3b1154d1" alt="Capture d&#x27;écran de des variantes de couleurs et de textures créées avec le thème SHOPIWEB PREMIUM"><figcaption><p>Variantes de couleurs et de textures depuis la boutique demo ECLYPSIO</p></figcaption></figure>

***Ce tutoriel va vous expliquer comment présenter les variantes de couleurs ou de textures de vos produits de façon esthétique.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

### Pour créer le visuel de vos variantes

* Créez un plan de travail de dimension 150x150 pixels
* Posez sur ce plan de travail l'image de votre texture ou la couleur souhaitée
* Exportez vos visuels de variantes au format PNG
* Renommer le nom de votre image au format suivant : "swatch-lenomdevotrevariante.png"

Pour apprendre à bien insérer vos images de variantes sur votre boutique Shopify®, merci de suivre attentivement le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/877588289?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser les VARIANTES dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}


# Sélecteur de devise

Ce paramètre permet d'ajouter d'autres devises en plus de la devise principale de la boutique.

{% hint style="info" %}
Version 1.2.0
{% endhint %}

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Par défaut le thème SHOPIWEB PREMIUM intègre les devises suivantes :

* EUR
* USD
* GBP
* CHF
* CAD
* AUD

**Vous développez votre activité e-commerce dans un pays qui possède d'autres devises que celle-ci ?** Si oui, à partir de la version SHOPIWEB PREMIUM 1.2, il est possible d'ajouter sois-même toutes les devises que vous souhaitez. Le tutoriel suivant vous explique comment ajouter une devise dans le sélecteur de devises du thème SHOPIWEB PREMIUM.

### Depuis le tableau de bord Shopify®

Shopify® vous permet d'ajouter différents marchés sur lesquels vous souhaitez vous développer.

* Cliquer sur Paramètres > Marchés > Ajouter un marché > écrivez le nom que vous voulez lui donner puis cliquer sur Ajouter un marché
* Une fois qu'il est ajouté, la liste de tous vos marchés apparaît à l'écran
* Pour activer le dernier ajouté, cliquez dessus et depuis le menu en haut à droite, sélectionnez Actif pour l'activer
* Ensuite, téléchargez tous les drapeaux au format SVG depuis le lien suivant :

{% file src="/files/gGcY5n2sYX8EAPz7XD0F" %}
Dossier contenant les drapeaux au format SVG. Cliquer pour le télécharger
{% endfile %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FldlQ50eTWz4ae4iwiTAS%2FCapture%20d%E2%80%99e%CC%81cran%202023-11-24%20a%CC%80%2012.23.54.png?alt=media&amp;token=e3e034b8-e423-4f74-be39-ba34d858f7fc" alt="Capture d&#x27;écran du fichier des drapeaux offert avec le thème Shopify SHOPIWEB PREMIUM une fois dézippé"><figcaption><p>Dossier Flags-SVG dézippé</p></figcaption></figure>

* Renommez les drapeaux que vous souhaitez importer dans les fichiers Shopify® en ajoutant "**flag-**" devant le nom de la devise (flag-NOMEXACTDELADEVISE.svg). Pour plus de détails, regardez attentivement le tutoriel vidéo enregistré par Xavier et disponible au bas de cette page
* Depuis votre tableau de bord Shopify® cliquez sur Contenu > Fichiers puis importez les images des drapeaux correspondants aux devises que vous avez activez (**Attention à ce que tous les fichiers que vous allez importer ont bien été renommés en suivant la procédure expliqué au point précédent**)

{% hint style="info" %}
Assurez-vous de nommer les drapeaux que vous souhaitez télécharger en ajoutant "**flag-**" avant de les charger dans l'onglet contenu et fichiers de Shopify.
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FusDnskmyvvVTfJrWm2k8%2FCapture%20d%E2%80%99e%CC%81cran%202023-11-24%20a%CC%80%2012.26.44.png?alt=media&amp;token=504ef69a-bfd0-497f-9067-0286afcd7750" alt="Capture d&#x27;écran des fichiers du menu &#x22;contenu&#x22; d&#x27;un tableau de bord Shopify® pour ajouter des devises avec le thème SHOPIWEB PREMIUM"><figcaption><p>Voici l'endroit exacte pour importer les images de chaque drapeau</p></figcaption></figure>

* Une fois l'import terminé, vérifiez le sélecteur de devises depuis votre boutique en ligne (pensez à réactualiser la page) et vous constaterez que la devise avec le drapeau correspondant a bien été ajouté

### Comment trouver le nom d'une devise à partir d'un drapeau ?

* Depuis Chat GPT, importez le drapeau puis écrivez le prompt suivant : devise norme ISO
* Chat GPT va alors vous donner le nom exact de la devise
* Ensuite, renommer le fichier du drapeau en suivant la procédure suivante : flag-NOMEXACTDELADEVISE.svg
* Suivez la procédure suivante pour l'ajouter à votre boutique

***Félicitation ! Vous savez ajouter des devises au sélecteur de devises du thème SHOPIWEB PREMIUM.***

Retrouvez l'intégralité du tutoriel avec d'autres détails dans la vidéo suivante :

{% embed url="<https://vimeo.com/887947913?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser le SÉLECTEUR DE DEVISE dans les paramètres du thème de SHOPIWEB PREMIUM
{% endembed %}

{% hint style="success" %}
**Besoin d'aide ?** Réservez un micro-coaching personnalisé avec Xavier de 30 ou 60 minutes et obtenez une solution à vos soucis techniques et designs. [En savoir plus >](https://theme.shopiweb.fr/micro-coaching)
{% endhint %}


# PASSAGE À LA CAISSE

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# CSS PERSONNALISÉ

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}


# EN-TÊTE


# En-tête (navigation)

Personnaliser un menu, un Méga-menu, le logo et la couleur de l'entête de votre boutique Shopify®.

👉 [Cliquez ici pour acheter votre licence SHOPIWEB PREMIUM](https://www.shopiweb.fr/)

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FXcJDmHYw849OPy3asNNE%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2017.04.12.png?alt=media&amp;token=efcb62dc-eb3b-4f85-bd3c-1a6e8fd5d8cd" alt="Capture d&#x27;écran d&#x27;un entête de boutique Shopify® réalisé avec le thème français SHOPIWEB PREMIUM"><figcaption><p>Section Entête de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Vous souhaitez créer le menu de votre boutique ? Un Méga-menu parce que vous avez beaucoup de produits à vendre ?***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Si oui, le tutoriel vidéo enregistré par Xavier va vous accompagner pas à pas pour apprendre à :&#x20;

* Créer un menu depuis votre compte Shopify®
* Personnaliser le design de votre menu depuis la personnalisation du thème SHOPIWEB PREMIUM
* Créer et agencer un Méga-menu composé d'images
* Personnaliser aux couleurs de votre marque l'entête de votre boutique e-commerce
* Ajouter les liens de connexion à un compte client

{% hint style="info" %}
**REMARQUE :** La création de menu ne se gère pas dans la personnalisation du thème. SHOPIWEB PREMIUM intervient uniquement dans le design et l'esthétique de votre site. Avant de régler les couleurs et les effets de votre entête, il est nécessaire de créer votre menu depuis votre tableau de bord Shopify®.
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FVa7d5SM1USZPGnmEAPIZ%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-05%20a%CC%80%2015.18.20.png?alt=media&amp;token=34039a3a-5df2-4eb5-8492-a7f8102c619f" alt="Capture d&#x27;écran du tableau de bord de Shopify® pour créer un menu de navigation"><figcaption><p>La création d'un menu se fait depuis le tableau de bord Shopify® dans BOUTIQUE EN LIGNE > NAVIGATION</p></figcaption></figure>

Pour ajouter des images ou un produit dans un Méga-menu (*comme expliqué dans la vidéo tuto ci-dessous*), voici les codes à ajouter :&#x20;

<table><thead><tr><th>Définition</th><th>Résultat</th><th data-hidden></th></tr></thead><tbody><tr><td>Pour afficher un produit</td><td>Titre : product</td><td></td></tr><tr><td>Pour afficher une image</td><td>Titre : lenomdevotreimage.jpg</td><td></td></tr></tbody></table>

Apprenez à personnaliser votre entête comme un pro en suivant le tutoriel enregistré par Xavier, le créateur du thème SHOPIWEB PREMIUM 👇

{% embed url="<https://vimeo.com/861240350?share=copy>" %}
Tuto vidéo pour intégrer et paramétrer la section Entête avec le thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Bouton

Ajouter un Appel à l'action rapide directement dans l'en-tête de votre boutique.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FKXbBDMFtjBFbe69pQqMY%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2015.36.06.png?alt=media&amp;token=0be6f245-52bc-4908-9dc9-43b66fc6ddc6" alt="Capture d&#x27;écran de l&#x27;interface de personnalisation du thème Shopify® SHOPIWEB PREMIUM pour ajouter un bouton CTA dans l&#x27;en-tête d&#x27;une boutique e-commerce"><figcaption><p>Bloc BOUTON de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***Idéal pour les prestataires de service ou lorsqu'on possède une boutique monoproduit, le bouton d'appel à l'action rapide agit comme un rappel constant auprès de vos visiteurs.***

Il se paramètre très facilement avec le thème [SHOPIWEB PREMIUM](https://www.shopiweb.fr/).

Apprenez à l'ajouter et le personnaliser sur votre boutique e-commerce grâce au tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/860906071?share=copy>" %}
Vidéo tuto pour ajouter un bouton d'action rapide dans l'en-tête avec le thème SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Micro menu

Ajouter un menu de petite taille dans l'en-tête de votre boutique Shopify®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FaE4kKxv6xdsWDzTzCyMM%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2016.12.42.png?alt=media&amp;token=5944e960-f660-42cc-a6f5-a52bd8c5ed03" alt=""><figcaption><p>Bloc MICRO MENU de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Le MICRO MENU est une application intégrée au thème SHOPIWEB PREMIUM qui vous permet d'ajouter un menu de petite taille dans l'en-tête de votre boutique e-commerce.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Idéal pour présenter vos réseaux sociaux ou des liens d'accès rapide (*support ou autre*), ce menu supplémentaire est la solution idéale selon la thématique de votre activité en ligne.

Apprenez à ajouter et personnaliser le MICRO MENU en suivant pas à pas le tutoriel suivant 👇

{% embed url="<https://vimeo.com/860175987?share=copy>" %}
Tuto vidéo pour intégrer et paramétrer le bloc MICRO MENU avec le thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# SECTIONS

Les sections de votre boutique Shopify® correspondent aux zones dans lesquelles vous pouvez ajouter des blocs pour construire vos pages web.

Le thème SHOPIWEB PREMIUM inclut un grand nombre de sections et de blocs qui repoussent les limites de création de boutiques e-commerce. Découvrez tous les tutoriels pour vous aider à maîtriser chacune de ces sections.


# Accordeon visuel

La section ACCORDÉON VISUEL permet d'afficher jusqu'à 8 images avec titres et descriptions accessibles depuis des intercalaires présentés sous forme d'accordéons.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FsrFrH4dI0Q1XiCGPUhUv%2FIMAGE1_Accordeon_visuel.png?alt=media&amp;token=8444ef14-665b-491f-b940-b71011a53625" alt="La section ACCORDÉON VISUEL du thème SHOPIWEB PREMIUM permet de présenter 8 images dans une même section en les rendant accessibles depuis des intercalaires présentés sous forme d&#x27;accordéon."><figcaption><p>La section ACCORDÉON VISUEL</p></figcaption></figure>

{% 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 %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F32733Vg6PqxkcZf4Ellp%2FIMAGE2_Accordeon_visuel.png?alt=media&amp;token=a67a0d4f-91fa-46ae-a11b-507a6c8fecf6" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section ACCORDÉON VISUEL"><figcaption><p>Ajouter la section ACCORDÉON VISUEL avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > ACCORDÉON VISUEL. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION&#x20;

#### Général

* Choisissez la COULEUR D'ARRIÈRE PLAN (*les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème*). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN à condition d'avoir choisi une couleur foncé.
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* **Alignement du texte :** Préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ?

#### En-tête de la section

* **Légende image :** Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne pas en mettre. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* **Titre overlay :** Écrire le titre à afficher en tant que "Titre overlay" (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### Images

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FCDQc1G7zdI1yIrZsZXOH%2FIMAGE3_Accordeon_visuel.png?alt=media&amp;token=ce32c37f-a93a-42e2-b302-9b97cc562006" alt="Le réglage &#x22;Hauteur images&#x22; en pixels permet d&#x27;ajuster la hauteur des images affichées sur l&#x27;&#x22;Accordéon visuel&#x22; consulté depuis un ordinateur uniquement"><figcaption><p>Régler la hauteur des images pour l'affichage sur ordinateur</p></figcaption></figure>

* **Hauteur images (px) :** Réglez la taille en pixels des images de l'accordéon ou laissez celle par défaut. Cette option ne concerne que l'affichage sur ordinateur car depuis un smartphone, l'ajustement se fait automatiquement.
* **Afficher la première image développée :** Cocher cette option pour que, par défaut, le premier accordéon soit ouvert. Cela invite l'utilisateur à consulter votre contenu et à comprendre comment fonctionne la section.
* **Couleur des images :** Choisissez la couleur qui viendra créer un effet de flou au-dessus de l'image de l'accordéon lorsque celui-ci est fermé. Ajustez ensuite l'opacité et le flou entre la couleur choisie et l'image à l'aide des deux options suivantes : opacité, flou images.
* **Couleur des textes :** Choisissez la couleur d'affichage des textes de l'accordéon lorsque celui-ci est fermé.
* **Poids de la police :** Préférez-vous que ce titre apparaisse en poids normal ou en **Bold** (gras) ? Sélectionnez l'option qui vous convient.
* **Bordure de l'image :** Il est possible de créer une bordure sur vos images. Choisissez donc sa couleur, sa taille et l'ombre à l'aide des options : Bordure de l'image, Couleur de la bordure, Largeur de la bordure, Ombre.

#### Animation

* **Effet d'animation :** Sélectionnez l'une des 43 animations disponibles dans le thème SHOPIWEB PREMIUM avec laquelle la section apparaîtra à l'écran de l'utilisateur.
* **Vitesse d'animation :** Réglez à présent la vitesse à laquelle cette animation va s'effectuer.

#### Espacement de la section

* **Padding supérieur :** Ajoutez de l'espace à l'intérieur du HAUT de la section.
* **Padding inférieur :** Ajoutez de l'espace à l'intérieur du BAS de la section.
* **Marge supérieure :** Ajoutez de l'espace à l'extérieur du HAUT de la section.
* **Marge inférieure :** Ajoutez de l'espace à l'extérieur du BAS de la section.

### COMMENT AJOUTER UN INTERCALAIRE À L'ACCORDÉON VISUEL

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F7OqSGeWlKWIZOMw1aHxJ%2FIMAGE4_Accordeon_visuel.png?alt=media&amp;token=918e56d5-3f60-4977-b1a6-3e7b5981074d" alt="La section ACCORDÉON VISUEL permet d&#x27;ajouter jusqu&#x27;à 8 images accompagnées chacune d&#x27;un titre et d&#x27;une description"><figcaption><p>Cliquer sur AJOUTER ITEM puis ajouter l'image depuis la colonne de personnalisation</p></figcaption></figure>

* Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section ACCORDÉON VISUEL. Vous pouvez ajouter jusqu'à 8 ITEMS (images avec titres et descriptions).
* Une fois l'item ajouté, sélectionnez-le pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

#### Item

* **Image :** Cliquez sur SÉLECTIONNER UNE IMAGE puis, choisissez-en une depuis votre bibliothèque de contenu ou importez-en une depuis votre ordinateur.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FNnYUxYbDxS6J9roY9RFO%2FIMAGE5_Accordeon_visuel.png?alt=media&amp;token=0780a831-655c-4c8c-97e8-eb3113aae7f8" alt="L&#x27;intercalaire de la section &#x22;Accordéon visuel&#x22; fermé permet d&#x27;afficher un titre et un icône au format SVG"><figcaption><p>Le titre ainsi que l'icône de l'intercalaire lorsque celui-ci est fermé</p></figcaption></figure>

* **Titre de l'image :** Écrivez le titre qui apparaîtra sur l'intercalaire lorsque celui-ci sera fermé.
* **Icône :** Affichez un icône au bas de l'intercalaire lorsque celui-ci est fermé. Coller le code de l'icône au format SVG dans ce champs. Vous pouvez faire votre sélection depuis la bibliothèque gratuite Bootstrap Icons (voir la vidéo explicative disponible au bas de cette page). Cette option est facultative. Vous pouvez faire le choix de ne pas mettre d'icône.
* **Largeur de l'icône svg :** Si vous avez collé un code SVG dans le champs précédent, ajustez sa taille d'affichage en pixels en faisant glisser le curseur.

#### Contenu

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FwujZ7fnYcMgcz6BSlv8c%2FIMAGE6_Accordeon_visuel.png?alt=media&amp;token=20b29183-e9c7-406f-bb9c-b3fae1c4f60c" alt="Lorsque l&#x27;utilisateur ouvre un intercalaire de l&#x27;&#x22;Accordéon visuel&#x22;, un titre et une description s&#x27;affiche à l&#x27;écran"><figcaption><p>Le titre et la description d'un intercalaire lorsque celui-ci est ouvert</p></figcaption></figure>

* **Titre :** Écrivez le titre qui apparaîtra lorsque l'intercalaire sera ouvert. Balise titre (SEO) : Réglez maintenant la balise SEO de ce titre. Vous pouvez laisser le réglage par défaut en "h3".
* **Taille du titre :** Sélectionnez la taille d'affichage du titre de l'intercalaire lorsque celui-ci est ouvert. De préférence, optez pour un titre de taille inférieur à celui de la section pour respecter la hiérarchie visuelle.
* **Description :** Écrivez la description de votre intercalaire lorsque celui-ci est ouvert. Ajustez ensuite sa taille à l'aide de l'option suivante : Taille de description.

#### Bouton

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FyBXL6MLiAceZt3LI6cbx%2FIMAGE7_Accordeon_visuel.png?alt=media&amp;token=fe5cb25b-7bff-4948-a363-8c9def084c6a" alt="Il est possible d&#x27;ajouter un appel à l&#x27;action à chaque intercalaire en inscrivant votre appel à l&#x27;action dans le champs dédié"><figcaption><p>Bouton d'appel à l'action de la section ACCORDÉON VISUEL</p></figcaption></figure>

* Pour afficher un bouton à votre intercalaire lorsque celui-ci est ouvert, écrivez le texte du bouton dans le champs TEXTE DU BOUTON (laissez ce champs vide si vous ne souhaitez pas mettre de bouton). Dans l'option suivante, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

***Félicitations, vous avez réussi à ajouter et personnaliser la section ACCORDÉON VISUEL du thème SHOPIWEB PREMIUM.***

### L'ASTUCE

ACCORDÉON VISUEL permet de réduire le nombre de sections de votre page. Par exemple, la section IMAGE TEXTE EXPLORATEUR rend accessible 5 images d'un simple clic. Par contre, ACCORDÉON VISUEL rend accessible 8 images avec son titre et sa description dans une seule et même section. Elle améliore ainsi l'expérience utilisateur de votre boutique e-commerce.

### LA VIDÉO

{% embed url="<https://youtu.be/ybz-ZT-4dZE>" %}
Vidéo explicative de la section ACCORDÉON VISUEL
{% endembed %}


# Scrolling images

La section SCROLLING IMAGES permet de faire défiler en automatique jusqu'à 3 lignes de 6 images chacune.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FxaYe6VjjhhBSb6FyWGtx%2FIMAGE1_Scrolling_images.png?alt=media&amp;token=b6b91f5b-2665-43d9-a8d9-c7866359cf11" alt="La section SCROLLING IMAGES du thème SHOPIWEB PREMIUM permet de créer un effet design et moderne sur une boutique Shopify en faisant défiler jusqu&#x27;à 3 lignes de 6 images à des vitesses différentes et dans des sens opposés"><figcaption><p>La section SCROLLING IMAGES</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FVWag0BV81X1RHanRE2R8%2FIMAGE2_Scrolling_images.png?alt=media&amp;token=c66d5aec-0e13-4dc0-a811-902b8d25eb59" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section scrolling images"><figcaption><p>Ajouter la section SCROLLING IMAGES avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > SCROLLING IMAGES. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

* Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
* Sélectionnez le TYPE D'ARRIÈRE PLAN souhaité (Couleur prédéfinie, dégradé personnalisé)
* Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème).
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit centré ou à gauche ?
* Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre à afficher en tant que TITRE OVERLAY (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
* Pour afficher un bouton à la section SCROLLING IMAGES, écrivez le texte du bouton dans le champ TEXTE DU BOUTON (laissez ce champ vide si vous ne souhaitez pas mettre de bouton). Dans le champ suivant, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton (Petit, Normal, Large).
* **Les 6 réglages suivants permettent de personnaliser l'apparence des images.**
* COULEUR DU FONDU : Pour un bel effet, choisissez la même couleur que celle de l'arrière plan de la section.
* ESPACEMENT ENTRE LES ÉLÉMENTS : À l'aide du curseur, réglez la taille de l'espacement entre les images. Plus le chiffre est élevé et plus l'écart entre les images sera important.
* Souhaitez-vous que vos images aient un contour ? Si oui, de quelle couleur et de quelle taille le voulez-vous ? Réglez-les à l'aide des options de personnalisation suivantes.
* Sélectionnez la taille de l'ombre souhaitée qui apparaîtra derrière vos images, ou AUCUNE OMBRE si vous n'en voulez pas.
* Terminez les réglages de la section par les espacements. Les PADDINGS permettent d'ajouter de l'espace à l'intérieur de la section. Les MARGES permettent d'ajouter de l'espace à l'extérieur de la section.

*Les réglages de la section sont terminés. Maintenant, ajoutez jusqu'à 3 lignes d'images.*

### COMMENT AJOUTER UNE LIGNE D'IMAGES

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FglylOZWFKlxG9SBJuGuc%2FIMAGE3_Scrolling_images.png?alt=media&amp;token=aa3ebfe7-a5f7-4fb0-9e95-7a5a1f7d3d73" alt="Depuis la section SCROLLING IMAGES, cliquer sur le lien bleu AJOUTER IMAGES"><figcaption><p>Ajouter une ligne d'images</p></figcaption></figure>

* Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER IMAGES sous la section SCROLLING IMAGES. Vous pouvez ajouter jusqu'à 3 lignes d'images.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fp1Ksio501rLHtRGo0WHy%2FIMAGE4_Scrolling_images.png?alt=media&amp;token=7fa35021-fbfa-44fe-931a-bfabc2a83a2d" alt="Sélectionner la ligne d&#x27;images puis ajoutez jusqu&#x27;à 6 images depuis la colonne à droite de l&#x27;écran"><figcaption><p>Ajouter jusqu'à 6 images par ligne</p></figcaption></figure>

* Une fois la ligne ajoutée, sélectionnez-là pour ajouter jusqu'à 6 images par ligne depuis la colonne située à droite de l'écran.
* Pour chaque image, cliquez sur SÉLECTIONNER UNE IMAGE puis, choisissez-en une depuis votre bibliothèque de contenu ou importez-en une depuis votre ordinateur. **Les images doivent être au format carré (1000 x 1000 px)**.

{% hint style="danger" %}
**ATTENTION :** Si vous ne voyez pas les images après les avoir ajouté, c'est normal. *Vous devez enregistrer les modifications pour activer le script permettant le défilement des images*. Après avoir ajouté les images, cliquez sur ENREGISTRER et patientez quelques secondes le temps que la page se recharge.
{% endhint %}

Une fois vos lignes d'images ajouté, cliquez sur ENREGISTRER pour ne perdre aucune de vos modifications.

***Félicitations, vous avez réussi à ajouter et personnaliser la section SCROLLING IMAGES du thème SHOPIWEB PREMIUM.***

### L'ASTUCE&#x20;

Cette section vous permet de présenter un grand nombre d'images de votre produit dans une seule et même section. Ce peut être des images de mise en situation ou des photos des détails du produit. Leur défilement en automatique permet aux visiteurs de ne rien manquer.

### LA VIDÉO&#x20;

{% embed url="<https://youtu.be/If-MXGonipI>" %}


# 🏆 Barre d'annonces

Afficher facilement un message publicitaire en haut d'une boutique e-commerce.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FMI4n9fMkbQiigP6nWvoK%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2012.09.42.png?alt=media&amp;token=e518e67d-79dd-4c77-8b49-5a78b2c41e8b" alt=""><figcaption><p>Section BARRE D'ANNONCE défilant de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Le thème SHOPIWEB PREMIUM vous permet en quelques secondes d'afficher un message publicitaire ou des bénéfices de votre entreprise à l'endroit le plus visible de votre boutique e-commerce : au dessus de l'entête.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

L'application BARRE D 'ANNONCES intégrée à votre licence vous permet de :&#x20;

* Faire défiler 1 ou plusieurs messages
* Afficher un compte à rebours design
* Mettre des liens pour rediriger les visiteurs sur la page de votre choix
* Activer le défillement automatique des messages

Apprenez à paramétrer rapidement votre BARRE D'ANNONCES en suivant le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/860162800?share=copy>" %}
Tuto vidéo pour intégrer et paramétrer la section BARRE D'ANNONCES avec le thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Stories animées

STORIES ANIMÉES est une section permettant de présenter un produit, une collection ou n'importe quelle page sous forme de Stories comme sur un réseau social.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FpBAiof2ZihmQfDXMohcQ%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-08%20a%CC%80%2012.18.18.png?alt=media&amp;token=2015d39d-1c93-4670-99ff-fb324933ebc7" alt="Capture d&#x27;écran de la section STORIES ANIMÉES du meilleur thème Shopify® français, SHOPIWEB PREMIUM"><figcaption><p>Section STORIES ANIMÉES de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***La section STORIES ANIMÉES du thème Shopify® SHOPIWEB PREMIUM vous permet de créer des accès directs aux collections, produits ou page de votre choix. C'est idéal pour mettre en valeur certaines gammes de vos produits ou des modèles spécifiques.***

Contrairement à un simple menu, la section STORIES ANIMÉES présente chaque lien sous forme d'image ronde autour de laquelle une animation vient attirer l'œil du visiteur afin de le motiver à cliquer.

Il est possible de personnaliser l'image, le lien et le texte à afficher sous chaque Stories.

Lorsque le visiteur a cliqué sur l'un des liens, l'animation circulaire va s'arrêter, ce qui lui indiquera qu'il a déjà cliqué sur cette Stories.

Pour apprendre à ajouter et personnaliser cette section, veuillez regarder le tutoriel vidéo disponible ci-dessous :

{% embed url="<https://vimeo.com/852618484?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section STORIES ANIMÉES du thème SHOPIWEB PREMIUM
{% endembed %}


# Diaporama

La section Diaporama vous permet de mettre en valeur votre slogan et d'accueillir les visiteurs de votre boutique.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F2TIk5ptg9TZRLBHBrE74%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-08%20a%CC%80%2014.20.14.png?alt=media&amp;token=9f89e2d9-837f-4f9b-8789-5bc1ad6d1aa5" alt=""><figcaption><p>Section DIAPORAMA du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***La section Diaporama du thème SHOPIWEB PREMIUM est très facile à utiliser et vous permet de mettre en avant une ou plusieurs images ou vidéos.***

100% responsive, la section s'adapte parfaitement aux écrans de mobile, tablette et ordinateur.

Pour réussir vos visuels, découvrez les dimensions de plans de travail à respecter dans l'encadrée ci-dessous.

{% hint style="info" %}
Voici les tailles optimisée pour bureau et mobile :&#x20;

Bureau => 2000x1100 (px)

Mobile => 900x1200 (px)
{% endhint %}

Envie d'apprendre à utiliser la section Diaporama comme un pro ?

Découvrez le tutoriel complet dans la vidéo suivante :

{% embed url="<https://vimeo.com/855047421?share=copy>" %}
Tuto vidéo pour intégrer et paramétrer la section DIAPORAMA avec le thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# Texte/Logo défilant

Une section élégante pour faire défiler un message promotionnel, des logos ou les deux en même temps.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FnrGirlPQ6pvhmANqbbBP%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-08%20a%CC%80%2014.40.01.png?alt=media&amp;token=fce2aa18-4425-4cb3-b713-767687faad0c" alt=""><figcaption><p>Section Texte/Logo défilant de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***Vous souhaitez mettre en avant des éléments de preuve social ? Un résumé de vos bénéfices de marques ? Des slogans ?***

Si oui, la section Texte/Logo défilant va vous plaire.

Cette section du thème français SHOPIWEB PREMIUM vous permet en moins de 5 minutes de faire défiler à la vitesse souhaitée des logos, des textes ou les deux sur la page de votre choix de votre boutique Shopify®.

Pour apprendre à ajouter et à paramétrer la section Texte/Logo défilant, suivez le tutoriel vidéo suivant :

{% embed url="<https://vimeo.com/855668719?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section TEXTE / LOGO DÉFILANT du thème SHOPIWEB PREMIUM
{% endembed %}


# Collection en vedette

Regroupez les produits d'une même collection ou une sélection d'articles dans une même section

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FN9EdH7aQ3BL9TfnuKInW%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2014.29.57.png?alt=media&amp;token=34662843-767b-4b0a-a2df-3ff558c77780" alt=""><figcaption><p>Section PRODUIT OU COLLECTION EN VEDETTE de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section COLLECTION EN VEDETTE peut être ajoutée sur n'importe laquelle des pages de votre boutique e-commerce Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Elle vous permet de mettre facilement en avant une sélection de produits appartenant à différentes collections ou bien l'ensemble des produits d'une même collection.

De cette manière, vous pouvez suggérer à vos visiteurs d'acheter les produits sur lesquels vous avez le plus de marge ou tout simplement vos Best-sellers.

Pour apprendre à ajouter et personnaliser la section COLLECTION EN VEDETTE avec le thème SHOPIWEB PREMIUM, regardez le tutoriel vidéo disponible ci-dessous 👇

{% embed url="<https://vimeo.com/857104372/5831bd27a1?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section COLLECTION & PRODUIT EN VEDETTE du thème SHOPIWEB PREMIUM
{% endembed %}


# Liste de collections

Une section pour présenter sous forme de cartes les collections de votre choix.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F0PEsHEziNuiUZkI896hw%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2012.26.41.png?alt=media&amp;token=874a77b3-daf4-48f0-91d4-21c4b21facc9" alt=""><figcaption><p>Section Liste de Collections de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section LISTE DE COLLECTIONS vous permet de présenter efficacement une sélection de collections sur n'importe laquelle des pages de votre boutique e-commerce Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Chaque collection s'affiche sous forme de carte pour un design épuré et moderne.

Personnalisez facilement les textes, les images et les ombres de la section pour un résultat professionnel en quelques minutes seulement.

Découvrez comment ajouter et paramétrer la section LISTE DE COLLECTIONS avec le thème SHOPIWEB PREMIUM en suivant le tutoriel vidéo disponible ci-dessous 👇

{% embed url="<https://vimeo.com/857132564/56b592d0ad?share=copy>" %}
Vidéo tutoriel pour ajouter et personnaliser la section LISTE DE COLLECTIONS avec le thème SHOPIWEB PREMIUM
{% endembed %}


# Récemment consultés

{% hint style="info" %}
Version 1.1.0
{% endhint %}


# Texte enrichi

Une section moderne pour dynamiser un bénéfice fonctionnel ou de marque sur votre boutique Shopify®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fe9qMrkpBHKOUTyGryKuz%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2012.24.06.png?alt=media&amp;token=f7515907-3621-4915-96f5-e42c845b2e7f" alt=""><figcaption><p>Section Texte Enrichi de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Variez la manière dont vous présentez vos bénéfices grâce à la section TEXTE ENRICHI du thème SHOPIWEB PREMIUM.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Donnez du dynamisme et du mouvement à une partie de votre texte sans avoir besoin de faire du code.

Mettez en valeur votre bénéfice et développez vos arguments à l'aide du champ texte facile à utiliser.

Les couleurs de titre, de texte et de fond de section se personnalisent littéralement en quelques secondes.

Pour apprendre à ajouter et personnaliser la section TEXTE ENRICHI avec le thème français SHOPIWEB PREMIUM, regardez la vidéo tuto suivante 👇

{% embed url="<https://vimeo.com/857154442/448f75b0ac?share=copy>" %}
Vidéo explicative pour personnaliser la section TEXTE ENRICHI avec le thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# Texte défilant

Une section pour faire défiler vos arguments et vos slogans.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FxY7SNMsohrdJorDfqmqZ%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-22%20a%CC%80%2016.21.49.png?alt=media&amp;token=e7a993e2-2923-4be1-a553-1f6a63cc09e0" alt=""><figcaption><p>Section Texte Défilant de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***Besoin d'attirer l'attention de vos visiteurs sur les arguments clés de votre marque ?***

Essayez la section TEXTE DÉFILANT du thème Shopify® français SHOPIWEB PREMIUM pour faire vivre comme jamais vos plus belles phrases.

Taille, couleur et vitesse de défilement, tout se paramètre à l'aide de curseurs et sans faire de code.

Apprenez à paramétrer cette section indispensable en suivant le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/856784620?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section TEXTE DÉFILANT du thème SHOPIWEB PREMIUM
{% endembed %}


# Texte dynamique

Une section qui écrit les bénéfices de votre marque en direct sous les yeux de vos visiteurs.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FqaYU9s7BcSUSqTinJES3%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-22%20a%CC%80%2016.27.13.png?alt=media&amp;token=daccf01b-7a00-4797-bd23-4a30c04962da" alt=""><figcaption><p>Section Texte Dynamique de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Faites un résumé des arguments de vos produits grâce à la section TEXTE DYNAMIQUE du thème SHOPIWEB PREMIUM.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Cette section déjà intégrée au thème vous permet de donner du mouvement au texte afin d'attirer et de captiver le regard des visiteurs là où vous le voulez.

Le texte s'écrit en direct comme sur une machine à écrire ou un logiciel de traitement de texte.

Il est possible d'ajouter plusieurs phrases qui s'écriront une à une en automatique et en boucle.

Regardez comme il est simple d'ajouter et de personnaliser cette section Shopify® en regardant la vidéo tuto ci-dessous 👇

{% embed url="<https://vimeo.com/856801985?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section TEXTE DYNAMIQUE du thème SHOPIWEB PREMIUM
{% endembed %}


# Image parallaxe

La section IMAGE PARALLAXE permet de créer un effet 2D avec une image d'arrière-plan qui ne défile pas à la même vitesse que le texte lors du scroll.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FecnlKrBRkDscls3sJNdc%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.06.21.png?alt=media&amp;token=510756ca-c858-44c0-ae8a-318a26e51f4b" alt="Capture d&#x27;écran de la section parallaxe d&#x27;une boutique e-commerce créée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Section Image Parallaxe de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Apportez de la variété à votre boutique e-commerce avec cette section parallaxe. Changez des sections IMAGE/TEXTE ou VIDÉO/TEXTE avec un effet de texte qui donne la sensation de flottement au-dessus d'une image lors du défilement.

Apprenez à ajouter et à paramétrer la section IMAGE PARALLAXE en suivant attentivement la vidéo suivante 👇

{% embed url="<https://vimeo.com/858949980?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section IMAGE PARALLAXE du thème SHOPIWEB PREMIUM
{% endembed %}


# Carte avec image

Afficher des images avec du texte sous forme de cartes (ou pas) dans un format multicolonnes.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FFjdbTeamjzSneopk5tzl%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-24%20a%CC%80%2015.24.40.png?alt=media&amp;token=0a163112-5e56-40bf-a7cd-e2443939db2f" alt="Capture d&#x27;écran de la section CARTE AVEC IMAGE d&#x27;une boutique e-commerce créée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Section Carte avec Image de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section CARTE AVEC IMAGE est l'une des grandes nouveautés du thème SHOPIWEB PREMIUM.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Elle vous permet d'afficher de façon design plusieurs petits textes accompagnés de leurs images, dans un format moderne de carte flottantes.

Mais cette section vous permet aussi de créer une rangée d'icônes au format image (*utile quand on ne sait pas créer d'icônes SVG*) pour présenter des bénéfices émotionnels ou fonctionnels de l'un de vos produits à vendre.

Apprenez tout ce que vous devez savoir sur la section CARTE AVEC IMAGE en suivant le tutoriel vidéo suivant, présenté par Xavier LOPES, le créateur du thème SHOPIWEB PREMIUM 👇

{% embed url="<https://vimeo.com/857514176?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section CARTE AVEC IMAGE du thème SHOPIWEB PREMIUM
{% endembed %}


# Cartes avec vidéo

Mettre en valeur vos vidéos, titres et descriptions de manière design et professionnelle.

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


# 🏆 TikTok galerie

Une section incontournable pour mettre en valeur des vidéos au format TikTok® sur votre boutique e-commerce.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FyBzeiPsgVzrNPmoExLSS%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2012.30.11.png?alt=media&amp;token=1e80417a-49b4-4a55-bb61-fb8a5dfcd742" alt=""><figcaption><p>Section TikTok Galerie de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***La section TikTok® Galerie est l'une des sections les plus populaires du thème Shopify® français SHOPIWEB PREMIUM.***

Ajoutez en quelques clics un carousel de vidéos mettant en valeur vos produits.

Ces vidéos peuvent être des Native Ads ou des témoignages.

{% embed url="<https://vimeo.com/858429964/ced81196ad?share=copy>" %}
Vidéo tuto de la section TikTok® Galerie du thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Instagram galerie

Afficher de manière dynamique des visuels au format du réseau social Instagram®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FHg5XF77IEUg9wEreCAmj%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2012.32.07.png?alt=media&amp;token=276b6a1e-d779-4042-90fb-fd727bf1216c" alt="Capture d&#x27;écran de la section INSTAGRAM GALERIE depuis une boutique e-commerce créer avec Shopify® et le thème français SHOPIWEB PREMIUM"><figcaption><p>Section Instagram Galerie de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***L'application INSTAGRAM GALERIE s'ajoute et se paramètre comme une section depuis n'importe laquelle de votre page Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Cette section convient parfaitement aux projets de testing puisqu'elle vous permet de mettre en avant des visuels préalablement créées avec Canva® par exemple, et de les afficher dans un caroussel qui défile automatiquement.

Vous avez la possibilité de rediriger les internautes sur votre réseau social si vous en avez un ou bien sur le lien de votre choix.

L'application INSTAGRAM GALERIE vous aide à profiter d'un format apprécié par vos visiteurs et de créer du dynamisme sur votre boutique e-commerce.

Pour apprendre à l'ajouter et à la personnaliser, regardez la vidéo explicative ci-dessous 👇

{% embed url="<https://vimeo.com/861254169?share=copy>" %}
Vidéo tuto de la section Instagram® Galerie du thème Shopify® SHOPIWEB PREMIUM
{% endembed %}


# Image avec texte

L'une des sections les plus populaires avec SHOPIWEB PREMIUM.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FH9tswLPPl5k48JJHMM5p%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2016.12.15.png?alt=media&amp;token=c2f24355-0584-4c67-b26b-61498d92f4ea" alt=""><figcaption><p>Section Image Texte de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section IMAGE/TEXTE s'ajoute et s'utilise très facilement avec le thème SHOPIWEB PREMIUM.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Elle est un incontournable des e-commerçants car cette section vous permet de développer chacun de vos bénéfices produits sous forme de bloc de texte et d'appuyer votre copywriting à l'aide d'une image bien choisie.

100% Responsive, cette section s'adapte à tous les écrans, Desktop, Tablette ou Mobile.

Découvrez toutes les possibilités de la section IMAGE/TEXTE avec le thème français SHOPIWEB PREMIUM en suivant la vidéo explicative suivante 👇

{% embed url="<https://vimeo.com/857159979?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section IMAGE/TEXTE du thème SHOPIWEB PREMIUM
{% endembed %}


# Vidéo avec texte

La section qui réunit du texte avec une vidéo.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F1UKwRZiF5rrfXYBZLSzS%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-23%20a%CC%80%2016.19.00.png?alt=media&amp;token=988506b5-9cb3-4d7a-9a96-9926b60166fd" alt=""><figcaption><p>Section Vidéo Texte de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Comme pour la section IMAGE/TEXTE, la section VIDÉO/TEXTE vous permet de mettre en valeur un bloc de texte mais cette fois-ci avec une vidéo.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

La vidéo peut-être hébergée sur Shopify® (si elle pèse moins de 1Go) ou sur Youtube ou Viméo.

Les options de personnalisation du thème SHOPIWEB PREMIUM vous permettent de lancer automatiquement la vidéo, de désactiver le son ainsi que les éléments de contrôle et même de la faire tourner en boucle.

Optimiser au maximum, la section VIDÉO/TEXTE du thème SHOPIWEB PREMIUM n'allourdis pas inutilement votre boutique Shopify® grâce à un script allégé qui se lance uniquement lorsque le visiteur regarde la section.

Pour découvrir comment personnaliser en quelques minutes votre section VIDÉO/TEXTE avec le thème SHOPIWEB PREMIUM, regardez le tuto suivant 👇

{% embed url="<https://vimeo.com/857177153?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section VIDEO/TEXTE du thème SHOPIWEB PREMIUM
{% endembed %}


# Image comparaison

Une section pour afficher de façon interactive un Avant/Après.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F6JnN3hyhuhJJ7gwOWz17%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.01.50.png?alt=media&amp;token=701b0b31-7cdd-4d4a-b343-7aeb598b00d5" alt="Capture d&#x27;écran de la section IMAGE COMPARAISON sur une boutique e-commerce construite avec le thème français SHOPIWEB PREMIUM"><figcaption><p>Section IMAGE COMPARAISON de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Présenter un Avant/Après est l'un des outils marketing les plus puissants et les plus simples pour convaincre des visiteurs d'acheter votre produit selon la niche dans laquelle vous vous développez.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Le thème SHOPIWEB PREMIUM intègre cette fonctionnalité simple à paramétrer qui vous permettra d'afficher de façon esthétique un comparateur Avant/Après sur votre boutique e-commerce.

La section permet également de mettre du texte à droite ou à gauche, afin d'insérer un copywriting qui viendra appuyer l'élément de persuasion.

Dans le tutoriel vidéo suivant, vous apprenez à ajouter et personnaliser très facilement la section IMAGE COMPARAISON avec le thème SHOPIWEB PREMIUM 👇

{% embed url="<https://vimeo.com/858925027?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section IMAGE COMPARAISON du thème SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Compteur élite

Ajouter de l'urgence en affichant un compte à rebours.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FAv3HqNojiv3Q50QmqnR0%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-24%20a%CC%80%2015.44.27.png?alt=media&amp;token=cd27c31a-887f-491e-bdc6-5e6c0a0b46dd" alt="Capture d&#x27;écran de la section COMPTEUR ÉLITE d&#x27;une boutique e-commerce désignée avec le thème Shopify SHOPIWEB PREMIUM"><figcaption><p>Application COMPTEUR ÉLITE de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***Afficher un compte à rebours sur votre boutique e-commerce est un moyen efficace pour ajouter de l'urgence et augmenter les ventes.***

Le thème SHOPIWEB PREMIUM intègre l'application COMPTEUR ÉLITE qui s'utilise comme une section. Ajoutez du texte ou laissez simplement le compte à rebours s'afficher aux couleurs de votre marque.

Apprenez à ajouter et paramétrer l'application COMPTEUR ÉLITE en suivant le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/857524746?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser l'application COMPTEUR ÉLITE du thème SHOPIWEB PREMIUM
{% endembed %}


# Compteurs animés

La section Compteurs Animés permet d'afficher dans une ou plusieurs colonnes un compteur dynamique qui mettra en valeur les chiffres clés d'un produit ou d'une entreprise.

{% hint style="info" %}
Version 1.1.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FMx8zXJH4z4azKqP2Tktn%2FCapture%20d%E2%80%99e%CC%81cran%202023-10-20%20a%CC%80%2018.21.05.png?alt=media&amp;token=9cfbcd58-ebbd-406a-a952-001a2cb58a33" alt="Capture d&#x27;écran de la section COMPTEURS ANIMÉS du thème français SHOPIWEB PREMIUM"><figcaption><p>Section COMPTEURS ANIMÉS de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

### Depuis le tableau de bord Shopify®

* Cliquer sur Boutique en ligne > Thèmes > Personnaliser
* Une fois l'interface de personnalisation ouverte, sélectionner la page sur laquelle travailler à l'aide du menu déroulant situé en haut au centre de l'écran

### Ajouter la section Compteurs Animés

* Depuis la colonne de droite, cliquer sur Sections > Ajouter une section > Compteurs Animés
* Pour déplacer la section, maintenir le clic de la souris appuyé sur les 6 petits points situés à droite de la section puis faire glisser dans la zone de la page souhaitée
* En cliquant sur l'œil à gauche des 6 petits points, il est possible d'afficher ou non la section

### Personnaliser la section Compteurs Animés

* Par défaut, la section affiche 4 items (4 colonnes)
* Cliquer sur Ajouter Item pour insérer une nouvelle colonne avec un nouveau Compteur Animés
* Pour supprimer un Item, cliquer sur l'Item concerné puis, tout en bas de la colonne située à droite de l'écran, cliquer sur Retirer la section
* Ensuite, les options de personnalisation se trouvent dans la colonne à droite de l'écran
* La Couleur de l'arrière plan permet de choisir la couleur de fond de la section qui sera afficher. Ces couleurs sont celles qui ont été au préalables insérées dans les [Paramètres de thème](/theme-premium/documentation/parametres-du-theme/couleurs)
* Cocher la case Dégradé d'arrière plan pour transformer la couleur d'arrière plan en dégradé (Attention : cette option ne fonctionne pas sur les couleurs claires)
* Conteneur permet d'afficher la section en pleine largeur ou dans une dimension personnalisé en entrant la taille souhaitée en pixels dans le champs Largeur maximale (px)
* Alignement de texte permet de justifier l'ensemble du texte de la section à Gauche ou au Centre
* Écrire le titre de la section dans le champs Titre ou laisser vide pour ne pas afficher de titre
* Taille du titre permet de régler la taille d'affichage du titre sans modifier le SEO
* Description permet d'écrire une description qui apparaîtra sous le titre de la section. Laisser vide pour ne pas afficher de description
* Taille de description permet de régler la taille d'affichage du texte de la description sans modifier le SEO du site
* Animation permet de régler la vitesse de défilement en secondes des chiffres des Compteurs Animés (le délai dans lequel le chiffre est atteint)
* Points d'arrêt permet de répartir les colonnes en fonction de chaque taille d'écran depuis lequel la boutique sera consultée (XS, SM, MD, LG, XL, XXL)
* Le Padding supérieur et inférieur permet d'ajouter de l'espace à l'intérieur de la section
* La Marge supérieure et inférieure permet d'jouter de l'espace à l'extérieur de la section, en dehors du rectangle bleu

### Personnaliser un Item

* Sélectionner l'Item en question depuis la colonne à gauche de l'écran
* Les options de réglage de l'Item apparaissent dans la colonne à droite de l'écran
* Inscrire le chiffre souhaité dans le champs Valeur en nombre
* Inscrire le signe ou un mot souhaité dans le champs Suffixe
* Taille de la valeur permet de régler la taille la Valeur en nombre et le Suffixe
* Couleur de la valeur permet d'afficher la Valeur et le Suffixe dans l'une des couleurs entrées préalablement dans les \[\[Paramètres de thème]]
* Titre permet d'écrire un titre qui apparaîtra sous la Valeur et le Suffixe
* Taille du titre permet de régler la taille d'affichage du titre sans modifier le SEO
* Description permet d'écrire une description qui apparaîtra sous le titre de l'Item. Laisser vide pour ne pas afficher de description
* Taille de description permet de régler la taille d'affichage du texte de la description sans modifier le SEO du site
* Le champs Texte du bouton permet d'écrire le texte à faire apparaître sur le bouton. Laisser vide pour ne pas afficher de bouton
* URL du bouton permet de sélectionner la page sur laquelle le visiteur est dirigé après avoir cliqué sur le bouton
* Couleur du bouton permet d'afficher le bouton dans l'une des couleurs préalablement réglées dans [Paramètres de thème](/theme-premium/documentation/parametres-du-theme/couleurs)
* Taille du bouton permet d'afficher le bouton de manière Petite, Normale ou Large

Recommencer la même procédure pour chacun des Items de la section.

### Cliquer sur Enregistrer et c'est terminé

Retrouvez l'intégralité des explications dans le tutoriel vidéo suivant :

{% embed url="<https://vimeo.com/876447554?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section COMPTEURS ANIMÉS du thème SHOPIWEB PREMIUM
{% endembed %}

{% hint style="success" %}
**Besoin d'aide ?** Réservez un micro-coaching personnalisé avec Xavier de 30 ou 60 minutes et obtenez une solution à vos soucis techniques et designs. [En savoir plus >](https://theme.shopiweb.fr/micro-coaching)
{% endhint %}


# Produit en vedette

Mettre en avant une section produit sur n'importe laquelle de vos pages Shopify®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FLWHsWhFo4g8OwJZxswBi%2Fsection-produit-en-vedette-theme-shopiweb-premium.png?alt=media&amp;token=328b0a78-2412-4ed3-ba1c-a6b645226616" alt="Capture d&#x27;écran de la section PRODUIT EN VEDETTE depuis une boutique e-commerce designé avec le thème français SHOPIWEB PREMIUM"><figcaption><p>Section PRODUIT EN VEDETTE depuis la boutique DEMO du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***La section PRODUIT EN VEDETTE vous permet d'insérer une section produit sur une page d'accueil, à propos ou même dans vos articles de blog.***

Cette section novatrice dispose de nombreuses possibilités de personnalisation comme :&#x20;

* Ajouter ou non le bouton ACHETER MAINTENANT
* Afficher les images produits au format carousel en version mobile
* Insérer des blocs d'urgence (*état des stocks, compteur aléatoire de visiteurs, etc*)

Convient parfaitement aux boutiques monoproduit mais aussi aux marques qui souhaitent mettre en avant l'un de leur produit Best-seller en favorisant l'achat d'impulsion.

Apprenez à ajouter et paramétrer la section PRODUIT EN VEDETTE en regardant le tutoriel vidéo ci-dessous 👇

{% embed url="<https://vimeo.com/861710484?share=copy>" %}
Vidéo tuto de la section PRODUIT EN VEDETTE du thème SHOPIWEB PREMIUM
{% endembed %}


# F.A.Q

La section Foire aux Questions est un élément essentiel de votre marketing pour répondre aux questions des futurs acheteurs.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Un grand nombre de visiteurs de votre boutique se posent des questions qui représentent un frein à l'achat s'ils ne trouvent pas de réponse.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

La section F.A.Q vous permet de mettre en valeur les questions fréquentes que se posent vos prospects et d'y répondre à travers des encarts déroulants.

{% embed url="<https://vimeo.com/858190486/6cea4dd020?share=copy>" %}
Tuto vidéo pour personnaliser la section F.A.Q du thème SHOPIWEB PREMIUM
{% endembed %}


# 🏆 HTML / Liquid

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***HTML, ou HyperText Markup Language, est le langage de balisage standard utilisé pour créer des pages web et des applications web. Il sert à structurer et à formater le contenu sur le web, et constitue la base de la construction de pages web.***

Le thème Shopiweb PREMIUM vous permet d'utiliser le HTML pour personnaliser le design et la mise en page de votre site web. Grâce à l'HTML, vous pouvez ajouter du texte, des images et d'autres médias à votre site, ainsi que créer et styliser des listes, des tableaux et des formulaires. Il vous permet également d'ajouter des éléments interactifs tels que des boutons et des liens, ainsi que de créer des menus personnalisés et des barres de navigation.

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Pour utiliser du HTML avec le thème Shopiweb PREMIUM, vous devez avoir une compréhension de base du langage HTML et de sa syntaxe. Cela implique d'apprendre les différentes balises HTML et comment elles sont utilisées pour structurer et formater le contenu, ainsi que l'utilisation de CSS (Cascading Style Sheets) pour styliser vos éléments HTML. En somme, le HTML est un outil puissant pour créer et personnaliser le contenu et la mise en page de votre site web, et le thème Shopiweb PREMIUM facilite l'utilisation d'HTML pour créer une présence en ligne professionnelle et attrayante pour votre entreprise.

#### Voici quelques exemples de balises HTML de base et de leurs fonctions :

* `<p>`: Définit un paragraphe.
* `<br>`: Insère un saut de ligne.
* `<hr>`: Insère une ligne horizontale.
* `<h1>`, `<h2>`, `<h3>`, etc.: Définit des titres de différentes tailles.
* `<img>`: Insère une image.
* `<a>`: Définit un lien hypertexte.
* `<ul>`: Définit une liste non ordonnée (une liste avec des puces).
* `<ol>`: Définit une liste ordonnée (une liste numérotée).
* `<li>`: Définit un élément de liste.
* `<div>`: Définit une division ou une section dans un document.
* `<table>`: Définit un tableau.
* `<form>`: Définit un formulaire pour la saisie des données par l'utilisateur.
* `<input>`: Définit un champ de saisie pour un formulaire.

#### Voici un exemple de document HTML simple :

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mon site web</title>
</head>
<body>
  <h1>Bienvenue sur mon site web</h1>
  <p>Il s'agit de mon site web personnel, où je partage mes intérêts et mes passe-temps. N'hésitez pas à y jeter un coup d'œil et à en apprendre davantage sur moi !</p>
  <hr>
  <h2>A propos</h2>
  <p>Je suis développeur web et lecteur passionné. J'aime passer mon temps libre à coder et à explorer de nouvelles technologies.</p>
  <h2>Mes loisirs</h2>
  <ul>
    <li>Codage</li>
    <li>Reading</li>
    <li>Running</li>
  </ul>
</body>
</html>

```

LIQUID est un langage de modèle utilisé dans la plateforme Shopify pour personnaliser et dynamiser les thèmes de boutique en ligne. Il offre des fonctionnalités telles que les boucles, les conditions, les filtres et les variables, ce qui permet aux utilisateurs de contrôler le flux et la présentation des données sur leur site. Avec le LIQUID, il est possible d'intégrer du code HTML et CSS, ce qui permet une personnalisation avancée de l'apparence et de la convivialité de la boutique en ligne. En résumé, LIQUID est un langage essentiel dans Shopify pour personnaliser les thèmes, gérer les données et créer des expériences utilisateur dynamiques et interactives.

#### Voici un exemple de language LIQUID :

```liquid
<p class="bg-light rounded border p-4">
Date du jour : <b>{{ 'now' | date: "%d %b %Y" }}</b>
</p>
```


# Vidéo interne

Mettez en forme les vidéos hébergées directement sur Shopify®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Shopify® vous permet maintenant d'héberger vos vidéos, ce qui est pratique si vous ne souhaitez pas utiliser la plateforme Youtube ou payer un hébergeur vidéo de type Viméo.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Cependant, vous êtes limité dans la taille des vidéos que vous pouvez télécharger.

| Attribut           | Exigence           |
| ------------------ | ------------------ |
| Taille de fichier  | 1 Go Maximum       |
| Résolution         | Maximum 4K         |
| Durée de la vidéo  | 10 minutes maximum |
| Format de fichiers | MOV et MP4         |

Une fois vos vidéos téléchargées dans le contenu de votre boutique Shopify®, il est possible de la mettre en forme de manière esthétique dans l'une de vos pages grâce à la section VIDÉO INTERNE du thème SHOPIWEB PREMIUM.

Pour apprendre à bien utiliser cette section, regardez le tutoriel suivant 👇

{% embed url="<https://vimeo.com/856396611?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section VIDÉO INTERNE du thème SHOPIWEB PREMIUM
{% endembed %}


# Vidéo externe

La section pour mettre en forme vos vidéos hébergées sur Youtube et Viméo.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***Certaines de vos vidéos de marque sont herbérgées sur Youtube ou Viméo ? Vous aimeriez les mettre en valeur sur votre boutique Shopify® ?***

Si oui, la section VIDÉO EXTERNE vous sera indispensable.

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Utilisable dans n'importe laquelle de vos pages, la section VIDÉO EXTERNE du thème SHOPIWEB PREMIUM vous permet de personnaliser les couleurs, les marges et la façon dont votre vidéo s'agence dans vos pages e-commerce.

Découvrez comment ajouter et paramétrer la section VIDÉO EXTERNE avec le thème SHOPIWEB PREMIUM en regardant le tuto vidéo ci-dessous 👇

{% embed url="<https://vimeo.com/856403876?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section VIDÉO EXTERNE du thème SHOPIWEB PREMIUM
{% endembed %}


# 🏆 Newsletter Popup

Le section pour transformer les visiteurs qui quittent une boutique en prospects.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F4upSjQmlNefdjSHSoR1T%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.15.22.png?alt=media&amp;token=d4197860-64c0-4041-9181-1e2dc4dd2073" alt="Capture d&#x27;écran d&#x27;une section NEWSLETTER POPUP sur un boutique e-commerce créée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Section NEWSLETTER POPUP de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section NEWSLETTER POPUP permet d'ajouter une fenêtre avec un formulaire d'inscription.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Selon les réglages choisis, la fenêtre va s'afficher automatiquement au bout de quelques secondes.

Personnalisez le titre, l'image et les textes en quelques minutes.

Facile à paramétrer, la section NEWSLETTER POPUP fonctionne parfaitement avec la fonction emailing inclus dans votre abonnement Shopify®.

{% hint style="warning" %}
Attention, la section ne se connecte pas aux remises.

Si vous souhaitez connecter des remises automatiques, veuillez utiliser les Popups du logiciel d'emailing Klaviyo®.
{% endhint %}

Regardez le tutoriel vidéo suivant pour apprendre à ajouter et personnaliser la section NEWSLETTER POPUP facilement 👇

{% embed url="<https://vimeo.com/862324612?share=copy>" %}
Vidéo tuto de la section NEWSLETTER POPUP avec le thème français SHOPIWEB PREMIUM
{% endembed %}


# Newsletter

Augmenter le nombre d'inscrits à la newsletter d'une boutique e-commerce.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fd98mOmEuH6ucy5Vddzmg%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.16.48.png?alt=media&amp;token=36eac02d-5f92-4015-ab4d-4a89fa8e5955" alt="Capture d&#x27;écran d&#x27;une section NEWSLETTER de boutique e-commerce créée avec le thème français SHOPIWEB PREMIUM"><figcaption><p>Section NEWSLETTER de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Cette section se configure en quelques minutes et peut être ajoutée sur n'importe quelle page de votre boutique Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Le thème [SHOPIWEB PREMIUM](https://www.shopiweb.fr/) vous permet également d'ajouter la section NEWSLETTER dans le groupe de pied de page afin d'apparaître sur toutes les pages de votre boutique.

La section s'intègre parfaitement avec l'application d'emailing inclus avec votre forfait Shopify®.

Pour apprendre à ajouter et personnaliser la section NEWSLETTER avec votre licence SHOPIWEB PREMIUM, suivez le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/862345027?share=copy>" %}
Tuto pour paramétrer la section NEWSLETTER avec le thème SHOPIWEB PREMIUM
{% endembed %}


# Formulaire de contact

Créer un formulaire avancé pour récolter un maximum d'informations.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FcR4ggibJp1QP1RKozAAG%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.18.56.png?alt=media&amp;token=35763dc0-4dd0-4471-8209-626e02a74022" alt="Capture d&#x27;écran d&#x27;un formulaire de contact avancé sur une boutique e-commerce réalisée avec le thème Shopify français SHOPIWEB PREMIUM"><figcaption><p>Section Formulaire de Contact de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Le formulaire de contact imaginé pour le thème SHOPIWEB PREMIUM est une révolution en soi dans la famille des formulaires en e-commerce.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

La majorité de ce que vous avez déjà vu, ce sont des formulaires sur lesquels vos visiteurs peuvent uniquement laisser leur nom, prénom, adresse email et un message.

Cependant, que diriez-vous d'avoir la possibilité de créer des formulaires plus complets sur lesquels vos clients peuvent choisir des options dans des menus déroulants, inscrire une date ou même laisser une note sur votre entreprise ?

C'est ce que vous permet de faire la section FORMULAIRE DE CONTACT avancé du thème SHOPIWEB PREMIUM.

Ajoutez des Champs de saisie, des Zone de texte, des Liste déroulantes, des Checkbox, des Radiobox ou encore des Séparateurs en quelques clics et sans coder. Idéal pour votre service après-vente out tout autre département de votre activité e-commerce.

Apprenez à ajouter et personnaliser la section FORMULAIRE DE CONTACT en suivant la vidéo tutoriel suivante 👇

{% embed url="<https://vimeo.com/858937116?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section FORMULAIRE DE CONTACT du thème SHOPIWEB PREMIUM
{% endembed %}


# Articles de blog

Une section pour mettre en valeur vos articles et des fonctionnalités pour concevoir des modèles d’articles design.

{% hint style="info" %}
Version 1.3.0
{% endhint %}

Shopify® vous permet de créer votre blog et de publier des articles. Grâce au thème SHOPIWEB PREMIUM, vous pouvez personnaliser la section de présentation de vos articles et la page blog. Mais, vous pouvez aller encore plus loin grâce aux modèles d’articles de blog personnalisable comme vous le souhaitez avec les sections imaginées par SHOPIWEB.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Frxk9gS2hQaTZeNQnXdjh%2FCapture%20d%E2%80%99e%CC%81cran%202024-02-21%20a%CC%80%2013.39.33.png?alt=media&amp;token=1eb10a42-0724-470f-a9b7-851f325fe868" alt="Capture d&#x27;écran d&#x27;une section ARTICLES DE BLOG créé avec le thème SHOPIWEB PREMIUM"><figcaption><p>Une section ARTICLES DE BLOG conçu avec le thème Shopify® SHOPIWEB PREMIUM</p></figcaption></figure>

{% hint style="danger" %}
**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 en passant par [ce lien](https://www.shopiweb.fr/choix-licence).
{% endhint %}

### Ce que vous apprenez :

* Créer votre blog depuis l’interface de Shopify®
* Ajouter des articles de blog
* Personnaliser le modèle de page BLOG avec le thème SHOPIWEB PREMIUM
* Créer un modèle d’article de blog avec le thème SHOPIWEB PREMIUM

### Le tutoriel en vidéo :

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

{% hint style="success" %}
**ASTUCE :** Le thème SHOPIWEB PREMIUM offre la possibilité d’ajouter des sections comme COLLECTION EN VEDETTE qui aide à vendre plus facilement vos produits en fin d’article. La création de contenu aide au référencement, entretien la relation avec votre clientèle et renforce la confiance qu’ils ont pour votre marque. En résumé, le marketing de contenu est un atout supplémentaire pour vendre plus.
{% endhint %}

{% hint style="info" %}
Version 1.4.0
{% endhint %}

Découvrez notre dernière innovation dans la version mise à jour 1.4.0 de notre application : la barre de progression de lecture pour les articles de blog. Cette nouvelle fonctionnalité, disponible dès maintenant, permet à vos lecteurs de voir combien ils ont avancé dans l'article, améliorant ainsi leur expérience de lecture et les encourageant à achever la lecture des contenus plus longs. C'est un petit plus qui fait toute la différence pour garder votre audience engagée et informée !

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F6Kgiume0yOsKiVX63dpw%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-17%20a%CC%80%2016.54.10.png?alt=media&amp;token=73903e8d-c87b-45e7-9d95-a26cb9425923" alt=""><figcaption><p>Nouvelle Application Progression Lecture pour article de blog</p></figcaption></figure>


# Bordure personnalisée

Intégrer un séparateur sous forme de SVG fixe ou animé, d'un trait ou d'une simple marge.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FcjZUbdI0fzM3PeyhmVsk%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-24%20a%CC%80%2016.34.21.png?alt=media&amp;token=8cd46ba2-2051-4765-9d3e-7a9239d5f754" alt="Capture d&#x27;écran d&#x27;une bordure personnalisée sous forme de SVG grâce au thème Shopify français SHOPIWEB PREMIUM"><figcaption><p>Section Bordure Personnalisée de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

***La section BORDURE PERSONNALISÉE vous permet d'ajouter une touche de design aux séparateurs de votre boutique e-commerce.***

Cette section du thème SHOPIWEB PREMIUM possède 5 fonctionnalités :&#x20;

* **MARGE :** Apportez juste de l'espace entre 2 de vos sections
* **SÉPARATEUR :** Insérez une ligne de la couleur et de l'épaisseur souhaitée
* **BORDURE FIXE :** Faites votre choix parmi 13 designs (pour le moment) à personnaliser de la couleur que vous voulez
* **BORDURE ANIMÉE :** Faites votre choix parmi 6 designs (pour le moment) d'animation à personnaliser de la couleur de votre branding (disponible depuis la mise à jour 1.4)
* **BORDURE PERSONNALISÉ :** Intégrez facilement un SVG imaginé par vos soins (réservé aux développeurs ou à ceux qui savent coder un SVG)

Découvrez comment ajouter et personnaliser la section BORDURE PERSONNALISÉE avec le thème SHOPIWEB PREMIUM en suivant le tutoriel suivant 👇

{% embed url="<https://vimeo.com/857553280?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section BORDURE PERSONNALISÉE du thème SHOPIWEB PREMIUM
{% endembed %}

{% hint style="info" %}
Version 1.4.0
{% endhint %}

La version 1.4.0 vous offre de nouvelles brodures personnalisée animées. Créez du mouvement sur les pages de votre boutique e-commerce avec SHOPIWEB PREMIUM.


# Image

La section pour mettre en valeur une photo ou un visuel sur votre boutique Shopify®.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

***La section IMAGE du thème SHOPIWEB PREMIUM vous permet de mettre en forme très facilement une photo ou une image téléchargée sur votre boutique e-commerce Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Réglez la dimension du conteneur pour faire apparaître votre image selon le format souhaité.

Personnalisez la couleur de fond de la section à partir de votre charte graphique préalablement réglée dans les [PARAMÈTRES DE THÈMES](/theme-premium/documentation/parametres-du-theme/couleurs).

Le section vous permet également de rendre votre image cliquable ou non.

100% Responsive, la section vous offre la possibilité de télécharger une version mobile et ordinateur de votre image.

Pour apprendre à ajouter et personnaliser rapidement la section IMAGE avec le thème SHOPIWEB PREMIUM, regardez la vidéo suivante 👇

{% embed url="<https://vimeo.com/856774048?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section IMAGE du thème SHOPIWEB PREMIUM
{% endembed %}


# Multicolonne

Ajouter des icônes de bénéfices au format SVG.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FQ0rrtEkZu7x4EZNs06Gu%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-24%20a%CC%80%2015.57.52.png?alt=media&amp;token=91047e3b-b807-487d-93cd-3c3b5ac5ad9f" alt="Capture d&#x27;écran d&#x27;une section MULTICOLONNE d&#x27;une boutique e-commerce réalisée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Section MULTICOLONNE de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***La section MULTICOLONNE vous permet d'afficher de manière esthétique des icônes de bénéfices de marque, émotionnels ou fonctionnels sur votre boutique e-commerce réalisée avec Shopify®.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

👉 Affichez un titre ainsi qu'une description de section.

👉 Affichez vos icônes sous forme de cartes ombragées ou de façon classique sur la couleur de fond correspondant à votre identité visuelle.

Les illustrations au format SVG ont l'avantage d'être rapides à charger ce qui accélère la vitesse de chargement de votre site. Une illustration SVG est un visuel sous forme de code. C'est donc aussi rapide à charger qu'une simple ligne de texte.

**Vous ne savez pas créer de SVG ?** Retrouvez des milliers d'icônes SVG gratuits sur la [bibliothèque Bootstrap](https://icons.getbootstrap.com/).

Et si vous préférez afficher vos icônes au format JPEG ou PNG, utilisez [la section CARTE AVEC IMAGE](/theme-premium/documentation/sections/carte-avec-image).

Apprenez à ajouter et personnaliser la section MULTICOLONNE en suivant le tutoriel complet enregistré par Xavier 👇

{% embed url="<https://vimeo.com/857541576?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section MULTICOLONNE du thème SHOPIWEB PREMIUM
{% endembed %}


# Témoignages

Présenter des témoignages clients dans un design cohérent au reste de la boutique.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FQXUfbcNaHMiIbn8AaFVJ%2FCapture%20d%E2%80%99e%CC%81cran%202023-08-29%20a%CC%80%2010.21.45.png?alt=media&amp;token=435b3dbd-277c-41ea-8586-e379b308a9cc" alt="Capture d&#x27;écran de la section TÉMOIGNAGES d&#x27;une boutique e-commerce créée avec le thème shopify français SHOPIWEB PREMIUM"><figcaption><p>Section TÉMOIGNAGES de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Afficher des témoignages de clients sur une boutique e-commerce est un outil de preuve social indispensable pour lever les freins à l'achat.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

La section TÉMOIGNAGES du thème SHOPIWEB PREMIUM possède un haut niveau de personnalisation. Inclus avec votre licence, elle fonctionne avec l'application native de Shopify® : Product Review.

* Personnalisez les notes
* Téléchargez des images produits
* Insérez une photo de clients
* Présenter les témoignages sous forme de cartes design qui offre de la 3 dimensions à votre page
* 100% compatible aux écrans mobile, tablette et ordinateur
* Insérez des liens vers les pages produits de votre choix

Cette section novatrice fonctionne sans abonnement avec l'application gratuite de Shopify®.

Pour découvrir comment l'utiliser afin de mettre en valeur les témoignages clients de votre boutique e-commerce, regardez le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/858982105?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section TÉMOIGNAGES du thème SHOPIWEB PREMIUM
{% endembed %}


# Tableau comparatif

Une section inédite pour créer facilement un tableau comparatif, sans code et avec de nombreuses possibilités de personnalisation.

{% hint style="info" %}
Version 1.2.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FUysSPJP2eBsY9BqF27gC%2FCapture%20d%E2%80%99e%CC%81cran%202023-12-07%20a%CC%80%2017.09.08.png?alt=media&amp;token=3f2f3384-058f-4400-8bae-85b05ba22d94" alt="Capture d&#x27;écran de la section Shopify TABLEAU COMPARATIF disponible sur le thème SHOPIWEB PREMIUM"><figcaption><p>Section TABLEAU COMPARATIF de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

1/ Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > TABLEAU COMPARATIF. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

2/ Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran. Effectuez les réglages en fonction des besoins de votre produit. **Les explications détaillées se trouvent dans la vidéo tuto disponible au bas de cette page.**

3/ Personnalisez ensuite votre entête. Vous pouvez utiliser jusqu’à sept colonnes.

4/ Pour ajouter plus de lignes au tableau comparatif, cliquez sur AJOUTER UN BLOC puis personnalisez-le.

5/ Terminez par le PIED DE PAGE si vous en voulez un.

### L’astuce

La section Tableau comparatif vous permet également d’afficher des images de votre produit. Offrez ainsi une comparaison plus visuelle avec les produits concurrents.

#### Retrouvez l'intégralité du tutoriel dans la vidéo suivante 👇

{% embed url="<https://vimeo.com/906307246?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section TABLEAU COMPARATIF du thème SHOPIWEB PREMIUM
{% endembed %}


# Flip Flap texte

L’une des nouvelles sections pour apporter du dynamisme et un effet 3D à vos textes, sans ralentir votre boutique.

{% hint style="info" %}
Version 1.2.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FtwRMwqKMJOffQNs96PBI%2FCapture%20d%E2%80%99e%CC%81cran%202023-12-07%20a%CC%80%2017.10.57.png?alt=media&amp;token=ee54fc8e-628d-46b1-ac2e-6b9040470c44" alt="Capture d&#x27;écran de la section FLIP FLAP TEXTE du thème Shopify® SHOPIWEB PREMIUM"><figcaption><p>Section FLIP FLAP TEXTE de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

1/ Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > FLIP FLAP TEXTE. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit. Cependant, vous ne pouvez ajouter qu’une seule section Flip Flap Texte par page.

2/ Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.

3/ Sélectionnez la couleur de l’arrière-plan de la section selon celles que vous avez définies depuis les paramètres de thème.

4/ Personnalisez la largeur du contenu de la section, en CONTENEUR ou en PLEINE LARGEUR. Si vous entrez un nombre de pixels dans le champ, sachez qu’il sera prioritaire sur les deux autres réglages.

5/ Aligner le texte à GAUCHE ou au CENTRE.

6/ Écrivez votre titre puis personnalisez la taille d’affichage.

7/ À l’aide de la jauge, choisissez le délai en secondes après quoi le mot passera au suivant.

8/ Sélectionnez la police d’écriture souhaitée, celle de vos titres ou du corps en fonction de vos réglages effectués depuis les paramètres de thème.

9/ Sélectionnez la couleur d’arrière-plan des cartes ainsi que celle des lettres qui apparaissent sur les cartes. ATTENTION : si vous ne voyez pas les changements, pensez à cliquer sur ENREGISTRER et à rafraîchir la page du navigateur pour relancer les scripts de la section Flip Flap Texte.

10/ Si vous le souhaitez, il est possible d’ajouter du texte sous le Flip Flap Texte grâce au champ DESCRIPTION. Puis, réglez la taille de la description.

11/ Pour afficher un bouton, écrivez l’appel à l’action dans le champ TEXTE DU BOUTON, ensuite collez le lien de redirection dans le champ URL DU BOUTON. Sélectionnez enfin la couleur du bouton parmi près de 20 possibilités. Terminez en sélectionnant l’une des trois tailles : PETIT, NORMAL, LARGE.

12/ Réglez les PADDINGS (espace à l’intérieur de la section) et les MARGES (espace à l’extérieur de la section).

**Félicitations, la section FLIP FLAP TEXTE est à présent personnalisée aux couleurs de votre marque.**

Pour ajouter du texte dans les cartes animées, retournez dans la colonne des sections situées sur la gauche de votre écran. Pour ajouter des mots, cliquez sur AJOUTER ITEM sous la section FLIP FLAP TEXTE ou cliquez sur l’un des mots de démonstration pour le modifier.

Les explications détaillées se trouvent dans la vidéo tuto disponible au bas de cette page.

Pensez à cliquer ENREGISTRER après avoir travaillé la section pour ne pas perdre vos modifications.

### L’astuce

Pour qu’aucune carte ne soit vide, privilégiez des mots ayant le même nombre de lettres.

### Retrouvez l'intégralité du tutoriel dans la vidéo suivante 👇

{% embed url="<https://vimeo.com/903674435?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section FLIP FLAP TEXTE du thème SHOPIWEB PREMIUM
{% endembed %}


# Galerie de style

Une section avancée pour créer un LookBook sans coder.

***Le LookBook ou la Galerie de style vous permet d’afficher une photo dans laquelle vous contextualisez le produit. Ensuite, la section propose la possibilité de placer des points sur lesquelles le visiteur peut cliquer pour afficher des détails et éventuellement ajouter le produit à son panier. Cette section est redoutablement efficace pour inciter rapidement à l’achat.***

{% hint style="info" %}
Version 1.3.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FURrSOxhk4J59dqbMgeud%2FCapture%20d%E2%80%99e%CC%81cran%202024-01-25%20a%CC%80%2014.52.55.png?alt=media&amp;token=1a38a586-dc9a-4da0-bb11-f5cc0b883fb2" alt="Capture d&#x27;écran de la section LOOKBOOK du thème meilleur français Shopify®, SHOPIWEB PREMIUM"><figcaption><p>Section Galerie de style (LookBook)</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

1/ Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > GALERIE DE STYLE. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

2/ Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran. Personnalisez-les selon vos envies. Les explications détaillées se trouvent dans la vidéo tuto disponible au bas de cette page.

{% hint style="danger" %}
**ATTENTION :** si vous ne voyez pas les changements, pensez à cliquer sur ENREGISTRER et à rafraîchir la page du navigateur pour relancer les scripts de la section GALERIE DE STYLE.
{% endhint %}

3/ Vous devez ajouter des points sur chaque produit de la photo. Pour ce faire, cliquez sur AJOUTER POINT depuis la colonne de gauche, sous la section GALERIE DE STYLE. Les détails pour régler chaque point est expliqué dans le tutoriel vidéo en bas de cette page.

4/ Une fois que tout est terminé, pensez à sauvegarder vos changements en cliquant sur ENREGISTRER situé en haut à droite de la fenêtre.

### Découvrez les détails dans le tutoriel vidéo suivant 👇

{% embed url="<https://youtu.be/1ZSbQlVqxIg>" %}
Tutoriel vidéo du thème SHOPIWEB PREMIUM pour apprendre à personnaliser la section LOOKBOOK (Galerie de style)
{% endembed %}

{% hint style="success" %}
**ASTUCE :** La section GALERIE DE STYLE ou LookBook offre la possibilité d’afficher un produit, ou bien des informations. N’hésitez donc pas à l’utiliser aussi pour communiquer sur des caractéristiques de votre produit. Ce sera toujours plus ludique et interactif qu’un simple bloc de texte.
{% endhint %}


# Chronologie

La section CHRONOLOGIE permet de présenter une roadmap (frise chronologique) des dates importantes de votre marque e-commerce.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FOOiJW5dSrcNIGjX1QrJr%2FIMAGE1_Chronologie.png?alt=media&amp;token=713f0bbd-d7c0-4a25-b208-4f50ff5670db" alt="La section CHRONOLOGIE du thème SHOPIWEB PREMIUM permet de présenter les moments importants de votre projet e-commerce sous forme de frise chronologique."><figcaption><p>La section CHRONOLOGIE</p></figcaption></figure>

{% 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 %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FveJPpndc5Dtr1g8O7Pgk%2FIMAGE2_Chronologie.png?alt=media&amp;token=1d983922-3195-4125-bee5-ecc16f15638f" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section CHRONOLOGIE"><figcaption><p>Ajouter la section CHRONOLOGIE avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > CHRONOLOGIE. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

#### Général

* Choisissez la COULEUR D'ARRIÈRE PLAN (les [couleurs](/theme-premium/documentation/parametres-du-theme/couleurs) dépendent de celles que vous avez ajoutés depuis vos paramètres de thème). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN à condition d'avoir choisi une couleur foncé.
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* **Alignement du texte :** Préférez-vous que le texte (titre et description de la section) soit à gauche ou centré ?

#### En-tête de la section

* **Légende image :** Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne pas en mettre. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* **Titre overlay :** Écrire le titre à afficher en tant que "Titre overlay" (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### Chronologie&#x20;

Ces options n'étant pas visible tant que vous n'avez pas ajoutez des items (les cartes de la frise chronologique), vous pourrez revenir à cette étape du tutoriel plus tard.

* **Largeur de la ligne :** Faites glisser le curseur pour régler l'épaisseur du trait de la frise chronologique. Le trait n'apparaît pas tant qu'il n'y a pas d'item ajouté.
* **Couleur de la ligne :** Sélectionnez la couleur de la ligne de votre frise chronologique (ces couleurs dépendent de celles ajoutées dans les paramètres de thème).
* **Diamètre des points :** Ajustez la taille du diamètre des points qui seront devant chacun des items.

#### Bouton 'En savoir plus'

* Si vous le souhaitez, il est possible d'ajouter un Appel à l'action à votre section CHRONOLOGIE. Inscrivez le texte, sélectionnez le lien vers lequel sera redirigé l'utilisateur et terminez par la couleur du bouton.

#### Espacement de la section

* **Padding supérieur :** Ajoutez de l'espace à l'intérieur du HAUT de la section.
* **Padding inférieur :** Ajoutez de l'espace à l'intérieur du BAS de la section.
* **Marge supérieure :** Ajoutez de l'espace à l'extérieur du HAUT de la section.
* **Marge inférieure :** Ajoutez de l'espace à l'extérieur du BAS de la section.

### COMMENT AJOUTER UN ITEM

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FVdcSbiee0KZiSR4TyQmB%2FIMAGE3_Chronologie.png?alt=media&amp;token=fd3b7405-b21e-411f-855d-0a74eb1308d0" alt="Pour ajouter une date sous forme de carte à votre frise chronologique, cliquez sur AJOUTER ITEM"><figcaption><p>Cliquer sur AJOUTER ITEM pour insérer une date à la frise chronologique</p></figcaption></figure>

* Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section CHRONOLOGIE.
* Une fois l'item ajouté, sélectionnez-le pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

#### General

* **Alignement du texte :** Souhaitez-vous que le texte de la carte soit aligné sur la gauche, à droite ou centré ? Sélectionnez l'option correspondante.
* **Couleur de la bordure :** Vous pouvez ajouter une bordure à la carte en choisissant la couleur depuis le menu déroulant.
* **Largeur de la bordure :** Ajustez maintenant la taille de la bordure. Mettez la taille à zéro si vous ne voulez pas afficher de bordure.
* **Ombre :** Pour afficher une ombre ou pas, sélectionnez le réglage de votre choix à partir du menu déroulant.

#### Animation

* **Effet d'animation :** Sélectionnez l'une des 43 animations disponibles dans le thème SHOPIWEB PREMIUM avec laquelle la section apparaîtra à l'écran de l'utilisateur.
* **Vitesse d'animation :** Réglez à présent la vitesse à laquelle cette animation va s'effectuer.

#### Image&#x20;

Il est possible d'ajouter une image à la carte. Pour en afficher une, sélectionnez-la depuis votre bibliothèque ou importez-en une. Ajustez ensuite son orientation et son éventuel recadrage. Souhaitez-vous que l'attention du visiteur soit attiré sur le haut, le centre, le bas, la droite ou la gauche de l'image ? Cliquez sur l'option de votre choix.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FibjaidWBLjJhzCxAF6J9%2FIMAGE4_Chronologie.png?alt=media&amp;token=6c08628e-3394-4ce0-8a49-9ebfef1d5215" alt="Un Item de la section CHRONOLOGIE se compose essentiellement d&#x27;une Date, d&#x27;un Titre, d&#x27;une Description et d&#x27;un Bouton d&#x27;appel à l&#x27;action"><figcaption><p>Un Item ou Élément sans image de la frise chronologique</p></figcaption></figure>

#### Texte

* **Date :** Inscrivez la date lié à l'évènement de votre frise chronologique. Le thème permet de la mettre en valeur.
* **Couleur de l'arrière plan 'Date' :** Sélectionnez la couleur du cartouche de la date. Les couleurs dépendent de celles entrées dans les paramètres de thème.
* **Titre :** Écrivez le titre de la carte.
* **Taille du titre :** Sélectionnez la taille d'affichage du titre. De préférence, optez pour un titre de taille inférieur à celui de la section pour respecter la hiérarchie visuelle.
* **Description :** Écrivez la description de la carte. Ajustez ensuite sa taille à l'aide de l'option suivante : Taille de description.

#### Bouton

* Pour afficher un bouton à votre carte, écrivez le texte du bouton dans le champs TEXTE DU BOUTON (laissez ce champs vide si vous ne souhaitez pas mettre de bouton). Dans l'option suivante, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

Recommencez la même procédure pour chaque item ou élément de votre frise chronologique.

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

### L'ASTUCE

Mettez en valeur les grandes étapes ou date de votre marque. Vous pouvez ainsi présenter aux visiteurs les objectifs et prochaines améliorations de vos produits. La section CHRONOLOGIE apporte de l'interactivité à votre contenu.

### LA VIDÉO

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


# Collage dynamique

Une section Collage très avancée vous permettant d’ajouter jusqu’à 9 blocs différents.

{% hint style="info" %}
Version 1.3.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FByt1gcjJqQjr1tZIOmAh%2FCollage-dynamique.png?alt=media&amp;token=13f56694-e4c3-40e4-90fe-40a55ce2b1ce" alt="Capture d&#x27;écran de la section collage dynamique du thème shopify SHOPIWEB"><figcaption><p>La section COLLAGE DYNAMIQUE du thème Shopify® français SHOPIWEB PREMIUM</p></figcaption></figure>

{% hint style="danger" %}
**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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

Contrairement au COLLAGE du thème Dawn qui permet d’ajouter une image, un produit et une collection dans une même section, le COLLAGE DYNAMIQUE du thème SHOPIWEB PREMIUM repousse les limites. Vous pouvez ajouter 9 blocs différents dans une même section tel que :

* Texte
* Image
* Image Texte
* Vidéo
* Collection
* Produit
* Rangée réductible
* Formulaire de contact
* HTML/ Liquid code

### Ajouter et personnaliser la section COLLAGE DYNAMIQUE

{% hint style="info" %}
**INFO :** Retrouvez l’intégralité du tutoriel en vidéo, disponible au bas de cette page.
{% endhint %}

**1/ Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > COLLAGE DYNAMIQUE.** Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

**2/ Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.** Effectuez les réglages en fonction de vos besoins. Les explications détaillées se trouvent dans la vidéo tuto disponible au bas de cette page.

**3/ Pour ajouter un nouveau bloc dans votre section COLLAGE DYNAMIQUE**, cliquez sur AJOUTER UN BLOC après avoir sélectionné la section dans la colonne située à gauche de votre écran.

**4/ N’oubliez pas d’enregistrer** pour voir la mise en forme finale de votre COLLAGE DYNAMIQUE.

### L’astuce

La section COLLAGE DYNAMIQUE permet de créer une composition de plusieurs éléments, un peu comme un tableau. Vous rendez ainsi votre boutique plus vivante et vous présentez toutes sortes d’informations dans un même espace de façon esthétique et efficace.

### Retrouvez l'intégralité du tutoriel dans la vidéo suivante 👇

{% embed url="<https://youtu.be/5bsZmJFpBsw>" %}
Vidéo tuto pour apprendre à ajouter et personnaliser une section COLLAGE sur Shopify®
{% endembed %}


# Média navigation

La section MÉDIA NAVIGATION permet d'afficher 4 images et/ou vidéos avec description, accessible à l'aide d'un menu dédié.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FxT3yLWVeOTGWCt1rjXQg%2FIMAGE1_Media_Navigation.png?alt=media&amp;token=38bc9a60-40ad-4855-98de-6da75ba0c925" alt="Capture d&#x27;écran de la section MÉDIA NAVIGATION depuis la boutique de démonstration demo.shopiweb.fr"><figcaption><p>La section MÉDIA NAVIGATION</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FaZE5hRZUXvDbILJE6N53%2FIMAGE2_Media_Navigation.png?alt=media&amp;token=ecf74def-d794-4792-9a47-354d56197a7b" alt="Capture d&#x27;écran de l&#x27;interface de personnalisation du thème SHOPIWEB PREMIUM, depuis laquelle vous pouvez ajouter une section MÉDIA NAVIGATION"><figcaption><p>Ajouter la section MÉDIA NAVIGATION depuis l'interface de personnalisation du thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > MÉDIA NAVIGATION. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

* Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
* **Sélectionnez le TYPE D'ARRIÈRE PLAN souhaité** (Couleur prédéfinie, dégradé personnalisé)
* **Choisissez la COULEUR D'ARRIÈRE PLAN** (les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème).
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit centré ou à gauche ?
* Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre à afficher en tant que TITRE OVERLAY (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
* Souhaitez-vous que vos visuels (images ou vidéos) aient un contour ? Si oui, de quelle couleur et de quelle taille le voulez-vous ? Réglez-les à l'aide des options de personnalisation suivantes.
* Concernant la navigation d'un onglet à un autre, souhaitez-vous qu'il y est une bordure ? Si oui, de quelle couleur et de quelle taille souhaitez-vous l'avoir ? Réglez ces options.
* Sélectionnez la taille de l'ombre souhaitée qui apparaîtra derrière vos visuels, ou AUCUNE OMBRE si vous n'en voulez pas.
* Terminez les réglages de la section par les espacements. Les PADDINGS permettent d'ajouter de l'espace à l'intérieur de la section. Les MARGES permettent d'ajouter de l'espace à l'extérieur de la section.

***Les réglages de la section sont terminés. Maintenant, ajoutez autant d'onglets que nécessaires selon vos besoins.***

### COMMENT AJOUTER UN ONGLET DE MÉDIA NAVIGATION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FaHosRS7ucSNUTbjxh7fA%2FIMAGE3_Media_Navigation.png?alt=media&amp;token=2464ee34-b601-4725-b3d8-dd3d405803f9" alt="Capture d&#x27;écran de l&#x27;interface de personnalisation du thème SHOPIWEB PREMIUM, depuis laquelle vous pouvez ajouter jusqu&#x27;à 4 onglets par section MÉDIA NAVIGATION"><figcaption><p>Ajouter un onglet dans la section MÉDIA NAVIGATION depuis l'interface de personnalisation du thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Sélectionnez la section MÉDIA NAVIGATION depuis la colonne située à gauche de l'écran. Juste en dessous, vous verrez un lien AJOUTER ONGLET. Cliquez dessus pour ajouter votre premier onglet de section MÉDIA NAVIGATION. **Vous pouvez en ajouter 4 maximum**.
* Une fois le premier onglet ajouté, les options de personnalisation s'affichent dans la colonne à droite de l'écran.

### COMMENT PERSONNALISER UN ONGLET DE MÉDIA NAVIGATION

* Une fois l'onglet ajouté, sélectionnez-le pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
* IMAGE : Ajouter une image si c'est une image que vous souhaitez afficher. Pour présenter une vidéo, passez à l'étape suivante.
* VIDÉO : Importez la vidéo en cliquant sur SÉLECTIONNER UNE VIDÉO. Cocher AUTOPLAY pour que la vidéo se lance automatiquement. Cocher LOOP pour que la vidéo tourne en boucle. Cocher MUTE pour enlever le son de la vidéo. Cocher CONTRÔLES pour afficher le lecteur de la vidéo afin que les utilisateurs puissent faire pause ou avancer la vidéo.
* Pour afficher un icône au format SVG, coller le code dans le champ dédié. Cliquez sur BOOTSTRAP ICONS pour accéder à une bibliothèque gratuite d'icônes SVG.
* Écrivez le titre souhaité pour votre onglet.
* Écrivez la description en lien avec l'image ou la vidéo de l'onglet, ou bien supprimez le texte pour ne rien afficher. Ensuite, réglez la taille du texte de votre description.

Recommencez la procédure pour chacun de vos onglets.

### L'ASTUCE&#x20;

La section MÉDIA NAVIGATION permet de réduire la longueur de vos pages. C'est une section 4 en 1. Elle est idéale pour remplacer une suite de sections IMAGE TEXTE ou VIDÉO TEXTE. Elle apporte une touche supplémentaire d'interactivité à votre boutique en ligne ce qui vient améliorer l'engagement de vos visiteurs.

### LA VIDÉO&#x20;

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


# 🏆 Vidéo Sticky

Afficher une vidéo dans une fenêtre en bas à gauche de l’écran de votre boutique e-commerce.

{% hint style="info" %}
Version 1.4.0
{% endhint %}

**Souhaitez-vous présenter votre nouveau produit au plus grand nombre de visiteurs ? Attirer l’attention sur la promotion du moment ?** La nouvelle section VIDÉO STICKY vous permet d’afficher en miniature une vidéo qui tourne en boucle dans une fenêtre volante en bas de l’écran. VIDÉO STICKY permet aussi l’affichage d’un lien vers n’importe lequel de vos produits pour inciter rapidement à l’achat.

{% hint style="warning" %}
**ATTENTION :** Cette section est disponible depuis la version 1.4. Si vous possédez une version antérieure du thème, pensez à le mettre à jour en suivant le tutoriel disponible depuis [ce lien](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FcYa9YUmlNXgQPr4McrJH%2FVideo-sticky_Shopiweb-Premium.png?alt=media&amp;token=587dacc6-0000-4ca6-90f8-4bcc5222aace" alt="Capture d&#x27;écran d&#x27;une boutique e-commerce construite avec le thème SHOPIWEB PREMIUM permettant l&#x27;affichage d&#x27;une vidéo dans une fenêtre volante en bas à gauche de l&#x27;écran"><figcaption><p>En bas à gauche de l'écran, la section VIDÉO STICKY permettant l'affichage d'une vidéo</p></figcaption></figure>

{% hint style="danger" %}
**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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

### Ce que vous apprenez dans ce tutoriel

* Comment ajouter la section VIDÉO STICKY sur votre boutique
* À quel endroit ajouter la section pour que la vidéo s’affiche sur toutes les pages
* Comment insérer un lien vers un produit sous votre vidéo

### Le tutoriel en vidéo :

{% embed url="<https://vimeo.com/933201051?share=copy>" %}
Tutoriel vidéo du thème SHOPIWEB PREMIUM pour apprendre à personnaliser l'application VIDÉO STICKY
{% endembed %}

### L’astuce

VIDÉO STICKY est la section parfaite pour les évènements tel que Black Friday ou Cyber Monday pour donner un coup de fouet à vos ventes. Créez une jolie vidéo avec du texte et des animations grâce à l’application Canva® et affichez le résultat sur votre boutique Shopify® grâce à la section VIDÉO STICKY du thème SHOPIWEB PREMIUM !


# Tracking

TRACKING est une section permettant d’afficher les informations de suivis de commande à vos clients directement depuis votre boutique Shopify®.

{% hint style="info" %}
Version 1.4.0
{% endhint %}

***Aimeriez-vous afficher les informations de suivis de commande à vos clients sans qu’ils soient redirigés sur un autre site ?*** Grâce à la section TRACKING du thème SHOPIWEB PREMIUM, offrez à vos clients la possibilité de suivre leur commande tout en profitant de l’expérience utilisateur de votre boutique en ligne.

{% hint style="warning" %}
**ATTENTION :** Cette section est disponible depuis la version 1.4. Si vous possédez une version antérieure du thème, pensez à le mettre à jour en suivant le tutoriel disponible depuis [ce lien](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fo2UBVgCIIZBF7VGAZCFK%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-17%20a%CC%80%2017.16.45.png?alt=media&amp;token=12e92cc0-77cb-406d-989e-a44cfadf4853" alt="Capture d&#x27;écran de la section TRACKING depuis une boutique Shopify® conçue avec le thème français SHOPIWEB PREMIUM"><figcaption><p>La section TRACKING du thème SHOPIWEB PREMIUM permettant l'affichage des informations de livraison</p></figcaption></figure>

{% hint style="danger" %}
**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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

**1/ Depuis la personnalisation du thème**, sélectionnez le modèle de page sur lequel vous souhaitez ajouter la section.

**2/ Depuis la colonne à gauche de votre écran, cliquez sur AJOUTER UNE SECTION > TRACKING.** Une fois la section ajoutée à votre page, vous pouvez la déplacer où vous le souhaitez dans le corps de votre page.

**3/ Cliquez sur la section pour voir les options de personnalisation apparaître dans la colonne située à droite de votre écran.** Les options sont les mêmes que pour les autres sections du thème SHOPIWEB PREMIUM. Personnalisez la couleur d’arrière-plan, écrivez un titre ainsi qu’une description et réglez les marges à l’intérieur et à l’extérieur de la section.

**4/ Pensez à ENREGISTRER** pour ne pas perdre vos modifications.

#### Félicitations ! Vous savez ajouter et personnaliser la section TRACKING sur votre boutique e-commerce Shopify® avec le thème SHOPIWEB PREMIUM.

### L’astuce

Cette section peut être ajouté sur la page de votre choix. Mais, par souci de logique, nous vous recommandons de l’insérer sur une page dédiée ou bien sur votre page F.A.Q.


# Barre de réduction

La section BARRE DE RÉDUCTION permet de présenter un code promo et de le copier en 1 clic à l'aide d'un bouton.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fjqq58hZcRcTDEsDh37Wq%2FIMAGE1_Barre_de_reduction.png?alt=media&amp;token=ab7d96a5-7813-4f65-b2b0-4fa149c0fa70" alt="Capture d&#x27;écran de la section BARRE DE RÉDUCTION depuis la boutique de démonstration demo.shopiweb.fr"><figcaption><p>La section BARRE DE RÉDUCTION</p></figcaption></figure>

{% 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 en passant par ce lien.
{% endhint %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F6fND0UA781Qynr8n24xz%2FIMAGE2_Barre_de_reduction.png?alt=media&amp;token=8a7dbf05-aa1c-46d3-8307-bda6372e8495" alt="Capture d&#x27;écran de l&#x27;interface de personnalisation du thème SHOPIWEB PREMIUM, depuis laquelle l&#x27;utilisateur ajoute une section BARRE DE RÉDUCTION"><figcaption><p>Ajouter la section BARRE DE RÉDUCTION depuis l'interface de personnalisation du thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > BARRE DE RÉDUCTION. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

* Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de votre écran.
* Sélectionnez le TYPE D'ARRIÈRE PLAN souhaité (Couleur prédéfinie, dégradé personnalisé)
* Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème).
* Sélectionnez l'EFFET D'ANIMATION et la VITESSE D'ANIMATION.
* Terminez les réglages de la section par les espacements. Les PADDINGS permettent d'ajouter de l'espace à l'intérieur de la section. Les MARGES permettent d'ajouter de l'espace à l'extérieur de la section.

Les réglages de la section sont terminés. Maintenant, ajoutez les blocs Titre, Texte et Réduction.

* Depuis la colonne de gauche, sélectionnez la section BARRE DE RÉDUCTION puis cliquez sur AJOUTER UN BLOC > TITRE.
* Une fois le titre ajouté, personnalisez si nécessaire, réglez la balise titre SEO (nous vous recommandons de mettre un h3) ainsi que la taille du titre.
* Recommencez l'opération pour le bloc TEXTE et RÉDUCTION.
* Une fois les blocs ajoutés et personnalisés, cliquez sur ENREGISTRER.

{% hint style="danger" %}
**ATTENTION :** l'ajout de la section BARRE DE RÉDUCTION ne rend pas votre code promo actif sur Shopify®. Une fois votre section ajouté et personnalisé, pensez à [créer votre réduction depuis votre interface Shopify®](https://help.shopify.com/fr/manual/discounts/discount-types).
{% endhint %}

### L'ASTUCE

La section BARRE DE RÉDUCTION améliore l'expérience utilisateur de votre boutique e-commerce. Il suffit à l'utilisateur de cliquer sur le bouton pour copier le code. <mark style="background-color:yellow;">Réduire les efforts des prospects les aide à acheter</mark>. Cette section est idéale en bas de page car offrir une remise aux personnes prêtes à quitter votre boutique peut les inciter à acheter.

### LA VIDÉO

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


# Texte déroulant

La section TEXTE DÉROULANT permet de faire défiler du texte à la façon d'un prompteur sur une boutique Shopify®.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FeBwuzgeyoPlDzLyARRUi%2FIMAGE1_Texte_deroulant.png?alt=media&amp;token=b5d80c0c-a02f-4e2a-93c6-35cd504ff3b6" alt="La section TEXTE DÉROULANT du thème SHOPIWEB PREMIUM permet de rappeler les points forts de votre produit et marque en faisant dérouler le texte comme sur un prompteur"><figcaption><p>La section TEXTE DÉROULANT</p></figcaption></figure>

{% 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 en passant par [ce lien](https://www.shopiweb.fr).
{% endhint %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fu0grXDTKuioliVP6s45J%2FIMAGE2_Texte_deroulant.png?alt=media&amp;token=5fabe268-2f53-4283-9aed-b70c92ad1c9d" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section texte déroulant"><figcaption><p>Ajouter la section TEXTE DÉROULANT avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > TEXTE DÉROULANT. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

* Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de l'écran.
* **Disposition du texte déroulant (bureau) :** Cliquez sur le bouton GAUCHE ou DROITE pour faire apparaître la partie de texte déroulant dans la partie droite ou gauche de la section. Cette option n'est valable que pour les utilisateurs consultant votre site depuis un ordinateur. Depuis un mobile, la section s'ajustera automatiquement au format vertical de l'écran en plaçant les deux parties de section l'une au dessus de l'autre.
* Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème).
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* **Bordure :** Si vous avez optez pour un affichage en CONTENEUR, il est possible de créer une bordure sur ce conteneur. Choisissez donc sa couleur, sa taille et l'ombre.
* **Image :** Pour afficher une image en arrière plan de section, sélectionnez-là depuis votre bibliothèque ou importez-en une. Réglez ensuite sa taille sur mobile à l'aide des boutons PETIT, MOYEN ou GRAND. Si vous avez optez pour un affichage en CONTENEUR, ajustez-en sa largeur en entrant la taille en pixels dans le champs LARGEUR MAXIMALE (PX).
* Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit centré ou à gauche ?
* Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
* Pour afficher un bouton à la section TEXTE DÉROULANT, écrivez le texte du bouton dans le champ TEXTE DU BOUTON (laissez ce champ vide si vous ne souhaitez pas mettre de bouton). Dans le champ suivant, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

### PERSONNALISATION DU TEXTE DÉROULANT

La suite des réglages concernent votre texte qui va dérouler en boucle.

* **Couleur de l'arrière plan :** Les couleurs du menu déroulant dépendent de celles que vous avez ajoutés depuis vos paramètres de thème. Cochez l'option DÉGRADÉ D'ARRIÈRE PLAN si vous souhaitez un effet de dégradé dans votre couleur d'arrière plan (à condition d'avoir choisi une couleur foncée).
* **Vitesse du texte déroulant :** Ajustez la vitesse de défilement à l'aide du curseur. Moins il y a de secondes et plus le texte défilera rapidement. Plus il y a de secondes et plus le texte défilera lentement.
* **Texte déroulant :** Inscrivez le texte que vous souhaitez faire défiler dans le champs texte.
* **Alignement du texte déroulant :** Souhaitez-vous que le texte déroulant soit ajusté sur la gauche ? Au centre ? ou à droite ? Cliquez sur le bouton correspondant à votre choix.
* **Poids de la police :** Décidez d'afficher le texte déroulant en **GRAS** en cliquant sur **BOLD** ou le laisser en NORMAL en cliquant sur NORMAL.
* **Transformation du texte déroulant :** Modifiez en un clic l'apparence du texte déroulant. L'option NORMAL affichera le texte de la même façon tel que vous l'avez écris. L'option CAPITAL affichera le texte en mettant la première lettre de chaque mot en majuscule. L'option MINUSCULE mettra tout le texte en minuscule, sans majuscule aucune. Et enfin, l'option MAJUSCULE affichera toutes les lettres du texte défilant en majuscule.
* **Taille du texte déroulant :** Choisissez la taille d'affichage de votre texte déroulant. Ne vous recommandons de sélectionner la taille de telle façon que chaque phrase ne soit pas coupée par un retour à la ligne.
* **Effet d'animation :** Sélectionnez l'effet avec lequel la section TEXTE DÉROULANT apparaîtra lorsque l'utilisateur défilera l'écran jusqu'à arriver à la section. Créer du mouvement permet d'attirer l'attention sur le contenu de votre section. Et la qualité de votre copywriting permet d'engager le lecteur en lui donnant envie de lire votre argumentaire. Vous avez le choix avec plusieurs dizaines d'effets.
* **Vitesse d'animation :** Sélectionnez la vitesse à laquelle vous souhaitez que l'effet d'animation s'effectue.
* **Espacement de la section :** Le PADDING permet d'ajouter de l'espace à l'intérieur de la section. La MARGE vous permet d'ajouter de l'espace à l'extérieur de la section. PENSEZ-Y : Une boutique professionnelle doit respirer. Nous vous recommandons donc d'ajouter un Padding de taille 13 en haut et en bas de chaque section. Taille que vous pouvez ajuster selon les effets souhaités entre les sections.

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

### L'ASTUCE

Cette section vous permet de faire un rappel des points forts de votre produit et de votre marque d'une façon différente. L'un des aspects d'un marketing réussi consiste à *répéter les bénéfices*. La section TEXTE DÉROULANT est l'occasion de faire cette répétition avec un design différent des autres sections de votre page de vente.

### LA VIDÉO

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


# Image texte explorateur

La section IMAGE TEXTE EXPLORATEUR permet de présenter jusqu'à 5 images accessibles depuis des onglets.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FFr5p9BRAvuCHEW2ZW8yU%2FIMAGE1_Image_texte_explorateur.png?alt=media&amp;token=5b39fdb1-316c-4a94-82ff-1659c8dd0eea" alt="La section IMAGE TEXTE EXPLORATEUR du thème SHOPIWEB PREMIUM permet de présenter 5 images dans une même section en les rendant disponible dans des onglets"><figcaption><p>La section IMAGE TEXTE EXPLORATEUR</p></figcaption></figure>

{% 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, [commander une licence SHOPIWEB PREMIUM](https://www.shopiweb.fr).
{% endhint %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FOyDQAxJLGW6TDpiy6eef%2FIMAGE2_Image_texte_explorateur.png?alt=media&amp;token=e0dc8488-032c-4bb2-a6dc-e20aa0c1be88" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section IMAGE TEXTE EXPLORATEUR"><figcaption><p>Ajouter la section IMAGE TEXTE EXPLORATEUR avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > IMAGE TEXTE EXPLORATEUR. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

#### Général

* Une fois la section ajoutée, sélectionnez-la pour voir apparaître les options de personnalisation dans la colonne à droite de l'écran.
* **Image d'arrière plan :** Pour afficher une image en arrière plan de votre section IMAGE TEXTE EXPLORATEUR, cliquez sur SÉLECTIONNER UNE IMAGE. Ensuite, une fois l'image ajoutée, ajustez le niveau d'intensité et de flou souhaité à l'aide des deux curseurs du dessous. Cette option est facultative.
* Si vous n'avez pas choisi l'option précédente qui est d'ajouter une image comme arrière plan, choisissez la COULEUR D'ARRIÈRE PLAN (*les couleurs dépendent de celles que vous avez ajoutés depuis vos paramètres de thème*). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN dans votre couleur à condition d'avoir choisi une couleur foncé.
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* **Largeur d'image sur ordinateur :** Selon la largeur de votre section, souhaitez-vous que l'image prenne 25%, 50% ou 75% de la section ? Choisissez la largeur d'image sur ordinateur en cliquant sur le bouton correspondant. La section étant optimisée pour l'affichage mobile, cette dernière s'ajustera automatiquement pour les utilisateurs consultant votre boutique depuis leur smartphone.
* **Disposition du texte (bureau) :** Cliquez sur le bouton GAUCHE ou DROITE pour faire apparaître l'explorateur d'images dans la partie droite ou gauche de la section. Cette option n'est valable que pour les utilisateurs consultant votre site depuis un ordinateur. Depuis un mobile, la section s'ajustera automatiquement au format vertical de l'écran en plaçant les deux parties de section l'une au dessus de l'autre.

#### Images

* **Image orientation :** Quel est le format des images que vous mettez dans votre section IMAGE TEXTE EXPLORATEUR ? Sélectionnez le format correspondant (Carré, Paysage ou Portrait).
* **Recadrage de l'image :** Selon le format choisi, souhaitez-vous que l'attention de l'internaute soit attirée vers le Haut, le Centre, le Bas, la Gauche ou la Droite de l'image ? Cliquez sur l'option souhaitée. Pour laisser votre image par défaut, cliquez sur Centre.
* **Bordure :** Il est possible de créer une bordure sur vos images. Choisissez donc sa couleur, sa taille et l'ombre.

#### Texte

* Sélectionnez l'alignement du texte. Préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ?
* Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### Contenu caché&#x20;

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FdNVxHvzSCyrPEVHtIfuQ%2FIMAGE3_Image_texte_explorateur.gif?alt=media&amp;token=42904cb7-f6bc-4f33-9a3e-c6515660aa0b" alt="La section IMAGE TEXTE EXPLORATEUR est équipée de l&#x27;option CONTENU CACHÉ permettant de ne pas déformer la section lorsque la taille du texte est beaucoup plus grande que la partie des images"><figcaption><p>L'option CONTENU CACHÉ permet de cacher une partie du texte et de le rendre visible par l'utilisateur à l'aide d'un bouton</p></figcaption></figure>

Pour les longs textes, il est possible d'en cacher une partie que l'utilisateur pourra faire apparaître en cliquant sur un bouton. Activez cette fonctionnalité en cochant l'option.

* **À partir de... :** Ajustez la taille du contenu affiché en pixels à l'aide du curseur.
* **Couleur du fondu :** Pour un affichage design du texte et éviter l'arrêt brutal du bloc de texte, sélectionnez la couleur du fondu en fonction de votre couleur d'arrière plan. Pour un effet de fondu réussi, nous vous recommandons de sélectionner la même couleur que celle choisie pour votre arrière plan.
* **Texte (voir plus) :** Si vous développez votre boutique sur le marché français, vous pouvez laissez le texte par défaut. Et si vous développez votre boutique sur un marché étranger, vous pouvez traduire facilement le bouton permettant à l'utilisateur d'afficher tout le bloc texte et le coller dans ce champ dédié.
* **Texte (voir moins) :** Idem que pour le réglage précédant mais cette fois-ci, pour réduire le bloc texte après lecture.

#### Bouton&#x20;

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FHbEGruCGuB9RnLcM7zJi%2FIMAGE4_Image_texte_explorateur.png?alt=media&amp;token=463af7dc-ace8-4031-9c79-49278f24f417" alt="Il est possible d&#x27;ajouter un appel à l&#x27;action à votre section IMAGE TEXTE EXPLORATEUR en inscrivant votre appel à l&#x27;action dans le champs dédié"><figcaption><p>Bouton d'appel à l'action de la section IMAGE TEXTE EXPLORATEUR</p></figcaption></figure>

* Pour afficher un bouton à la section IMAGE TEXTE EXPLORATEUR, écrivez le texte du bouton dans le champ TEXTE DU BOUTON (laissez ce champ vide si vous ne souhaitez pas mettre de bouton). Dans le champ suivant, sélectionnez l'URL vers laquelle les utilisateurs seront redirigés après avoir cliqué sur le bouton. Ensuite, choisissez la couleur du bouton à l'aide du menu déroulant (les couleurs dépendent de celles entrées dans vos paramètres de thème). Terminez par la taille du bouton : PETIT, NORMAL ou LARGE.

#### Espacement de la section

* **Padding supérieur :** Ajoutez de l'espace à l'intérieur du HAUT de la section.
* **Padding inférieur :** Ajoutez de l'espace à l'intérieur du BAS de la section.
* **Marge supérieure :** Ajoutez de l'espace à l'extérieur du HAUT de la section.
* **Marge inférieure :** Ajoutez de l'espace à l'extérieur du BAS de la section.

### COMMENT AJOUTER DES IMAGES&#x20;

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FlQ4vhfbzGmP1jec7fq7A%2FIMAGE5_Image_texte_explorateur.png?alt=media&amp;token=8f9c704d-f0bb-4023-8992-f785c0099e67" alt="La section IMAGE TEXTE EXPLORATEUR permet d&#x27;ajouter jusqu&#x27;à 5 images accessibles d&#x27;un simple clic"><figcaption><p>Cliquer sur AJOUTER ITEM puis ajouter l'image depuis la colonne de personnalisation</p></figcaption></figure>

* Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER ITEM sous la section IMAGE TEXTE EXPLORATEUR. Vous pouvez ajouter jusqu'à 5 ITEMS (images).
* Une fois l'item ajouté, sélectionnez-le pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

#### Item

* **Image :** Cliquez sur SÉLECTIONNER UNE IMAGE puis, choisissez-en une depuis votre bibliothèque de contenu ou importez-en une depuis votre ordinateur. IMAGE 6 (Image bouton pour chaque lien permettant d'afficher l'image de l'item) (La section IMAGE TEXTE EXPLORATEUR permet d'afficher une image en plus du bouton d'accès aux items)
* **Image bouton :** Cette option est facultative. Elle vous permet d'ajouter une image au bouton permettant d'afficher l'image (idéal pour les tutoriels étape par étape).
* **Titre bouton :** Écrivez l'appel à l'action permettant à l'utilisateur d'afficher l'item (image).

***Félicitations, vous avez réussi à ajouter et personnaliser la section IMAGE TEXTE EXPLORATEUR du thème SHOPIWEB PREMIUM.***

### L'ASTUCE

IMAGE TEXTE EXPLORATEUR permet de réduire le nombre de sections de votre page car elle rend accessible 5 images d'un simple clic. Elle apporte de l'interactivité à un tutoriel étape par étape et améliore ainsi l'expérience utilisateur de votre boutique e-commerce.

### LA VIDÉO

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


# Ajouter un fil d’Ariane sans code sur Shopify

Améliorez l'UX et votre SEO grâce au fil d'Ariane. Ce tuto vous montre comment l'ajouter sans code à votre boutique Shopify.

### Le fil d'Ariane est une fonctionnalité qui aide les utilisateurs à se retrouver parmi les pages de votre site e-commerce.

{% hint style="info" %}
Disponible depuis la version 1.0.
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F0wOmUz4GC2df1Oa9vyG4%2FIMAGE1-Fil-d-ariane.png?alt=media&amp;token=e3b71386-8645-4675-846a-4de03d973675" alt="La section fil d&#x27;Ariane d&#x27;une page de boutique e-commerce conçue avec Shopify"><figcaption><p>Le fil d'Ariane</p></figcaption></figure>

Si vous gérez un site e-commerce sous Shopify, vous savez à quel point il est crucial d’optimiser la **navigation** et l’expérience utilisateur. L’une des fonctionnalités les plus utiles pour cela est le **fil d'Ariane**.

{% 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 %}

Si vous utilisez le thème SHOPIWEB PREMIUM, bonne nouvelle : ce thème permet d’ajouter un fil d’Ariane sans toucher au code, en quelques clics seulement. Dans cet article, nous allons vous montrer comment ajouter et personnaliser un fil d’Ariane sur Shopify à l’aide du thème SHOPIWEB PREMIUM.

### Pourquoi utiliser un fil d'Ariane dans votre boutique Shopify ?

Le fil d'Ariane est un outil de navigation essentiel pour guider vos visiteurs à travers les différentes pages de votre **site e-commerce**. Voici pourquoi il est particulièrement utile pour les e-commerçants :

* **Amélioration de l’expérience utilisateur :** Il permet aux visiteurs de savoir où ils se trouvent sur votre site et de revenir facilement aux catégories précédentes ou à la page d'accueil. Cela simplifie la navigation dans votre *catalogue de produits*.
* **Optimisation SEO :** Les moteurs de recherche comme Google apprécient les sites bien *structurés*. Un fil d’Ariane clair aide à améliorer l’*indexation de vos pages*, ce qui contribue à l'amélioration du référencement naturel (SEO) de votre boutique.
* **Réduction du taux de rebond :** En facilitant la navigation, le fil d’Ariane incite les utilisateurs à explorer plus de pages de votre site, ce qui réduit le taux de rebond et augmente le temps passé sur votre boutique.

### Comment Ajouter un Fil d’Ariane avec le Thème SHOPIWEB PREMIUM ?

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FxKfDqLQjyONygRaPAzmp%2FIMAGE2-Fil-d-ariane.png?alt=media&amp;token=a1c8a8e5-7114-4907-8e0a-b256f18ff4a7" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur AJOUTER UNE SECTION puis sélectionner la section FIL D&#x27;ARIANE."><figcaption><p>Ajout de la section fil d'Ariane depuis l'interface de personnalisation du thème SHOPIWEB PREMIUM</p></figcaption></figure>

Contrairement à d’autres thèmes Shopify où l’ajout d’un fil d’Ariane nécessite des modifications dans le code, le thème SHOPIWEB PREMIUM permet d’ajouter cette fonctionnalité en un simple clic. Elle s'ajoute comme n'importe quelle autre section Shopify.

Voici comment ajouter un fil d'Ariane à votre site internet **sans compétences techniques** :

#### Étape 1 : Accéder à l’éditeur de thème Shopify

Rendez-vous dans votre back-office Shopify, cliquez sur "Personnaliser le thème" pour accéder à l’éditeur de thème. Le thème SHOPIWEB PREMIUM est conçu pour une **utilisation facile**, même si vous êtes **débutant** dans la création de sites e-commerce.

#### Étape 2 : Ajouter la Section Fil d’Ariane

Dans l’éditeur de thème, sélectionnez la page sur laquelle vous souhaitez ajouter le fil d’Ariane. Ensuite, cliquez sur "Ajouter une section" et choisissez "Fil d’Ariane". En un seul clic, le fil d’Ariane est intégré à votre page, que ce soit une **page produit**, une **catégorie** ou la **page d'accueil**.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FyZuHnJHr7uxAdatuA0O3%2FIMAGE3-Fil-d-ariane.png?alt=media&amp;token=b57602f5-d539-4827-9504-8064e837f1de" alt="Une fois la section FIL D&#x27;ARIANE ajoutée à la boutique, la sélectionner pour voir les options de personnalisation apparaître dans la colonne à droite de l&#x27;écran."><figcaption><p>Les options de personnalisation du fil d'Ariane</p></figcaption></figure>

#### Étape 3 : Personnaliser la Section

Le thème SHOPIWEB PREMIUM permet une personnalisation avancée de votre fil d'Ariane sans aucune compétence en développement. Voici les options disponibles :

1. **Couleurs d’arrière-plan :** La couleur de fond du fil d'Ariane s’adapte automatiquement aux couleurs que vous avez ajouté dans les paramètres de thème. Cela garantit une cohérence visuelle avec le reste de votre site internet.
2. **Affichage en pleine largeur ou dans un conteneur :** Vous pouvez choisir d’afficher le fil d'Ariane en pleine largeur pour qu’il occupe tout l’écran, ou dans un conteneur pour s'adapter au reste de la page. Cela permet une meilleure ergonomie et une optimisation pour le responsive design.
3. **Espacements internes et externes :** Ajustez facilement les *marges* à l’intérieur et à l’extérieur de la section, afin que le fil d'Ariane s’intègre parfaitement à votre vitrine en ligne.
4. **Visibilité selon les appareils :** SHOPIWEB PREMIUM vous permet de décider sur quels appareils (bureau, tablettes, mobiles) le fil d'Ariane doit s’afficher. Vous pouvez par exemple choisir de masquer cette section sur mobile si cela améliore l'expérience utilisateur.

Retrouvez l'intégralité des étapes pour ajouter un fil d'Ariane à votre boutique Shopify avec le thème SHOPIWEB PREMIUM, dans notre vidéo Youtube ci-dessous :

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

### Les avantages SEO du fil d’Ariane sur Shopify

Outre l’amélioration de la navigation, le fil d’Ariane est également un atout majeur pour le **SEO**. Voici pourquoi :

* **Meilleure indexation des pages :** Le fil d’Ariane aide les moteurs de recherche à mieux comprendre la *structure* de votre site, ce qui facilite l'indexation et peut améliorer votre classement dans les résultats de recherche.
* **Optimisation des URLs :** Un bon fil d’Ariane s’associe souvent à des URLs bien structurées, un critère essentiel pour le référencement.
* **Amélioration des clics organiques :** Un fil d’Ariane clair peut apparaître dans les résultats de recherche de Google sous forme de liens cliquables, ce qui peut inciter les utilisateurs à cliquer plus facilement sur vos pages.

### Pourquoi choisir le thème SHOPIWEB PREMIUM pour votre boutique Shopify ?

Le thème [SHOPIWEB PREMIUM](https://www.shopiweb.fr) se démarque des autres thèmes par sa facilité d’utilisation et le nombre de sections et applications inclus (près d'une centaine à ce jour). C'est donc un excellent choix pour les e-commerçants cherchant à optimiser leur boutique sans compétences techniques.

Voici quelques raisons supplémentaires d’utiliser ce thème pour votre boutique web sur Shopify :

* **Personnalisation intuitive :** Avec SHOPIWEB PREMIUM, vous pouvez personnaliser chaque page de votre site sans toucher au code HTML ou au CSS. Que vous souhaitiez ajuster des *balises SEO*, modifier les fiches produits ou optimiser l'*apparence* des pages de votre site web, tout est fait pour une prise en main rapide.
* **Design responsive :** Le thème est entièrement responsive, ce qui signifie que votre boutique sera parfaitement adaptée aux tablettes, smartphones et ordinateurs, garantissant une expérience utilisateur optimale sur tous les appareils.
* **Outils marketing intégrés :** SHOPIWEB PREMIUM inclut des outils pour optimiser le taux de conversion, notamment des modules pour les emails, la gestion des catalogues, des bannières pour promouvoir vos produits et même la création de quiz qui simulent l'interaction avec un vendeur. C'est au total près de *100 applications et sections avancées* toutes personnalisables sans taper une ligne de code.
* **Rapidité de chargement des pages :** Puisque le thème intègre déjà toutes les applications et sections dont vous avez besoin pour la création d'un site marchand, le chargement est plus rapide. Pourquoi ? Avec un thème standard, il est nécessaire d'installer des plugins (applications) pour ajouter des fonctionnalités. Le souci ? Chaque application nécessite une connexion serveur supplémentaire à celle de votre hébergeur Shopify. Résultat ? Les pages mettent plus de temps à se charger ce qui décourage vos visiteurs et pénalise votre référencement naturel auprès des moteurs de recherche. Grâce au thème SHOPIWEB PREMIUM, toutes ces fonctionnalités indispensables à une bonne boutique en ligne font *déjà partis du code du thème*. Les pages de votre site internet se chargent donc plus rapidement. Vos visiteurs apprécient et Google aussi !

Le thème SHOPIWEB PREMIUM est sans conteste le thème le plus avancé et le plus complet du marché. Toutes les fonctionnalités son intégrées au thème que **vous payez une seule fois**. Il n'y a **pas d'abonnement**. Il vous permet donc de réaliser des économies considérables contrairement aux autres thème qui nécessitent l'installation d'applications payantes (plugins) pour profiter d'autant de fonctionnalités.

C'est un outil qui satisfait tant les e-commerçants **débutants** que les plus **avancés**. Tous les outils indispensables pour un webmarketing réussi font partis du thème.

#### Le mot de la fin

Si vous utilisez le thème SHOPIWEB PREMIUM, l’ajout d’un fil d’Ariane est incroyablement simple et peut être fait en un seul clic. Non seulement cette fonctionnalité améliore la **navigation** et l’**expérience utilisateur**, mais elle a aussi un impact positif sur votre **référencement naturel**. Grâce à ses options de personnalisation avancées, vous pouvez ajuster l’apparence du fil d’Ariane pour qu’il corresponde à votre site e-commerce et à votre charte graphique, sans nécessiter de compétences techniques.

Pour les e-commerçants souhaitant optimiser leur commerce électronique de manière intuitive et efficace, SHOPIWEB PREMIUM est une solution clé en main qui combine esthétique, performance SEO, et simplicité d’utilisation.

Ajoutez un fil d'Ariane à votre boutique dès aujourd'hui et améliorez l'expérience utilisateur pour augmenter vos ventes.


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

Ce tutoriel complet vous montre comment rendre fixe une image durant le scroll et ainsi donner un effet 3D à votre page web.

{% 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).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F1KwNi9d4KpokS47VvQ0J%2FIMAGE1-Section-Parallaxe-defilante.png?alt=media&amp;token=6b772aca-6198-48b5-9b6c-82eac5ff183a" 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="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FS6YqeXwRxXu1nVjSxfwc%2FIMAGE2-Section-Parallaxe-defilante.png?alt=media&amp;token=f2cec81e-cb32-4d7e-9d04-4986c526289d" 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="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FzxfRQyyyQgHnbLGTP6eu%2FIMAGE3-Section-Parallaxe-defilante.png?alt=media&amp;token=2ba0e951-6e2f-4a42-a215-45dac3c34b73" 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="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FJrPsRH2pOHJIBVbPKYT8%2FIMAGE4-Section-Parallaxe-defilante.png?alt=media&amp;token=7ff094f0-9892-42c3-8edc-cffb0c969800" 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**.


# Multi-images avec texte

La section MULTI-IMAGES AVEC TEXTE vous permet de présenter les détails de votre produit à l'aide d'un ensemble de 5 images qui se mettent en mouvement.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FpTZoj7WyLu1ABy1XKQ9O%2FIMAGE1-Multi-images_avec_texte.png?alt=media&amp;token=286f95d7-e13e-4e16-ac92-632069e256ae" alt="La section MULTI-IMAGES AVEC TEXTE du thème SHOPIWEB PREMIUM met en mouvement 5 images dans une section semblable à &#x22;image texte&#x22;"><figcaption><p>La section MULTI-IMAGES AVEC TEXTE</p></figcaption></figure>

{% 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 %}

### COMMENT AJOUTER LA SECTION

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F70c1lj0NIXVnU4ICDl1E%2FIMAGE2-Multi-images_avec_texte.png?alt=media&amp;token=0733d244-56e8-401e-8254-23b348bf4be9" alt="Depuis l&#x27;interface de personnalisation du thème, cliquer sur ajouter une section puis sur la section MULTI-IMAGES AVEC TEXTE"><figcaption><p>Ajouter la section MULTI-IMAGES AVEC TEXTE avec le thème SHOPIWEB PREMIUM</p></figcaption></figure>

* Depuis la personnalisation du thème, cliquez sur SECTIONS > AJOUTER UNE SECTION > MULTI-IMAGES AVEC TEXTE. Il est possible d’ajouter cette section sur la page de votre choix, y compris sur un modèle de page produit.

### COMMENT PERSONNALISER LA SECTION

#### Général

* Il est possible d'afficher une image en arrière plan de la section. Cliquez sur Sélectionner une image puis sur l'image de votre choix. Les deux réglages suivant : Opacité et Flou, vous permettent de régler l'intensité de l'opacité et de k'effet flou que vous désirez créer sur l'image d'arrière plan. Pour ne pas mettre d'image en arrière pla, passez à l'étape suivante.
* Choisissez la COULEUR D'ARRIÈRE PLAN (les couleurs dépendent de celles que vous avez ajoutés depuis vos [paramètres de thème](/theme-premium/documentation/parametres-du-theme/couleurs)). Il est possible de créer un effet de dégradé en cochant la case DÉGRADÉ D'ARRIÈRE PLAN à condition d'avoir choisi une couleur foncé.
* Optez pour un affichage de la section dans un conteneur ou en pleine largeur. Si vous choisissez l'affichage CONTENEUR, entrer la largeur souhaitée en pixels dans le champs du dessous. Si vous choisissez un affichage PLEINE LARGEUR, enlevez la taille du champs ; ce format d'affichage permet à la section de prendre tout l'écran.
* **Largeur d'image sur ordinateur :** Selon la largeur de votre section, souhaitez-vous que les images prennent 25%, 50% ou 75% de la section ? Choisissez la largeur d'image sur ordinateur en cliquant sur le bouton correspondant. La section étant optimisée pour l'affichage mobile, cette dernière s'ajustera automatiquement pour les utilisateurs consultant votre boutique depuis leur smartphone.
* **Alignement de l'image (bureau) :** Depuis un ordinateur, de quel côté souhaitez-vous que les images apparaissent ? À droite ou à gauche ? Sélectionnez l'option souhaitée. La section étant optimisée pour mobile, les images se mettront au-dessus du texte.
* **Alignement du texte - mobile :** Depuis un smartphone, préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ? Sélectionnez l'option de votre choix.
* **Alignement du texte - bureau :** Depuis un ordinateur, préférez-vous que le texte (titre et description de la section) soit à gauche, centré ou à droite ? Sélectionnez l'option de votre choix.

#### En-tête de la section

* **Légende image :** Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez la taille en entrant le chiffre en pixels dans le champs du dessous.
* Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne pas en mettre. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### Contenu caché

Pour les longs textes, il est possible d'en cacher une partie que l'utilisateur pourra faire apparaître en cliquant sur un bouton. Activez cette fonctionnalité en cochant l'option.

* **À partir de... :** Ajustez la taille du contenu affiché en pixels à l'aide du curseur.
* **Couleur du fondu :** Pour un affichage design du texte et éviter l'arrêt brutal du bloc de texte, sélectionnez la couleur du fondu en fonction de votre couleur d'arrière plan. Pour un effet de fondu réussi, nous vous recommandons de sélectionner la même couleur que celle choisie pour votre arrière plan.
* **Texte (voir plus) :** Si vous développez votre boutique sur le marché français, vous pouvez laissez le texte par défaut. Et si vous développez votre boutique sur un marché étranger, vous pouvez traduire facilement le bouton permettant à l'utilisateur d'afficher tout le bloc texte et le coller dans ce champ dédié.
* **Texte (voir moins) :** Idem que pour le réglage précédant mais cette fois-ci, pour réduire le bloc texte après lecture.

#### Bouton

* Si vous le souhaitez, il est possible d'ajouter un Appel à l'action à votre section MULTI-IMAGES AVEC TEXTE. Inscrivez le texte, sélectionnez le lien vers lequel sera redirigé l'utilisateur et terminez par la couleur du bouton ainsi que sa taille.

#### Espacement de la section

* **Padding supérieur :** Ajoutez de l'espace à l'intérieur du HAUT de la section.
* **Padding inférieur :** Ajoutez de l'espace à l'intérieur du BAS de la section.
* **Marge supérieure :** Ajoutez de l'espace à l'extérieur du HAUT de la section.
* **Marge inférieure :** Ajoutez de l'espace à l'extérieur du BAS de la section.

### COMMENT AJOUTER UNE IMAGE

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fc7EC4bvIF4gHysi3snp6%2FIMAGE3-Multi-images_avec_texte.png?alt=media&amp;token=37369cea-0284-444d-86f1-caf16d3c4fb6" alt="Pour ajouter une image à la section, cliquez sur AJOUTER IMAGE"><figcaption><p>Cliquer sur AJOUTER IMAGE pour insérer une image à votre section</p></figcaption></figure>

* Dans la colonne des sections située à gauche de l'écran, cliquer sur le lien AJOUTER IMAGE sous la section MULTI-IMAGES AVEC TEXTE.
* Une fois l'image ajoutée, sélectionnez-là pour afficher les options de personnalisation dans la colonne située à droite de l'écran.

#### Image&#x20;

Sélectionnez-la depuis votre bibliothèque ou importez-en une. Ajustez ensuite sa taille en pixels à l'aide des options suivantes : Largeur et hauteur de l'image.

* **Bordure de l'image :** Souhaitez-vous qu'un contour apparaisse autour de l'image ? Sélectionnez la bonne option. Si vous avez optez pour un contour, choisissez ensuite sa couleur ainsi que la taille de sa largeur à l'aide des deux options suivantes. Ombre : Pour afficher une ombre derrière l'image, sélectionnez l'intensité souhaitée à l'aide du menu déroulant. Il est aussi possible de ne pas en mettre en sélectionnant "Aucune".

Recommencez la même procédure pour chaque image de la section.

***Félicitations, vous avez réussi à ajouter et personnaliser la section MULTI-IMAGES AVEC TEXTE du thème SHOPIWEB PREMIUM.***

### L'ASTUCE

Cette section est idéale pour mettre en valeur les différents détails d'un produit. En première image, mettez la photo générale de votre produit. Puis, pour les quatre images suivantes, sélectionnez celles qui attirent l'attention sur les détails du produit. En scrolant, le mouvement d'éclaté d'images de la section attirera l'attention du visiteur vers les éléments importants de votre produit. **La section MULTI-IMAGES AVEC TEXTE renforce ainsi l'effet persuasif de votre page de vente**.

### LA VIDÉO

{% embed url="<https://youtu.be/t64W3_-WS40>" %}


# 🏆 Quiz

Créez une expérience interactive sur votre boutique Shopify en ajoutant un quiz de recommandation de produits.

{% hint style="info" %}
Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'[effectuer la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour).
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Fw6VJZEODseuk8jNFeV2R%2FIMAGE1-Quiz.png?alt=media&amp;token=ee71708b-b160-4b87-9288-d8cc0248e508" alt="Image de la section QUIZ du thème Shopify SHOPIWEB PREMIUM disponible depuis la version 1.6"><figcaption><p>La section QUIZ du thème SHOPIWEB PREMIUM</p></figcaption></figure>

{% 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 %}

### CONCEVOIR VOTRE QUIZ

Avant d'ouvrir votre tableau de bord Shopify, il est nécessaire de comprendre comment fonctionne la section. Quelle est la mécanique pour que la section propose les bons produits une fois que l'utilisateur a répondu à toutes les questions ?

Un quiz est composé de questions et d'un résultat. Prenez une feuille de papier et un crayon et imaginez chaque étape de votre questionnaire.

* Comment aider mes visiteurs a choisir le bon produit ?
* Combien de questions vais-je devoir poser avant de proposer une sélection de produits ?
* Combien de réponses possibles pour chacune de ces questions ?

Pour vous aider, faisons l'exercice ensemble.

#### Exemple avec un site de vente d'accessoires de mode

Imaginons que nous devions créer un Quiz pour un site qui vend des nœuds papillons et des cravates pour homme. Nous aimerions aider nos visiteurs à choisir entre un nœud papillon ou une cravate à motifs ou fleuris.

Pour la question N°1, nous pourrions demander :

* Quel type d'accessoire préférez-vous ?

Les réponses possibles seraient :

* Nœud papillon
* Cravate

Pour la question N°2, nous affinons en demandant :

* Quel style aimeriez-vous ?

Les réponses possibles seraient :

* À motifs
* Fleurie

Notre dernière étape serait le résultat. Après avoir répondu aux deux questions, le visiteur serait face à une proposition personnalisée.

**Combien de résultats allons-nous proposer ?**

Il y a une formule simple : *Nombre de questions x Nombre de réponses par question = Nombre de résultats*.

Dans notre exemple, l'utilisateur peut apporter les réponses suivantes aux cumul des deux questions :

* Nœud papillon, à motifs
* Nœud papillon, fleurie
* Cravate, à motifs
* Cravate, fleurie

Il y a 4 combinaisons possibles ce qui nous demande de créer 4 résultats différents (*2 questions x 2 réponses par question = 4 résultats*).

Voici un schéma de notre questionnaire. Vous pouvez en faire un de votre côté pour que ce soit plus simple à visualiser votre futur quiz. Cela vous aidera lors de sa mise en place sur la boutique.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FeffiGDe48BQ9D1QFm0Gs%2FIMAGE27-Quiz.png?alt=media&amp;token=c0f91226-f984-44fa-b540-2a59ee0b846e" alt="Schéma de la mécanique d&#x27;un quiz e-commerce"><figcaption><p>Les lignes rouges représentent le chemin lorsque l'utilisateur choisi un nœud papillon, et les lignes jaunes lorsque le choix est une cravate.</p></figcaption></figure>

* **Résultat N°1 :** Une cravate à motifs
* **Résultat N°2 :** Deux nœuds papillon à motifs
* **Résultat N°3 :** Une cravate fleurie
* **Résultat N°4 :** Deux nœuds papillon fleurie

Maintenant que vous avez vos questions et que vous connaissez le nombre de résultats à créer, il est temps de vous rendre sur votre interface de personnalisation du thème SHOPIWEB PREMIUM.

### COMMENT AJOUTER LA SECTION QUIZ

La section QUIZ ne peut être ajoutée que sur un nouveau modèle de page.

#### ÉTAPE 1 : Créer un nouveau modèle de page

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FqnPxEEMt8NfoqgnZanpQ%2FIMAGE2-Quiz.png?alt=media&amp;token=c241ff83-2d03-4389-81d5-b53f669ffc03" alt="Image de l&#x27;interface de personnalisation du thème permettant d&#x27;accéder aux modèles de pages depuis le menu déroulant disponible en haut au centre de l&#x27;écran"><figcaption><p>Accédez à l'éditeur de thème pour voir vos modèles de pages</p></figcaption></figure>

* Depuis l'interface de personnalisation, ouvrez le **menu déroulant** situé en haut au centre de l'écran, puis cliquez sur **Pages**.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FXr8lFS18GzSJPzeRdfHg%2FIMAGE3-Quiz.png?alt=media&amp;token=20529cec-8a21-4c1d-b6f0-203bc7a91ef0" alt="Image du menu permettant de créer un nouveau modèle de page"><figcaption><p>Cliquez sur Créer un modèle pour créer un nouveau modèle de page</p></figcaption></figure>

* Maintenant, cliquez sur **Créer un modèle**.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FvOEguDjeh3nB5h5VYjJR%2FIMAGE4-Quiz.png?alt=media&amp;token=2e55fa39-996f-49c1-bd61-bf708ae52bd2" alt="Image de la fenêtre popup permettant de créer le nouveau modèle de page après lui avoir attribué un nom et selectionné le modèle à partir duquel vous souhaitez le créer"><figcaption><p>Créez le modèle de page à partir d'un modèle existant</p></figcaption></figure>

* Nommez votre nouveau modèle de page, puis sélectionnez selon quel modèle de page existant vous souhaiter le créer. Validez votre choix en cliquant sur **Créer un modèle**.

#### ÉTAPE 2 : Ajouter la section QUIZ au nouveau modèle de page

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FztOsKX5E86OYL77zSoi4%2FIMAGE5-Quiz.png?alt=media&amp;token=9cd4aa35-acc8-4f5c-9e26-0d33535c4249" alt="Image du nouveau modèle de page sur lequel ajouter la section Quiz"><figcaption><p>Ajoutez la section QUIZ sur le nouveau modèle de page</p></figcaption></figure>

* Depuis le menu en haut au centre de l'écran, vérifiez que vous êtes bien sur votre nouveau modèle de page.
* Puisque votre nouveau modèle a été créé selon un modèle existant, vous avez des sections qui apparaissent. Vous pouvez les supprimer depuis la colonne de gauche afin d'avoir un modèle de page vierge.
* Ensuite, faites glisser le curseur de votre souris pour voir apparaître le **+** permettant d'ajouter une section.
* Un menu déroulant avec toutes les sections disponibles s'affiche. Sélectionnez celle qui se nomme **🏆 Quiz**.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F3lD8oSOQPqJdAN13dGfd%2FIMAGE6-Quiz.png?alt=media&amp;token=72585a66-3745-43e0-91f4-fd6005815165" alt="Capture d&#x27;écran des options de personnalisation de la section Quiz"><figcaption><p>Les options de personnalisation apparaissent dans la colonne de droite</p></figcaption></figure>

* Une fois la section ajoutée, sélectionnez-là dans la colonne de gauche (**1**) pour voir ses options de personnalisation dans la colonne de droite (**2**). Selon la taille de votre écran d'ordinateur, la colonne de droite peut s'afficher à gauche, à la place de celle des sections.

### COMMENT PERSONNALISER LA SECTION QUIZ

#### ÉTAPE 1 : L'aspect général

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F6OofjhqzVpFtJ5t10TQ2%2FIMAGE7-Quiz.png?alt=media&amp;token=31057617-89fc-4eb4-8a90-ace8251306b9" alt="Capture d&#x27;écran des options permettant de personnaliser les réglages généraux de la section Quiz"><figcaption><p>Personnalisez l'aspect général de la section QUIZ</p></figcaption></figure>

* Choisissez la couleur d'arrière-plan de la section à l'aide du menu déroulant. Les options disponibles reprennent [vos couleurs des paramètres de thème](/theme-premium/documentation/parametres-du-theme/couleurs).
* Si la couleur choisie est foncée, vous pouvez activer le dégradé d'arrière-plan en cochant la case correspondante.
* Réglez ensuite la largeur de la section : Préférez-vous qu'elle soit en pleine largeur ou dans un conteneur ? Si vous choisissez le **Conteneur**, entrez la taille de ce dernier en pixels dans le champs **Largeur maximale (px)**.
* **Alignement du texte :** Gauche ou centre.

#### ÉTAPE 2 : L'en-tête de la section

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FtVt12HIH0T7gFBd7O99i%2FIMAGE8-Quiz.png?alt=media&amp;token=6d792a78-b242-4abd-aa87-cef8ced8638c" alt="Capture d&#x27;écran des options de personnalisation de l&#x27;en-tête de la section Quiz"><figcaption><p>Personnalisation de l'en-tête de la section QUIZ</p></figcaption></figure>

* (**1**) Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez sa taille en entrant le chiffre en pixels dans le champs du dessous.
* (**2**) Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
* (**3**) Écrire le titre à afficher en tant que **Titre overlay** (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa **taille** et sa **couleur** à l'aide des deux options suivantes.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Frd8MgyP03G1Hu13GRUPZ%2FIMAGE9-Quiz.png?alt=media&amp;token=3cff801e-b749-4fc5-a5b9-1795d61c026d" alt="Paramètres de titre et description de la section &#x22;Quiz&#x22;"><figcaption><p>Ajoutez un titre et une description pour votre quiz</p></figcaption></figure>

* (**1**) Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
* (**2**) Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### ÉTAPE 3 : L'aspect des questions

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FwwgsHaCi82fNlaUgSAt5%2FIMAGE10-Quiz.png?alt=media&amp;token=8325a4e3-7a0e-4c93-801d-0ac65ed09fb4" alt="Personnalisation des questions de la section &#x22;Quiz&#x22;"><figcaption><p>Personnalisez l'apparence des questions du Quiz</p></figcaption></figure>

* (**1**) Les réponses possibles pour chaque question du Quiz, apparaîtront dans des cartes. Quelle couleur souhaitez-vous pour les bordures de ces cartes ? Choisissez-en une depuis le menu déroulant. Chaque couleur correspond à celles de vos paramètres de thème.
* (**2**) Quelle animations souhaitez-vous pour l'affichage des questions ? Faites votre choix parmis nos dizaines d'effets.

#### ÉTAPE 4 : L'aspect des produits qui apparaîtront dans les résultats

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F4PvOwq2MJm7A1dyzZqLI%2FIMAGE11-Quiz.png?alt=media&amp;token=bfa31ba2-b06b-4268-b007-567e944272ba" alt="Les options de personnalisation des produits proposés en fin de quiz"><figcaption><p>Personnalisation de l'aspect des produits proposés en fin de Quiz</p></figcaption></figure>

* (**1**) Souhaitez-vous une bordure autour de l'image produit ? Sélectionnez **Aucun** ou **Bordure**. Si oui, sélectionnez ensuite sa couleur dans le menu déroulant du dessous puis le niveau d'ombre souhaitée.
* (**2**) Cochez la case si vous souhaitez que le badge de vente s'affiche dans l'angle de vos cartes produits. Si vous ne savez ce qu'est un **Badge de vente**, regardez l'image suivante.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FFT1BPeToK2Ywd17ccYzm%2FIMAGE29-Quiz.png?alt=media&amp;token=5d702ed4-f062-4945-9d5b-65beb102ffff" alt="La possibilité d&#x27;afficher ou non le Badge de vente sur une carte produit"><figcaption><p>Différence entre un produit avec un Badge de vente et sans Badge de vente</p></figcaption></figure>

#### ÉTAPE 5 : Les derniers réglages de la section

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FFt3hi28PNflLZnYTVzHl%2FIMAGE12-Quiz.png?alt=media&amp;token=43f9fb41-0689-44d6-90b4-3317127c4fc4" alt="Les options de personnalisation des produits proposés en fin de quiz"><figcaption><p>Personnalisation de l'aspect des produits proposés en fin de Quiz</p></figcaption></figure>

* (**1**) À chaque étape du Quiz, l'utilisateur peut revenir en arrière à l'aide du bouton disponible au bas de la section. Personnalisez la couleur et la taille de ce bouton à l'aide des options **Couleur du bouton** et **Taille du bouton**.
* (**2**) Terminons les réglages généraux de la section **Quiz** avec l'**Espacement de la section**. Laissez respirer votre section. Sauf si vous souhaitez créer un effet particulier avec une autre section, vous devez systématiquement ajouter du **Padding supérieur** et du **Padding inférieur**, autrement dit de l'espace à l'*interieur* de votre section. La **Marge supérieure** et la **Marge inférieure** peuvent restée à zéro car elles ajoutent de l'espace en *dehors* de la section.

### COMMENT AJOUTER UNE QUESTION AU QUIZ

#### ÉTAPE 1 : Ajouter le bloc question N°1

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F2SQElS51BjouJTBmCriq%2FIMAGE13-Quiz.png?alt=media&amp;token=47f0e543-68da-42c1-8210-dcd83d956baf" alt="Depuis la colonne de gauche, l&#x27;utilisateur doit cliquer sur la section Quiz puis sur Ajouter un bloc pour ajouter la première Question du Quiz"><figcaption><p>Ajouter la première question à votre Quiz</p></figcaption></figure>

* (**1**) Depuis la colonne de gauche, sélectionnez la section **🏆 Quiz** puis cliquez sur **Ajouter un bloc**.
* (**2**) Sélectionnez le bloc **Question**.

#### ÉTAPE 2 : Personnaliser la question N°1

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2F263fcDBg2cJWhaAk5a3G%2FIMAGE14-Quiz.png?alt=media&amp;token=3b231efe-33b6-4164-9b97-bca7256a038d" alt="Les options de personnalisation du bloc question apparaissent dans la colonne à droite de l&#x27;interface de personnalisation du thème"><figcaption><p>Personnalisation de l'aspect général de la première question</p></figcaption></figure>

* (**1**) Sélectionnez la question depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (**2**).

#### ÉTAPE 3 : L'aspect Général de la question N°1

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FNw4y9YdMDBYWdfJNM72t%2FIMAGE15-Quiz.png?alt=media&amp;token=3e5f8300-42d9-4ee5-ba4a-136ed9a2c792" alt="Posez la question aux visiteurs dans le champ Titre et ajoutez une description pour donner plus d&#x27;information à l&#x27;aide du champ suivant Description qui est facultatif"><figcaption><p>Ajout de la question et d'une description éventuelle à la question N°1</p></figcaption></figure>

* (**1**) Écrire le titre souhaité (posez simplement la question au lecteur) pour la **Question** dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
* (**2**) Écrire la description souhaitée pour la **Question** dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### ÉTAPE N°4 : Ajouter les réponses possibles pour la question N°1

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FYUvdA3GTwAiCrhbeR6AK%2FIMAGE16-Quiz.png?alt=media&amp;token=e900cb77-6fbf-4aca-8b64-589087e06d88" alt="Inscrire les différentes réponses possibles dans le champs Valeurs puis cochez la case Afficher les images pour rendre la réponse plus visuelle"><figcaption><p>Ajout des différentes réponses possibles à la question N°1</p></figcaption></figure>

* (**1**) Entrez les valeurs en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : *Nœud papillon, Cravate*.
* (**2**) En cochant **Afficher les images**, vous pourrez faire apparaître des images dans chaque carte de réponse. Cela apporte une meilleure expérience utilisateur car la réponse est visuelle. Pour que le thème reconnaisse les images, suivez le tutoriel vidéo disponible au bas de cette page. Vous trouverez également les indications pour renommer correctement les images des réponses afin qu'elles s'affichent, dans l'encadré ci-dessous.

{% hint style="info" %}
Pour ajouter des images correspondantes à chacune des réponses possibles, créez un visuel de taille 240 x 240 pixels, puis renommez le fichier de cette façon : *quiz-numérodequestion-réponse.png*. Pour notre exemple, je renommerais l'image de la cravate ainsi : *quiz-1-cravate.png*. Et celle du nœud papillon : *quiz-1-nœud-papillon.png*.
{% endhint %}

#### ÉTAPE 5 : Ajuster les points d'arrêt de la question N°1

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FzCpiJ5CA0p2IwOOpygS7%2FIMAGE17-Quiz.png?alt=media&amp;token=408c23ad-5bc7-48c6-9369-4ce489c76a79" alt="Les points d&#x27;arrêt permettent de régler le nombre d&#x27;éléments à afficher par ligne en fonction de la taille d&#x27;écran, afin d&#x27;offrir la meilleure expérience utilisateur possible"><figcaption><p>Ajustement du nombre d'éléments de la question N°1 à afficher par ligne selon la taille d'écran</p></figcaption></figure>

Les points d'arrêt permettent d'ajuster le nombre d'élements à afficher par ligne en fonction de la taille d'écran. Selon le nombre de réponses possibles, vous pouvez les afficher ligne par ligne ou côte à côte, et ajuster ce nombre à l'aide des curseurs correspondant à chaque taille d'écran (xs, sm, md, lg, xl, xxl).

* Changez le format d'affichage d'écran pour voir le rendu depuis un mobile. Cliquez sur l'icône mobile (**1**).
* (**2**) Ajustez le nombre d'élements par ligne à l'aide des curseurs. Par exemple, pour l'affichage mobile, le point d'arrêt correspondant est : *xs*.

#### ÉTAPE N°6 : Ajouter le bloc question N°2

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2Ff5Vi0iCdkZIDZuZdkiwz%2FIMAGE18-Quiz.png?alt=media&amp;token=1ad634a8-74cf-4b0a-bee9-33e4cc4eeb3a" alt="Depuis la colonne de gauche, l&#x27;utilisateur doit cliquer sur la section Quiz puis sur Ajouter un bloc pour ajouter la deuxième question du Quiz"><figcaption><p>Ajout de la deuxième question du Quiz</p></figcaption></figure>

* (**1**) Comme pour la question N°1 lors de l'étape 1, depuis la colonne de gauche, sélectionnez la section **🏆 Quiz** puis cliquez sur **Ajouter un bloc**.
* (**2**) Sélectionnez le bloc **Question**.

#### ÉTAPE N°7 : Personnaliser la question N°2

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FQ48RgIO0dusrpZULykN9%2FIMAGE19-Quiz.png?alt=media&amp;token=46efeb6b-abf0-4bb0-961f-ce5eb9dd1c2d" alt="Les options de personnalisation du bloc question apparaissent dans la colonne à droite de l&#x27;interface de personnalisation du thème"><figcaption><p>Personnalisation de l'aspect général de la deuxième question</p></figcaption></figure>

* (**1**) Sélectionnez la deuxième question depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (**2**).

#### ÉTAPE N°8 : L'aspect général de la question N°2

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FmH9ls5JEPsp5s8G64uXj%2FIMAGE20-Quiz.png?alt=media&amp;token=f34acd20-1cd2-408e-8b62-38f23f0a7fdd" alt="Posez la question aux visiteurs dans le champ Titre et ajoutez une description pour donner plus d&#x27;information à l&#x27;aide du champ suivant Description qui est facultatif"><figcaption><p>Ajout de la question et d'une description éventuelle à la question N°2</p></figcaption></figure>

* (**1**) Écrire le titre souhaité (posez simplement la question au lecteur) pour la **Question** dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
* (**2**) Écrire la description souhaitée pour la **Question** dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.

#### ÉTAPE N°9 : Ajouter les réponses possibles pour la question N°2

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FHDOANX9AooTa6mnayiIT%2FIMAGE21-Quiz.png?alt=media&amp;token=846b0885-5864-4c2c-9805-a0c36c0d072a" alt="Inscrire les différentes réponses possibles dans le champs Valeurs puis cochez la case Afficher les images pour rendre la réponse plus visuelle"><figcaption><p>Ajout des différentes réponses possibles à la question N°2</p></figcaption></figure>

* (**1**) Entrez les valeurs de la deuxième question en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : *À Motifs, Fleurie*.
* (**2**) En cochant **Afficher les images**, vous pourrez faire apparaître des images dans chaque carte de réponse à la question N°2 (comme pour la question N°1). Cela apporte une meilleure expérience utilisateur car la réponse est plus visuelle. Pour que le thème reconnaisse les images, suivez le tutoriel vidéo disponible au bas de cette page. Vous trouverez également les indications pour renommer correctement les images des réponses afin qu'elles s'affichent, dans l'encadré ci-dessous.

{% hint style="info" %}
Pour ajouter des images correspondantes à chacune des réponses possibles à la question N°2, créez un visuel de taille 240 x 240 pixels, puis renommez le fichier de cette façon : *quiz-numérodequestion-réponse.png*. Pour notre exemple, je renommerais l'image à motifs ainsi : *quiz-2-a-motifs.png*. Et celle du style fleurie : *quiz-2-fleurie.png*.
{% endhint %}

#### ÉTAPE N°10 : Ajuster les points d'arrêt de la question N°2

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FgqMjbVZPaBq5ZglXaEha%2FIMAGE22-Quiz.png?alt=media&amp;token=a846a5f1-c520-4485-95bf-7d94826f3f01" alt="Les points d&#x27;arrêt permettent de régler le nombre d&#x27;éléments à afficher par ligne en fonction de la taille d&#x27;écran, afin d&#x27;offrir la meilleure expérience utilisateur possible"><figcaption><p>Ajustement du nombre d'éléments de la question N°2 à afficher par ligne selon la taille d'écran</p></figcaption></figure>

Comme pour la question N°1, les points d'arrêt permettent d'ajuster le nombre d'élements à afficher par ligne selon la taille d'écran. En fonction du nombre de réponses possibles, vous pouvez les afficher ligne par ligne ou côte à côte, et ajuster ce nombre à l'aide des curseurs correspondant à chaque taille d'écran (xs, sm, md, lg, xl, xxl).

* Changez le format d'affichage d'écran pour voir le rendu depuis un mobile. Cliquez sur l'icône mobile (**1**) pour voir votre boutique en mode mobile.
* (**2**) Ajustez le nombre d'élements par ligne à l'aide des curseurs. Par exemple, pour l'affichage mobile, le point d'arrêt correspondant est : *xs*.

***Continuez la même procédure si vous avez plus de deux questions.***

### COMMENT AFFICHER LE RÉSULTAT DU QUIZ

#### ÉTAPE 1 : Ajouter le bloc des résultats

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FpD4DQFmVRF3D0qIMQgDe%2FIMAGE23-Quiz.png?alt=media&amp;token=be3928ab-e7a0-42cb-a601-5de6af9634a6" alt="Depuis la colonne de gauche, l&#x27;utilisateur doit cliquer sur la section Quiz puis sur Ajouter un bloc pour ajouter les résultats du Quiz"><figcaption><p>Ajout des résultats au Quiz</p></figcaption></figure>

* (**1**) Depuis la colonne de gauche, sélectionnez la section **🏆 Quiz** puis cliquez sur **Ajouter un bloc**.
* (**2**) Sélectionnez le bloc **Résultats**.

#### ÉTAPE 2 : Personnaliser les résultats

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FNo1nNis3Skj6Tu8GnCof%2FIMAGE24-Quiz.png?alt=media&amp;token=d6f48504-eed1-4472-819d-f372947002a1" alt="Les options de personnalisation du bloc résultats apparaissent dans la colonne à droite de l&#x27;interface de personnalisation du thème"><figcaption><p>Personnalisation de l'aspect général des résultats</p></figcaption></figure>

* (**1**) Sélectionnez le bloc des résultats depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (**2**).

#### ÉTAPE 3 : L'aspect général des résultats

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FEf0ez4cOqAeXDy0v9QCj%2FIMAGE25-Quiz.png?alt=media&amp;token=a1c9002b-1031-495b-a3bf-f74f5ee0da52" alt="Invitez l&#x27;utilisateur à découvrir les résultats de son Quiz depuis le champ Titre et ajoutez une description pour donner plus d&#x27;information à l&#x27;aide du champ suivant Description qui est facultatif"><figcaption><p>Ajoutez un titre et une description éventuelle aux résultats</p></figcaption></figure>

* (**1**) Écrire le titre souhaité (exemple : *Voici notre sélection rien que pour vous*) dans le champ **Titre**, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
* (**2**) Écrire la description souhaitée dans le champ texte suivant : **Description (facultatif)**. Pour ne rien afficher, supprimez simplement le texte. Si vous avez mis une description, réglez sa taille à l'aide de l'option suivante.

#### ÉTAPE 4 : Ajouter les ensembles de résultats possible

**Ensemble 1**

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FxmFqKFBqmhEoH8tFOEEd%2FIMAGE26-Quiz.png?alt=media&amp;token=cf563d5d-b136-4259-824e-d49dcb67d3d8" alt="Pour afficher l&#x27;ensemble 1 correspondant aux réponses de l&#x27;utilisateur, insérez les valeurs de chacune des réponses en les séparant par des virgules"><figcaption><p>Ajout de l'ensemble 1 selon les réponses fournies</p></figcaption></figure>

* (**1**) Entrez les valeurs du premier ensemble en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : *Nœud papillon, À Motifs*.
* (**2**) Sélectionnez le(s) produit(s) correspondant(s) à l'**Ensemble 1** depuis le menu **Produits**.

**Ensemble 2**

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FjCw6GM1QCQ7csO4KGQpZ%2FIMAGE28-Quiz.png?alt=media&amp;token=b708f631-b48a-4fd4-a75c-10d1b3816d46" alt="Pour afficher l&#x27;ensemble 2 correspondant aux réponses de l&#x27;utilisateur, insérez les valeurs de chacune des réponses en les séparant par des virgules"><figcaption><p>Ajout de l'ensemble 2 selon les réponses fournies</p></figcaption></figure>

* (**1**) Entrez les valeurs du deuxième ensemble en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : *Nœud papillon, Fleurie*.
* (**2**) Sélectionnez le(s) produit(s) correspondant(s) à l'**Ensemble 2** depuis le menu **Produits**.

***Continuez la même procédure si vous avez plus de deux ensembles de résultats.***

Une fois tous vos ensembles de résultats ajoutés, cliquez sur **Enregistrer** pour ne perdre aucune de vos modifications.

Félicitations, vous avez réussi à créer un **Quiz** sur Shopify grâce au thème SHOPIWEB PREMIUM.

### L'ASTUCE

Pour améliorer l’engagement, pensez à utiliser des images et des descriptions inspirantes pour chaque question et réponse. Cela rendra le quiz plus interactif et attrayant pour les utilisateurs. N'oubliez pas d'ajouter le lien de votre page Quiz à un menu ou depuis une section de votre page d'accueil.

### LA VIDÉO

{% embed url="<https://youtu.be/pC-56jJjZws>" %}


# Image texte slider

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


# Image pack produits


# Image texte compteurs

La section "Image Texte Compteurs" vous aide à mettre en valeur les bénéfices de votre produit ou de votre entreprise en chiffres.

C'est une section qui inclut une image, un titre, une description, et la possibilité d'ajouter un texte de légende et même un logo.

{% hint style="info" %}
**Version 1.6.** Pour utiliser cette section, vous devez avoir au **minimum la version 1.6 du thème Shopiweb Premium**. Si vous avez une version antérieure, vous devez [faire la mise à jour](/theme-premium/informations/mises-a-jour/obtenir-la-mise-a-jour), en vous référant à la documentation.
{% endhint %}

{% embed url="<https://youtu.be/bggA-O-mgIc>" %}

Voici les étapes pour ajouter et personnaliser la section :

### Étape 1 : Accéder à l'interface de personnalisation du thème

1. Depuis votre tableau de bord Shopify, allez dans **"Boutique en ligne"**.
2. Cliquez sur **"Thèmes"**.
3. Cliquez sur le bouton **"Personnaliser"** de la version du thème sur laquelle vous souhaitez travailler. L'interface de personnalisation s'ouvre.

### Étape 2 : Ajouter la section "Image Texte Compteurs"

1. Choisissez la page sur laquelle vous voulez ajouter la section. La section Image Texte Compteurs peut être ajoutée sur n'importe quelle page.
2. Dans la colonne de gauche, cliquez sur **"Ajouter une section"**.
3. Dans la liste des sections, recherchez ou tapez **"Image texte compteur"**.
4. Cliquez sur la section pour l'ajouter à votre page. Elle apparaîtra dans la colonne de gauche.

### Étape 3 : Personnalisation initiale (Espacements et Fond)

1. Une fois la section ajoutée, cliquez dessus dans la colonne de gauche pour accéder à ses options de personnalisation dans la colonne de droite.
2. **Il est recommandé de commencer par ajouter du padding** (espacement à l'intérieur de la section) pour faire respirer le contenu et donner un effet professionnel. Allez tout en bas des options et ajoutez un padding **minimum de 10 ou 13** au-dessus et en dessous.
3. Vous pouvez régler la couleur de l'arrière-plan de la section. Vous pouvez choisir une couleur prédéfinie (primaire, secondaire, tertiaire) ou une couleur personnalisée. Si vous mettez une couleur foncée, le texte se met automatiquement plus clair. Vous pouvez aussi ajouter une image d'arrière-plan, en réglant son opacité et son flou.

### Étape 4 : Personnaliser le contenu général

1. **Image :** Vous pouvez ajouter une image à votre section.
2. **Texte de légende (Label) :** Vous pouvez ajouter un texte d'étiquette (label) au-dessus du titre. C'est un petit texte qui peut servir à "étiqueter" la section. Choisissez la taille (petit, moyen, grand) et la couleur. La couleur doit généralement être moins visible que le titre pour respecter une hiérarchie visuelle.
3. **Titre :** Ajoutez le titre de votre section.
4. **Balise SEO :** Définissez la balise SEO (H1 à H6 ou aucune) pour votre titre. Pour une section secondaire, il est recommandé de mettre un H2 ou un H3, car il ne doit y avoir qu'un seul H1 par page (généralement pour le titre principal).
5. **Taille du titre :** Réglez la taille de votre titre (moyen, grand, très grand, etc.). Il est recommandé de conserver une certaine cohérence avec les tailles de titres des autres sections de votre page.
6. **Description :** Ajoutez votre texte de description. Réglez la taille de la description si nécessaire.
7. **Contenu caché :** Si vous avez une longue description, vous pouvez activer l'option "contenu caché" (hidden content). Cela ajoute un bouton "Voir plus" qui permet aux utilisateurs de dérouler le texte complet, évitant ainsi que la section ne devienne trop longue et ne déséquilibre la mise en page. Si vous utilisez un fond sombre avec cette option, assurez-vous que la couleur du fondu correspond à la couleur de l'arrière-plan.
8. **Alignement du texte :** Vous pouvez choisir l'alignement du texte (gauche, centre, droite).

{% hint style="info" %}
**NOUVEAUTÉ depuis la version 1.7** : Ajout de cadres SVG sur les images.
{% endhint %}

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

### Étape 5 : Ajouter et personnaliser les compteurs

1. La section "Image Texte Compteurs" permet d'ajouter jusqu'à trois compteurs.
2. Sous votre section dans la colonne de gauche, cliquez sur **"Ajouter compteur"**. Répétez l'opération pour ajouter un deuxième et un troisième compteur si vous le souhaitez.
3. Cliquez sur le premier compteur ajouté dans la colonne de gauche pour le personnaliser.
4. **Texte lié au chiffre :** Ajoutez le texte qui présente le bénéfice ou l'information lié au chiffre (ex: "vos bénéfices liés aux chiffres").
5. **Chiffre/Pourcentage :** Ajoutez le chiffre ou le pourcentage que vous voulez afficher.
6. **Couleur du chiffre :** Choisissez la couleur du chiffre. Notez que les compteurs peuvent afficher une barre de chargement autour du chiffre, dont la couleur peut être définie.
7. Répétez ces étapes pour chaque compteur que vous avez ajouté.

### Étape 6 : Ajouter un bouton optionnel

1. Si vous souhaitez ajouter un bouton pour renvoyer l'utilisateur vers une autre page, ajoutez le texte de votre bouton. Si vous ne mettez pas de texte, le bouton n'apparaîtra pas.
2. Entrez l'URL vers laquelle le bouton doit rediriger.
3. Choisissez la couleur du bouton. Les couleurs reprennent généralement celles définies dans les paramètres de votre thème.
4. Vous pouvez choisir si le bouton est plein ou s'il a juste un contour.
5. Définissez la taille du bouton (petit, normal, large). Il est conseillé d'utiliser la même taille que vos autres boutons sur la page pour la cohérence.

### Étape 7 : Enregistrer vos modifications

1. Une fois que vous avez ajouté et personnalisé la section, **pensez à cliquer sur le bouton "Enregistrer"** pour sauvegarder vos modifications. Enregistrer permet de ne pas perdre votre travail et rafraîchit la page pour afficher les modifications et lancer les scripts.

En suivant ces étapes, vous aurez ajouté et personnalisé la section "Image Texte Compteurs" sur votre boutique. C'est un processus simple et sans code qui vous permet d'obtenir un rendu professionnel.


# Image texte image

Assembler jusqu’à trois blocs de texte ou d’image dans une même section.

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


# PIED DE PAGE


# Pied de page

Ajouter et personnaliser des sections de pied de page pour les afficher facilement sur toutes les pages de la boutique.

{% hint style="info" %}
Version 1.0.0
{% endhint %}

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FtHotvDP3G8KnIpvbk6wU%2FCapture%20d%E2%80%99e%CC%81cran%202023-09-01%20a%CC%80%2016.48.42.png?alt=media&amp;token=966b1481-444a-438c-a43a-d1da97268732" alt="Capture d&#x27;écran d&#x27;un pied de page de boutique e-commerce réalisée avec le thème SHOPIWEB PREMIUM"><figcaption><p>Section Pied de Page de la boutique demo du thème SHOPIWEB PREMIUM</p></figcaption></figure>

***Le thème SHOPIWEB PREMIUM possède un large choix de sections à ajouter en quelques clics au PIED DE PAGE de votre boutique e-commerce.***

{% 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 en passant par [ce lien](https://www.shopiweb.fr/).
{% endhint %}

Personnalisez facilement votre PIED DE PAGE à l'aide de sections modernes et design.

Toutes les sections que vous y ajoutez s'afficheront automatiquement sur toutes vos pages pour vous permettre de créer et lancer toujours plus rapidement des boutiques efficaces.

Liens vers vos réseaux sociaux, carte de visite avec liens cliquables, image, appel à l'action, découvrez comment personnaliser rapidement la section PIED DE PAGE avec le thème SHOPIWEB PREMIUM en suivant le tutoriel vidéo suivant 👇

{% embed url="<https://vimeo.com/860193176?share=copy>" %}
Vidéo explicative pour apprendre à personnaliser la section PIED DE PAGE du thème SHOPIWEB PREMIUM
{% endembed %}

{% hint style="info" %}
Version 1.4.0
{% endhint %}

Dans la version 1.4.0, pour vous permettre d'engager davantage vos visiteurs, nous avons intégré une nouvelle option dans notre thème : le Bloc Newsletter. Cette fonctionnalité, désormais disponible directement dans le pied de page, vous offre la possibilité d'activer facilement un espace dédié à l'inscription à la newsletter directement sur votre site. C'est l'outil parfait pour transformer les visiteurs occasionnels en abonnés fidèles et maintenir une communication continue avec votre audience.

<figure><img src="https://2019301892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU04y3nhEi7BOPySOeTqn%2Fuploads%2FY9k3R3L5HrWFNsKUe9ay%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-11%20a%CC%80%2010.07.42.png?alt=media&amp;token=88111350-2c24-432b-941d-4498348f0936" alt=""><figcaption><p>Nouveau Bloc Newsletter</p></figcaption></figure>




---

[Next Page](https://www.docs.shopiweb.fr/theme-premium/llms-full.txt/1)