Conteneur marketing

Aperçu

Les conteneurs sont les espaces publicitaires de la boutique. Dans la vie courante, on les appelle aussi bannières, bannières publicitaires ou zones d'action.

Ils permettent d'attirer l'attention de vos clients B2B sur des Modèles de commande spéciaux, des nouveautés et autres.

Un conteneur se compose de :

• un contenu — image, texte ou les deux, selon le type de conteneur
• une position dans le système eCom
• une cible vers laquelle un lien est établi

Types de conteneurs

Il existe trois types de conteneurs :

Type	Contenu
Image	seulement une image
Image avec texte	image et texte, image en premier
Texte avec image	texte et image, texte en premier

La disposition de l'image et du texte dépend de la zone :

Type	dans la zone flottante	dans le curseur
Image avec texte	texte à droite de l'image	texte en bas dans l'image
Texte avec image	texte à gauche de l'image	texte en haut dans l'image

La différence entre les deux types est donc l'ordre : dans la zone flottante, l'image et le texte sont côte à côte, dans le curseur, ils sont superposés — et le type détermine ce qui vient en premier.

Le texte peut être formaté via une barre d'outils.

Surface occupée par les types de texte

Un conteneur de type Image avec texte ou Texte avec image occupe dans la zone flottante une double tuile, c’est-à-dire deux des quatre colonnes. L'image y reste de la même taille que dans une tuile simple — elle occupe la moitié de la double tuile, le texte l'autre moitié.

	Largeur de la tuile	Largeur de l'image dans la tuile
tuile flottante simple	300 pixels	298 pixels
tuile flottante avec texte	616 pixels	298 pixels — identique

C'est intentionnel : toutes les images d'une rangée ont ainsi exactement la même largeur en pixels côte à côte.

Pour la gestion des images, cela signifie : les types avec texte n'ont pas besoin d'une image plus grande.

Aperçu des conteneurs

Sous eCom \ Conteneur, un tableau liste tous les conteneurs créés. Au-dessus se trouve Créer un nouveau conteneur.

Colonne	Signification
Désignation	nom librement attribué, sert uniquement à la reconnaissance dans le backend
Position	zone où le conteneur apparaît. Il y en a exactement deux : Page Accueil en haut et Page Accueil en bas
Langue	langue pour laquelle le conteneur est valable, par exemple de-DE. Dans une boutique multilingue, vous gérez le conteneur par langue
Priorité	ordre dans la position
Type	Image, Image avec texte ou Texte avec image
Type de lien	Aucun, Article, Groupe de produit, Modèle de commande ou URL externe
Lien	cible du type de lien — numéro d'article, numéro de groupe de produit ou URL
De / À	Période d'affichage. Si les champs sont vides, il n'y a pas de limite temporelle
Statut	contrôle si le conteneur apparaît dans la boutique. Voir ci-dessous

Info : La Priorité agit au sein d'une position. Plusieurs conteneurs peuvent avoir la même priorité — dans ce cas, le système décide de l'ordre.

Statut

Statut	Visible dans la boutique
Validée	oui
En cours de traitement	non
Terminé	non
Supprimé	non

Important : Seuls les conteneurs Validée apparaissent dans la boutique. Un conteneur qui ne s'affiche pas, bien que l'image et la position soient correctes et que les données soient fournies, est généralement dans un autre statut.

Le statut sert donc aussi de archive : vous pouvez mettre les actions terminées sur Terminé au lieu de les supprimer — elles restent dans la liste et peuvent être réactivées plus tard.

Contrôle d'un conteneur

Propriété	Signification
Priorité	détermine à quel endroit le conteneur est affiché. 1 = en premier.
Clients	si le conteneur doit apparaître uniquement pour certains clients, sélectionnez ici une Liste de clients.
Type de lien	détermine ce qui se passe lors du clic sur le conteneur. Voir ci-dessous.

Types de liens

Type de lien	Comportement
Aucun	Il ne se passe rien, car aucun type de lien n'est attribué.
Article	lien vers un numéro d'article saisi.
Groupe de produit	lien vers un Groupe de produit sélectionné.
Modèle de commande	lien vers un Modèle de commande sélectionné. Le modèle et les articles qu'il contient doivent être validés pour eCom.
URL externe	lien vers une page externe, par exemple votre Page Accueil.

Modes d'affichage

Il y a deux positions : Page Accueil en haut et Page Accueil en bas. Aucune autre zone n'est disponible.

