# 2. Configuration de votre page d'accueil

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

{% hint style="info" %}

> ⚠️ Remarque : Le `Arrière-plan dynamique` section a été dépréciée dans les dernières versions de Plain Jane et Interactive. Utilisez `Toile de page` à la place — elle offre la même fonctionnalité pour les images d'arrière-plan, les vidéos, les couleurs, etc.
>
> ⚠️ Remarque : Ce guide **prennent** s'applique aux utilisateurs de Plain Jane Starter.
> {% endhint %}

### Ce que vous apprendrez

* Comment personnaliser la mise en page de votre page d'accueil dans Plain Jane v3 et Interactive v2
* Comment ajouter et configurer des menus centrés, alignés sur le côté et compacts
* Quand utiliser chaque mise en page pour de meilleurs résultats
* Comment lier les menus et gérer la navigation
* Comment contourner complètement la page d'accueil si vous le souhaitez

>

***

### 🛠️ Pour les nouveaux utilisateurs : Configurer un menu

1. Aller à **Boutique en ligne** > **Navigation** dans votre administration Shopify.
2. Cliquer sur **Ajouter un menu** et nommez-le quelque chose comme `Menu de test`.
3. Ajoutez des éléments de menu tels que :
   * `Hommes` → lien vers votre collection Homme
   * `Lookbook` → lien vers une page personnalisée ou la page d'accueil
   * `Contact` → lien vers la page de contact intégrée de Shopify
4. Cliquer sur **Enregistrer**.

***

### 🎨 Mise en page 1 : Menu centré

C'est la mise en page la plus populaire (par ex., page d'accueil style Supreme).

#### Comment la configurer

1. Ouvrez votre thème dans l' **Personnaliser** éditeur.

<figure><img src="/files/017607a20074f9b4cf230bd5b481152936b396d7" alt="Shopify theme customizer overview"><figcaption><p>Interface de personnalisation du thème montrant les sections de la page d'accueil</p></figcaption></figure>

2. Assurez-vous que ces sections sont présentes :
   * `Préchargeur`
   * `Popup e-mail`
   * `Toile de page`
   * `Menu centré`

> 💡 Astuce : `Toile de page` remplace la section dépréciée `Arrière-plan dynamique` Utilisez-la pour les images d'arrière-plan ou les couleurs.

#### Lier votre menu

* Cliquez sur la `Menu centré` section

<figure><img src="/files/5791945f73734e4a6d387343e0bfa0d5e94aebcc" alt="Center Menu section selected in theme customizer"><figcaption><p>Section Menu centré sélectionnée montrant le panneau des paramètres</p></figcaption></figure>

* Dans le panneau de droite, **choisissez votre menu** dans le menu déroulant (par ex., `Menu de test`)

<figure><img src="/files/25a90157ebc43e733b802b26021180038a0757e5" alt="Center Menu settings panel"><figcaption><p>Panneau des paramètres du Menu centré avec le menu déroulant</p></figcaption></figure>

<figure><img src="/files/399e09bcaa57de156c6d049066fd50ccfa5a2362" alt="Center Menu dropdown selection"><figcaption><p>Menu déroulant montrant les menus de navigation disponibles</p></figcaption></figure>

#### Icônes de réseaux sociaux

* Activer les icônes **activé**
* Collez les URL complètes de vos profils (par ex., TikTok, Threads, Tumblr)

> 💡 Astuce : N'ajoutez pas de contenu défilant sous le menu centré. Gardez-le propre et simple.

***

### 🎨 Mise en page 2 : Menu aligné sur le côté

Convient aux marques qui veulent des menus verticaux minimalistes.

#### Étapes de configuration

1. Dans l'éditeur de thème, supprimez le `Menu centré`.
2. Cliquer sur **Ajouter une section** > `Menu aligné sur le côté`

<figure><img src="/files/00e3665aad0d22649c304f7ef50d989169d21c6a" alt="Add section modal in theme customizer"><figcaption><p>Modal d'ajout de section montrant les sections disponibles</p></figcaption></figure>

