Comment corriger la taille des images dans un menu Shopify (Méga menu et tiroir mobile)

Quick answer

Pour corriger la taille des images dans un menu, imposez un format identique avec la propriété CSS aspect-ratio, puis choisissez object-fit: cover pour remplir le cadre (les bords peuvent être rognés) ou contain pour afficher l’image intégrale. Importez des sources au moins aussi grandes que leur affichage et testez le tiroir mobile séparément.

1. Harmoniser les images sources : Choisissez un ratio d’aspect unique pour l’ensemble de la rangée.
2. Imposer un format en CSS : Appliquez aspect-ratio et object-fit au sélecteur d’image de votre thème.
3. Stopper le rognage dans Dawn : Passez les images d’arrière-plan du méga menu en mode contain sur ordinateur.
4. Corriger les visuels flous : Importez des fichiers adaptés aux écrans haute densité et vérifiez les URL.
5. Vérifier le tiroir mobile : Contrôlez les sélecteurs du tiroir latéral et les sous-niveaux sur smartphone.

Why menu images end up uneven, cropped or blurry

Avant de modifier votre feuille de style, vérifiez si votre barre de navigation provient directement de votre thème Shopify ou d’une application de menu. Les thèmes et les applications structurent leur code HTML différemment ; injecter des règles CSS sur un sélecteur incorrect ne produira aucun changement.

Les défauts d’affichage des visuels de menu résultent généralement de trois causes distinctes :

Lorsqu’un conteneur d’image ne possède pas de proportion explicite, les navigateurs affichent chaque visuel selon sa hauteur naturelle. Une photo portrait placée à côté d’une vignette carrée crée une rupture d’alignement inesthétique. À l’inverse, les thèmes imposant un cadre fixe coupent le haut et le bas des images carrées. Poser le bon diagnostic vous garantit d’appliquer la règle appropriée.

Cette vidéo montre comment ajouter des images à un mega menu déroulant ; utilisez-la comme contexte pour comprendre d’où vient le problème de taille.

Step 1: Standardize your source images

La solution la plus saine consiste à standardiser les proportions de vos fichiers avant de les téléverser dans Shopify. Comme le souligne la documentation Shopify sur les images de thème, « vous devez utiliser le bon ratio d’aspect d’image » pour que vos visuels s’alignent naturellement dans les mises en page.

Adoptez une proportion unique pour toutes les images d’une même rangée de menu :

• Carré (1:1) : Idéal pour les vignettes de collections, les aperçus produits et les grilles symétriques.
• Paysage (comme 3:2 ou 16:9) : Parfaitement adapté aux bannières promotionnelles et encarts horizontaux.

Exportez tous les visuels de cette rangée selon ce ratio précis. Téléversez des fichiers dont les dimensions physiques en pixels égalent ou dépassent la taille de la zone affichée sur ordinateur. Pour les écrans haute densité (comme les dalles Retina), préparez des fichiers deux fois plus grands que le cadre d’affichage.

Évitez les dimensions en pixels universelles glanées sur les forums. La largeur des colonnes variant selon les thèmes, aucune dimension unique ne convient à toutes les boutiques. De plus, selon la documentation Liquid de Shopify sur le filtre image_url, « une image ne peut jamais être redimensionnée au-delà de ses dimensions d’origine. » Une image source trop petite deviendra inévitablement floue.

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration : les mêmes images de menu avec object-fit cover et contain.

Si votre boutique utilise déjà des visuels aux proportions disparates que vous ne pouvez réexporter immédiatement, utilisez CSS pour forcer l’uniformité. La propriété moderne aspect-ratio, documentée sur MDN Web Docs, « permet de définir le ratio largeur/hauteur souhaité pour la boîte d’un élément. »

Insérez cette règle dans la section CSS personnalisé de votre thème ou dans votre feuille de style :

/* Remplacez .your-menu-selector img par le sélecteur précis de votre thème */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Remarque : Remplacez .your-menu-selector img par la classe réellement utilisée dans votre thème actif.

Dans cet extrait, width: 100% occupe toute la largeur de colonne, aspect-ratio: 1 / 1 verrouille le cadre en carré et object-fit: cover remplit l’espace. Le comportement d’object-fit détermine l’ajustement du visuel selon les spécifications de MDN Web Docs :

Comment trouver le bon sélecteur dans votre thème

Les sélecteurs CSS étant propres à chaque thème Shopify, identifiez la classe utilisée par votre en-tête :

