Optimiser le responsive design d'une boutique PrestaShop de literie

Introduction

Le secteur de la literie en ligne présente des défis spécifiques en matière de responsive design : fiches produits riches avec des options de personnalisation (dimensions sur mesure, fermetés, matériaux), visuels grand format, et parcours d'achat qui doit rassurer sur un produit que le client ne peut pas essayer physiquement. Après avoir accompagné plusieurs fabricants français de literie dans la mise en ligne de leur catalogue PrestaShop, je partage ici les bonnes pratiques pour garantir une expérience mobile irréprochable.

Pourquoi le responsive est critique pour un site de literie

Plus de 65 % du trafic e-commerce provient désormais du mobile. Pour un fabricant de literie qui vend en direct, chaque visiteur mobile qui quitte le site à cause d'un affichage cassé représente une vente perdue — souvent à panier élevé (300 € à 2 000 €). Google pénalise également les sites non mobile-friendly dans ses résultats de recherche depuis le passage au Mobile-First Indexing.

Les points de friction courants

• **Grilles produits mal adaptées** : les vignettes de matelas, souvent en format paysage, se retrouvent écrasées sur mobile
• **Tableaux de dimensions illisibles** : les guides de tailles sur mesure débordent de l'écran
• **Sélecteurs de déclinaisons trop petits** : les boutons de choix de dimensions deviennent inutilisables au doigt
• **Images produit trop lourdes** : un visuel de matelas en haute définition peut peser plusieurs Mo

Auditer le responsive de votre boutique PrestaShop

Avant de corriger, il faut diagnostiquer. Voici la méthode que je recommande :

1. Tester sur les vrais breakpoints

PrestaShop 1.7+ et 8.x utilisent Bootstrap 4 avec ces breakpoints par défaut :

/* Breakpoints Bootstrap 4 (PrestaShop 1.7+ / 8.x) */
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

Ouvrez les DevTools de Chrome (F12), activez le mode responsive (Ctrl+Shift+M), et testez systématiquement à 375px (iPhone SE), 768px (tablette portrait) et 1024px (tablette paysage).

2. Identifier les éléments qui débordent

Ajoutez temporairement ce CSS pour visualiser les débordements :

/* Debug : met en évidence les éléments qui débordent */
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

Un snippet plus avancé pour détecter automatiquement les éléments qui causent un scroll horizontal :

// À coller dans la console DevTools
document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    console.warn('Débordement détecté :', el);
    el.style.outline = '3px solid red';
  }
});

Corriger les problèmes responsive courants

Grille produits adaptative

Le fichier à modifier dépend de votre version :

• **PrestaShop 1.6** : `themes/votre-theme/product-list.tpl`
• **PrestaShop 1.7 / 8.x** : `themes/votre-theme/templates/catalog/listing/product-miniature.tpl`

Pour une grille qui passe de 4 colonnes (desktop) à 2 (tablette) puis 1 (mobile) :

{* PrestaShop 1.7+ / 8.x — product-miniature.tpl *}
<div class="col-6 col-md-4 col-lg-3 product-miniature-wrapper">
  {block name='product_miniature_item'}
    <article class="product-miniature">
      {* contenu de la miniature *}
    </article>
  {/block}
</div>

Images produit responsives

Les visuels de matelas sont souvent en très haute résolution. Utilisez le lazy loading natif et l'attribut srcset :

<img 
  src="{$product.cover.medium.url}"
  srcset="{$product.cover.small.url} 400w,
          {$product.cover.medium.url} 800w,
          {$product.cover.large.url} 1200w"
  sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, 25vw"
  loading="lazy"
  alt="{$product.name|escape:'html':'UTF-8'}"
  class="img-fluid"
/>

Dans PrestaShop 8.x, configurez les formats d'image optimisés dans Back Office > Design > Images et activez le format WebP si votre hébergeur le supporte.

Tableaux de dimensions sur mobile

Les guides de tailles pour matelas sur mesure utilisent souvent des tableaux HTML classiques qui débordent sur mobile. La solution :

/* Rendre les tableaux scrollables horizontalement sur mobile */
.product-description table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Alternative : empiler les cellules en mode carte */
@media (max-width: 576px) {
  .size-guide-table thead {
    display: none;
  }
  .size-guide-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
  }
  .size-guide-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border: none;
  }
  .size-guide-table td::before {
    content: attr(data-label);
    font-weight: 600;
  }
}

Sélecteur de déclinaisons tactile

Pour les produits sur mesure (choix de largeur, longueur, fermeté), agrandissez les zones cliquables :

/* Déclinaisons plus accessibles sur mobile */
@media (max-width: 768px) {
  .product-variants .input-radio {
    min-width: 48px;
    min-height: 48px; /* Taille minimale recommandée par Google */
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }
  
  .product-variants .product-variants-item {
    margin-bottom: 1rem;
  }
  
  .product-variants .custom-select {
    font-size: 16px; /* Empêche le zoom auto sur iOS */
    padding: 0.75rem;
  }
}

Astuce importante : sur iOS Safari, un champ ou avec une taille de police inférieure à 16px déclenche un zoom automatique de la page. Fixez toujours font-size: 16px minimum sur les éléments de formulaire mobiles.

☐ Page d'accueil : slider/bannière lisible sur mobile
☐ Listing catégorie : grille 1-2 colonnes sur mobile
☐ Fiche produit : images zoomables, déclinaisons cliquables
☐ Panier : récapitulatif lisible, boutons suffisamment grands
☐ Tunnel de commande : formulaires utilisables au doigt
☐ Header : menu hamburger fonctionnel, logo redimensionné
☐ Footer : liens empilés verticalement
☐ Recherche : barre accessible et fonctionnelle
☐ Aucun scroll horizontal parasite
☐ Score Lighthouse Mobile > 80

# Régénérer les miniatures après configuration des formats d'image
php bin/console prestashop:image:regenerate --format=all