<figure><img src="/files/e63011a0b92d730d73a9199120c8e1b7b5f1ce7f" alt="Side Aligned Menu section added"><figcaption><p>Section Menu aligné sur le côté ajoutée avec succès</p></figcaption></figure>

3. Sélectionnez votre menu dans le panneau de droite

<figure><img src="/files/839cb6f9ed033549cf833d152463933329a51ca1" alt="Side Aligned Menu settings"><figcaption><p>Paramètres et options de personnalisation du Menu aligné sur le côté</p></figcaption></figure>

#### Options de personnalisation

* Ajuster **taille de la police**, **espacement des liens**, et **couleurs**
* Basculer **lien de connexion** visibilité (nécessite l'activation des comptes clients)
* Choisissez **alignement du logo** (gauche ou droite)
* Changer **famille de polices** sous `Paramètres du thème > Typographie`

> 💡 Astuce : Évitez d'empiler des sections produit sous cette mise en page — elle n'est pas adaptée au défilement.

***

### 🎨 Mise en page 3 : Menu compact

Cette mise en page comporte une icône hamburger en haut à droite.

#### Étapes de configuration

1. Ajoutez le `Menu compact` section

<figure><img src="/files/9db897f6703ba750610add356919cf0f5cea51d5" alt="Compact Menu section in theme customizer"><figcaption><p>Section Menu compact ajoutée à la page d'accueil</p></figcaption></figure>

2. Liez votre menu sous `Paramètres du thème > Paramètres globaux du menu`

<figure><img src="/files/d376d0f9b567cc4d05420728413c5e01f8cc5315" alt="Global Menu Settings in Theme Settings"><figcaption><p>Paramètres globaux du menu pour configurer le Menu compact</p></figcaption></figure>

3. Centrez ou alignez votre logo comme vous le souhaitez

#### Ajouter arrière-plan + contenu

* Utilisez la `Toile de page` section pour :
  * Définir une couleur d'arrière-plan ou télécharger une image

<figure><img src="/files/13d847db3de9fc0c735aa261cde26204c8688f90" alt="Page Canvas settings for background customization"><figcaption><p>Paramètres du canevas de page pour ajouter des images et des couleurs de fond</p></figcaption></figure>

* Ajouter des sections comme `Liste de collections` ou `Carrousel de produits`

> ⚠️ Avertissement : Il s'agit de la **seule mise en page** recommandée pour les pages d'accueil défilables.

***

### 🚀 Contourner la page d'accueil (optionnel)

Vous voulez diriger les visiteurs directement vers une collection ?

1. Aller à `Paramètres du thème > Paramètres de la page d'accueil`
2. Activer **Ignorer l'écran d'entrée**
3. Définissez la page de destination (par ex., une collection spécifique)

> 💡 Astuce : C'est utile pour les marques axées sur les produits qui n'ont pas besoin d'une page d'accueil.

***

### 📌 Notes finales

* Utilisez **Toile de page** pour toute la personnalisation de l'arrière-plan de la page d'accueil
* Gardez votre mise en page minimale et fonctionnelle
* Enregistrez toujours et actualisez pour prévisualiser vos modifications

Mises en page prises en charge :

* Menu centré (landing statique)
* Menu aligné sur le côté (nav verticale minimaliste)
* Menu compact (constructeur de page d'accueil défilable)

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

* 💬 **Pour l'assistance technique, rejoignez-nous sur Discord :** <https://discord.gg/hcc2GvgZc6>
* 📧 **Envoyez-nous un e-mail à :** <support@openspaces.design>
* 💻 **Discutez en direct avec nous :** Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web


---

# Agent Instructions: Querying This Documentation

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

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

```
GET https://docs.openspaces.design/plain-jane-docs-v2-fr/readme-1/getting-started/2.-setting-up-your-homepage.md?ask=<question>
```

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

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