Dans le sous-menu Positions, vous définissez pour chaque position comment les conteneurs y sont affichés. Les choix sont Curseur et Flottant.

Les deux positions sont librement attribuables : vous pouvez configurer un curseur en haut et une zone flottante en bas, mais aussi l'inverse ou deux fois le même mode d'affichage. La position détermine uniquement où se trouve la zone, pas comment elle apparaît.

Pour le curseur, l'intervalle d'affichage détermine en plus l'apparence de la zone — il contrôle non seulement la vitesse, mais aussi la présentation :

	Flottant	Curseur sans lecture automatique	Curseur avec lecture automatique
Intervalle d'affichage	non applicable	0	plus grand que 0
Visible	plusieurs tuiles côte à côte, retour automatique à la ligne si ligne complète	plusieurs cartes côte à côte, toutes de même hauteur	toujours une seule image, qui défile après le temps réglé
Plusieurs conteneurs	empilés de gauche à droite	plusieurs cartes visibles simultanément, défilement via flèches	toujours une seule carte visible, changement automatique, avec une barre de points en dessous
Surface d'affichage	298 × 298 pixels par tuile (quatre colonnes pour 1248 pixels de largeur de contenu)	cartes de 315 pixels de haut, largeur selon l'image	1248 × 416 pixels

Important : L'intervalle d'affichage appartient à la position, pas à l'image individuelle — il s'applique à tous les conteneurs de cette position. S'il est modifié ultérieurement, le format d'image requis change aussi.

Changement automatique dans le curseur

Le champ Intervalle d'affichage contrôle si le curseur défile automatiquement. Il n'apparaît que si le type d'affichage Curseur est choisi.

La valeur est donnée en millisecondes : 3000 correspond à trois secondes.

Valeur	Comportement
0	Pas de changement automatique. Plusieurs cartes sont côte à côte, l'utilisateur fait défiler avec les flèches.
plus grand que 0	Le curseur passe automatiquement au conteneur suivant après le temps indiqué. L'image reste fixe pendant ce temps, elle ne défile pas.

Le temps s'applique par image, pas pour tout le cycle. Avec trois conteneurs et 3000, chaque image reste trois secondes, un cycle complet dure donc neuf secondes.

Navigation dans le curseur

Le type de contrôle affiché dépend de l'intervalle d'affichage :

Intervalle d'affichage	Élément de contrôle
0	Flèches à gauche et à droite du curseur
plus grand que 0	Barre de points sous le curseur

Quand le changement automatique s'arrête

Situation	Comportement
Souris sur le curseur	Le curseur s'arrête tant que le pointeur est dessus. Même chose avec le focus clavier.
L'utilisateur clique sur un point de la barre de points	Le curseur s'arrête définitivement sur cette image.

Important : Après un clic sur la barre de points, le curseur ne redémarre pas automatiquement. Le défilement ne se fait alors plus qu'avec les points. C'est intentionnel.

Important : Si aucune image de conteneur n'est gérée, les zones sont masquées. Le client ne voit alors pas la page d'accueil, mais arrive directement sur la page d'aperçu des articles après connexion. Celui qui veut la page d'accueil comme point d'entrée doit donc gérer au moins un conteneur avec image.

Recadrage dans la zone flottante

Dans la zone flottante, l'image remplit la hauteur de la tuile. Si une tuile voisine contient beaucoup de texte, toute la rangée devient plus haute — l'image est alors recadrée à gauche et à droite.

Cela ne s'applique qu'à la zone flottante. Dans le curseur, il n'y a pas de recadrage, l'image est toujours entièrement visible.

Recommandation pour la gestion des images : carrée 900 × 900 pixels, sujet centré et avec marge latérale, afin qu'un recadrage ne coupe rien d'essentiel.

Tailles d'image recommandées

Règle générale : pour le curseur, plutôt des images larges, pour la zone flottante, des images carrées.

Techniquement, cela signifie : les images sont toujours entièrement ajustées. Le recadrage ne se produit que là où l'image doit remplir une surface :

Surface	Comportement en cas de ratio différent
Tuile flottante	Recadrage — latéral, l'image remplit la tuile
Image de fond de la page de connexion	Recadrage — latéral
Curseur, les deux variantes	pas de recadrage, bandes vides à la place

