Comment utiliser l'outil de positions avancées ?

Si les positions natives ne conviennent pas à votre thème, le module permet de choisir un conteneur HTML dans lequel insérer les boutons de connexion.

Note : cet outil nécessite des connaissances techniques. Si vous ne savez pas identifier un élément HTML dans votre thème, demandez l’aide de votre intégrateur.

Identifier le conteneur

1. Ouvrez la page de votre boutique où les boutons doivent apparaître, par exemple une page catégorie.
2. Utilisez l’inspecteur du navigateur pour identifier un conteneur présent à l’emplacement souhaité. Relevez un sélecteur simple et précis : un point pour une classe, comme .block-category, ou un dièse pour un ID, comme #content-wrapper.
3. Vérifiez que le conteneur est adapté à votre thème et au type de page. Ces exemples ne sont pas des valeurs à recopier sur toutes les boutiques.

Choisissez si possible un conteneur unique : si plusieurs éléments correspondent au sélecteur, le bloc peut être ajouté plusieurs fois. Utilisez un sélecteur simple sans espace.

Dans l’exemple Hummingbird ci-dessous, le conteneur inspecté est #js-product-list-header, présent une seule fois sur la catégorie « Accessoires atelier ». Les sélecteurs génériques cités plus haut ne sont pas ceux de ce thème : utilisez l’élément réellement observé sur votre page.

Créer la position

1. Ouvrez « Paramètres avancés de position », puis « Paramètres avancés de position : utilisation des éléments HTML » et cliquez sur « Ajouter une nouvelle position ».
2. Activez la position et donnez-lui un nom reconnaissable.

Attention : utilisez un nom distinct de ceux des positions existantes, y compris des positions natives.

3. Choisissez le type de page et renseignez le sélecteur du conteneur identifié.
4. Choisissez la position des boutons. L’option d’affichage au-dessus insère le bloc au début du contenu de l’élément ciblé, et l’option en dessous l’ajoute à la fin de ce contenu.
5. Choisissez la taille, sélectionnez les connecteurs et réglez le CSS du bloc. Le texte d’invitation dépend aussi de son activation dans les paramètres de base.
6. Enregistrez avec « Ajouter », puis vérifiez la nouvelle ligne de position.

Si le type de page est fourni par un thème ou un module tiers, utilisez le contrôleur personnalisé uniquement après avoir obtenu sa valeur auprès de son éditeur.

Sur PrestaShop 9.2 avec Hummingbird, la page de connexion utilise le type authentication et la page d’inscription séparée utilise registration. Vérifiez le type de page et le conteneur HTML réels pour configurer une position.

Vérifier le résultat

Ouvrez la page comme visiteur déconnecté et vérifiez le placement réel, la lisibilité et l’absence de doublons. Ajustez le conteneur ou les réglages si nécessaire. Les sélecteurs peuvent changer après une mise à jour du thème.