1. Ouvrez votre boutique en ligne dans votre navigateur sur ordinateur.
2. Survolez votre menu pour faire apparaître le méga menu.
3. Cliquez avec le bouton droit sur l’image déformée et sélectionnez Inspecter.
4. Dans les DevTools, repérez l’élément <img> ou son conteneur parent et lisez le nom de sa classe. Ce nom change d’un thème à l’autre.
5. Dans l’admin Shopify, allez dans Boutique en ligne > Thèmes, cliquez sur Actions > Dupliquer par sécurité, puis sur Personnaliser.
6. Collez votre CSS dans le réglage Custom CSS de votre thème s’il en propose un, ou à la fin de la feuille de style principale de votre thème (par exemple base.css dans Dawn).

Step 3: Stop cropping in the Dawn mega menu

Le thème Dawn de Shopify déroute les marchands car, dans le fil de la communauté ci-dessous, les images du mega menu sont dessinées en images d’arrière-plan CSS plutôt qu’avec des balises <img>. Dans ce cas, la règle object-fit de l’Step 2 ne s’applique pas à elles.

Dans une discussion de la communauté Shopify sur la taille des images du mega menu Dawn, la correction suggérée consiste à passer l’arrière-plan en background-size: contain pour voir l’image entière au lieu de la recadrer. C’est un exemple de la communauté, pas une consigne officielle de Shopify, et le fil ne confirme pas que cela a résolu le problème.

Pour essayer la même approche dans le mega menu desktop de Dawn, le fil suggère d’ajouter ce code à la fin de votre fichier base.css :

/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
  #MegaMenu-Content-2 li:before {
    /* contain shows the whole image; empty bands may appear */
    background-size: contain !important;
    background-position: center;
  }
}

Prenez en compte deux détails techniques essentiels :

1. Identifiant propre à chaque boutique : Le sélecteur #MegaMenu-Content-2 correspond à un identifiant généré pour un lien précis. Votre boutique peut porter un numéro différent selon l’agencement de vos menus. Vérifiez toujours ce sélecteur avec l’outil d’inspection.
2. Portée de la media query : Cette règle est placée dans @media screen and (min-width: 767px) ; elle ne s’applique donc qu’aux écrans plus larges et ne corrige pas le tiroir de menu mobile, traité à l’Step 5.

Cette vidéo illustre la configuration d’un méga menu avec images sur Dawn pour situer le contexte avant redimensionnement.

Step 4: Fix blurry menu images

Une image nette sur écran d’ordinateur peut paraître visiblement floue ou pixelisée sur smartphone. Dans les discussions d’assistance Shopify relatives aux images floues de méga menu, deux causes techniques récurrentes sont identifiées :

Cause 1 : Les dimensions du fichier source sont inférieures au conteneur

Quand l’image source contient moins de pixels que son conteneur, les navigateurs l’étirent pour remplir l’espace. Selon la documentation Liquid de Shopify sur les images, « une image ne peut jamais être redimensionnée au-delà de ses dimensions d’origine ». Les écrans de téléphone à haute densité rendent ce défaut plus visible. Comme l’explique web.dev de Google, « les descripteurs de densité servent à fournir des images différentes selon la densité de pixels de l’appareil ». En règle générale, importez des sources environ deux fois plus grandes que leur taille d’affichage.

[!WARNING] N’utilisez pas object-fit: none pour corriger le flou. Dans le fil de la communauté, il laissait les images du menu à leur taille brute et leur faisait perdre leur forme au lieu de résoudre le problème.

Cause 2 : Le menu continue d’appeler un ancien fichier en cache

Quand vous remplacez une image, le menu peut continuer à utiliser l’ancienne. Dans le même fil, l’explication était que la nouvelle image était un .png alors qu’un ancien .gif restait utilisé. Faites un clic droit sur l’image, choisissez Ouvrir l’image dans un nouvel onglet et inspectez l’URL dans la barre d’adresse. Si un ancien nom de fichier apparaît, mettez à jour l’image à la source pour que le menu pointe vers le nouveau fichier.

Step 5: Check mobile and the menu drawer

Concept illustration : une correction du mega menu desktop à côté d’un tiroir de menu mobile qui demande sa propre vérification.

Un oubli fréquent lors de la correction des images de navigation consiste à ne tester que sur ordinateur. Les règles CSS placées dans une media query réservée au desktop n’atteignent pas les panneaux coulissants mobiles. De plus, les thèmes utilisent souvent un balisage et des classes entièrement différents pour leur tiroir mobile.