Zone	Taille d'image recommandée	Surface d'affichage	Recadrage
Tuile flottante	900 × 900 pixels (1:1)	298 × 298 pixels	oui — l'image remplit entièrement la tuile
Curseur sans lecture automatique	au moins 630 pixels de haut, ratio entre environ 1:1 et 2,3:1 — par exemple 945 × 630	cartes de 315 pixels de haut, largeur selon l'image, maximum 720 pixels	non
Curseur avec lecture automatique	1500 × 500 pixels (3:1)	1248 × 416 pixels	non — bandes vides en cas de ratio différent

Pour le curseur sans lecture automatique, les cartes ont la même hauteur, pas la même largeur : 315 pixels. La largeur dépend de l'image. Il n'y a donc ni recadrage ni bandes vides — quel que soit le ratio.

La seule limite est la largeur maximale de la carte de 720 pixels. À 315 pixels de hauteur, cela correspond à environ 2,3:1. Les images plus larges — par exemple des bannières au ratio 4:1 — atteignent cette limite et ont alors à nouveau des bandes étroites en haut et en bas.

Pour le curseur avec lecture automatique, la surface est fixée à 3:1. L'image est ajustée, pas recadrée — si son ratio diffère, des bandes vides apparaissent :

Image	Conséquence
plus haute que 3:1	bandes vides à gauche et à droite
plus large que 3:1	bandes vides en haut et en bas

C'est pourquoi la recommandation est 1500 × 500 : elle correspond exactement au ratio de la surface d'affichage.

Règle de base pour toutes les images : là où il n'y a pas de recadrage, un cadre plus grand ne rend pas l'image plus grande — seul un ratio adapté remplit le cadre. Si le ratio diffère, des bandes vides apparaissent sur les côtés ou en haut et en bas.

Autres dimensions d'image dans la boutique

Image de fond de la page de connexion

	Valeur
Taille d'image recommandée	1400 × 1400 pixels (1:1)
Surface d'affichage	environ 686 × 711 pixels pour une largeur de fenêtre de 1400 pixels, donc presque carrée
Recadrage	oui, latéral — garder le sujet centré

Le formulaire et l'image sont dans une même carte. Celle-ci est limitée à 1248 pixels, l'image en occupe 55 % — la surface d'affichage grandit donc avec la fenêtre, mais reste presque carrée.

Important : En dessous de 992 pixels de largeur d'écran — donc sur smartphone et tablette — l'image est masquée. Elle ne doit donc pas contenir d'information nécessaire à la connexion.

Logo de l'exploitant

	Valeur
Taille d'image recommandée	environ 290 pixels de haut, largeur libre jusqu'à 380 pixels maximum
Format	PNG avec fond transparent
Affichage	144 pixels de haut sur la page de connexion, 56 pixels de haut dans l'en-tête et le pied de page

Le logo n'est jamais recadré, mais jamais agrandi non plus. Un logo trop petit apparaît flou sur la page de connexion — seule une image plus grande aide, pas un changement de taille d'affichage.

Marquage des images générées par IA

À partir de la version 19, une image peut être marquée comme créée par IA. La boutique affiche alors automatiquement une info au-dessus de l'image.

Le marquage se fait directement sur le conteneur, avec la case à cocher Image générée par IA. Voir le manuel backend Marquer les images comme générées par IA.

	Description
Apparence	pastille grise semi-transparente avec texte blanc AI GENERATED
Taille	environ 90 × 19 pixels
Position	coin supérieur droit, à 8 pixels du bord

Dans le curseur, l'info se déplace vers le bord inférieur si le texte est en haut de l'image — donc pour le type de conteneur Texte avec image.

Important : L'info dépend de la surface d'affichage, pas de l'image. Si l'image ne remplit pas la surface — par exemple une image carrée dans un curseur 3:1 avec lecture automatique —, elle est placée au bord de la surface et donc nettement à côté de l'image. Dans les tuiles flottantes, où l'image remplit la tuile, elle est par contre sur l'image.

Où l'info apparaît :

• Conteneurs de la page d'accueil — tuiles flottantes, curseur et bande avec lecture automatique
• Image de fond de la page de connexion
• Logo sur la page de connexion

Où elle n'apparaît pas volontairement : sur le logo dans l'en-tête et le pied de page. Là, le logo ne fait que 56 pixels de haut, l'info serait plus large que le logo lui-même.

Important pour le choix des images : il ne doit rien d'important se trouver dans le coin supérieur droit du sujet — l'info est placée par-dessus.