Dans le thème Dawn de Shopify, par exemple, le tiroir mobile utilise .menu-drawer__menu. Les sélecteurs peuvent différer selon les versions du thème ; inspectez donc toujours votre propre thème. Si vous ne ciblez que des classes desktop, votre tiroir mobile continuera d’afficher des lignes inégales ou des vignettes recadrées.

Pour garantir une expérience mobile optimale :

• Vérifiez les sous-niveaux : Ouvrez le tiroir mobile et dépliez les sous-menus de niveau 2 pour vous assurer que les vignettes ne s’étirent pas de façon excessive.
• Tester plusieurs largeurs : Utilisez le mode appareil des DevTools pour tester des largeurs de téléphone étroites, ou vérifiez directement sur un vrai téléphone.
• Séparez les configurations : Si votre tiroir réclame une disposition spécifique, configurez des menus distincts pour ordinateur et mobile afin que les ajustements ne se perturbent pas mutuellement.

Common mistakes (fixed widths, wrapped labels)

Lorsque l’on cherche à uniformiser les visuels de menu, quatre erreurs courantes peuvent perturber la structure de votre navigation :

1. Fixer des largeurs rigides en pixels ou pourcentages

Dans un fil de la communauté Shopify sur le redimensionnement des images de menu, une correction suggérée fixait une largeur de 18% sur chaque élément de menu, valeur propre au thème de cette boutique. Les largeurs fixes peuvent casser le retour à la ligne des colonnes quand le nombre d’éléments change. Appliquez width: 100% à l’image et laissez le conteneur de colonne répartir la largeur.

2. Négliger les libellés de texte sur deux lignes

Même avec des carrés parfaits, une rangée semblera bancale si certains titres passent sur deux lignes. Si un bloc compte deux lignes de texte et son voisin une seule, les bordures inférieures seront décalées. Pour harmoniser l’ensemble, pensez à modifier le style de votre menu de navigation en harmonisant les marges internes et les tailles de police.

3. Abuser de la directive !important

L’usage immodéré de !important écrase les classes responsives natives, empêchant le tiroir mobile de s’adapter aux petits écrans. Si vous souhaitez modifier l’encombrement général de votre barre, il est préférable d’ajuster la taille globale du menu au niveau de ses conteneurs structurels plutôt que de forcer chaque image.

4. Modifier le code du thème sans sauvegarde préalable

Éditer directement base.css sur votre thème publié présente des risques. Une erreur de syntaxe peut impacter l’affichage de l’ensemble de votre boutique. Dupliquez systématiquement votre thème avant toute modification CSS afin de pouvoir revenir en arrière instantanément.

Trade-offs: cover vs contain vs re-uploading

Chaque méthode pour harmoniser les images de menu s’accompagne d’arbitrages concrets :

Gardez à l’esprit que les règles CSS ajoutées à votre thème peuvent disparaître lors d’une mise à jour majeure. Pour concevoir un menu équilibré avec visuels, veillez à choisir le bon type de menu selon la richesse de votre catalogue.

When to stop hand-writing CSS: setting image ratio in a menu app

Si vous préférez ne pas maintenir des sélecteurs CSS manuels au fil des mises à jour de thème, une application de menu dotée de réglages natifs de proportions offre le même résultat par de simples contrôles visuels.

Dans Navi+, le paramètre Image ratio (auto-crop) applique des proportions régulières à vos visuels de navigation sans toucher au code. Vous disposez de quatre options :

• Unchanged (Par défaut) : Conserve les proportions d’origine de chaque fichier chargé.
• 1:1 square : Aligne tous les visuels sous forme de carrés parfaits.
• 3:2 landscape : Crée un format rectangulaire horizontal équilibré.
• 2:3 portrait : Met en place un format vertical évoquant une mise en page éditoriale.

Ce réglage s’applique avec souplesse : vous pouvez définir un ratio global pour tout le menu, attribuer un format spécifique aux sous-menus de niveau 2 ou 3, ou sélectionner Unchanged sur un élément pour désactiver le rognage hérité.

L’application applique automatiquement les règles CSS standard aspect-ratio et object-fit: cover sur les éléments désignés sans nouvel import. Un outil de recadrage manuel est également proposé au moment du téléversement pour affiner le cadrage si nécessaire.

[!NOTE] Le réglage de ratio automatique s’applique uniquement aux éléments Grande image (Big image) et aux Bannières (Image banner) du méga menu pour ordinateur, du méga menu mobile et du tiroir mobile. Les petites icônes ne sont délibérément pas rognées pour préserver leurs traits. Cette fonction ne rend pas nettes les images de faible qualité ; vos fichiers sources doivent respecter les critères de résolution détaillés à l’Step 4.

Si vous voulez recréer un design de menu à partir d’une image de référence, les réglages de ratio intégrés évitent de bricoler du CSS à la main. Dans Navi+, vous choisissez une fois 1:1 carré ou 3:2 paysage et toutes les grandes images du menu le suivent — essayez d’abord sur une copie de votre menu.

Action checklist

Suivez cette liste de vérification en sept points pour auditer et corriger les visuels de votre menu :

• Identifier le moteur de menu : Vérifiez si votre navigation dépend du thème Shopify ou d’une application dédiée.
• Choisir un ratio cible : Fixez une proportion unique (comme 1:1 carré ou 3:2 horizontal) pour la rangée.
• Préparer les fichiers sources : Exportez vos visuels au ratio choisi, au moins à la taille d’affichage (doublée pour Retina).
• Trouver le sélecteur CSS : Utilisez l’outil Inspecter du navigateur pour identifier la classe attribuée aux images.
• Appliquer aspect-ratio et object-fit : Ajoutez vos règles dans le CSS personnalisé ou la feuille de style du thème.
• Contrôler les URL d’images : Assurez-vous que le menu appelle les fichiers récents et non d’anciens formats en cache.
• Tester le tiroir mobile : Vérifiez la netteté et l’alignement des visuels dans le menu mobile sur différentes largeurs.

FAQ

Pourquoi les images de mon méga menu ont-elles des tailles différentes ?

Les images d’un méga menu affichent des tailles inégales lorsque les fichiers importés ont des ratios d’aspect différents et que le thème gère la hauteur des conteneurs de façon automatique. Sans ratio imposé, chaque boîte s’étire selon la hauteur naturelle de son image.

Pourquoi mes images de menu sont-elles coupées ?

Une image de menu apparaît rognée quand son conteneur possède une proportion différente du fichier original et utilise object-fit: cover ou une image de fond en mode cover. La règle cover remplit l’espace en coupant les extrémités débordantes ; le mode contain permet de voir l’image en entier sans coupe.

Pourquoi mes visuels sont-ils nets sur ordinateur mais flous sur mobile ?

Les visuels paraissent flous sur smartphone lorsque le conteneur affiché est plus grand que le fichier source ou si le thème diffuse une ancienne vignette basse résolution. Le CDN de Shopify n’agrandissant jamais une image au-delà de sa taille d’origine, un petit fichier devient flou sur écran haute densité.

Quelle taille d’image dois-je téléverser ?

Importez des fichiers dont les dimensions en pixels égalent au moins celles du conteneur affiché sur votre boutique sur ordinateur. Pour une netteté irréprochable sur les écrans modernes, préparez des fichiers deux fois plus grands que la taille d’affichage.

Puis-je rendre toutes les images de menu carrées sans modifier le code du thème ?

Oui, si votre menu de navigation est créé avec une application qui propose un réglage de ratio d’image. Par exemple, Navi+ propose un réglage Image ratio qui applique un ratio carré 1:1 aux grandes images et aux bannières d’image d’un menu via CSS, sans modifier le code du thème ni réimporter les images.

Sources

• MDN Web Docs : Documentation CSS object-fit (Standard technique pour l’ajustement de boîte)
• MDN Web Docs : Documentation CSS aspect-ratio (Standard technique pour le ratio d’aspect des boîtes)
• Documentation pour développeurs Shopify : Filtre Liquid image_url (Limites de redimensionnement de la plateforme)
• Centre d’aide Shopify : Images de thèmes et ratios d’aspect (Recommandations officielles d’alignement visuel)
• Google Web Developers : Servir des images adaptatives (Densités d’écrans et descripteurs de résolution)
• Communauté Shopify : Corriger les images floues dans un méga menu (Thread 363359) (Exemple issu de la communauté ; échange informel)
• Communauté Shopify : Personnaliser la taille des images dans le méga menu Dawn (Thread 255590) (Exemple issu de la communauté ; échange informel)
• Communauté Shopify : Redimensionner et positionner les images d’un méga menu (Thread 182414) (Exemple issu de la communauté ; échange informel)
• Communauté Shopify : Alignement et taille d’image dans un méga menu (Thread 146397) (Exemple issu de la communauté ; échange informel)