Réduire l'espace entre les différentes section sur le Thème Narrative

Topic summary

Problème initial : DaisyF a tenté de réduire les espaces entre sections du thème Narrative en utilisant du code CSS trouvé sur le forum, mais cela a déréglé tout son site. Un message d’erreur apparaissait lors de la personnalisation du thème.

Diagnostic : Nass_1 a identifié que le code utilisé était compatible uniquement avec le thème Debut, pas Narrative. Il a recommandé de restaurer une version antérieure du thème et proposé un post du forum anglophone avec une solution adaptée.

Contexte : La boutique est en construction. DaisyF souhaitait réduire les grands espaces blancs entre sections pour améliorer le rendu visuel et rendre le site plus fluide et professionnel.

Résolution : La solution du forum anglophone a fonctionné pour DaisyF. Plus tard, jess2891 a partagé une méthode alternative plus simple :

  • Aller dans Thèmes > Personnaliser > Paramètres de thèmes > Mise en page
  • Régler “Espace entre les sections du modèle” à 0px

Le problème est résolu avec deux solutions validées.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Bonjour,

J’ai essayé de réduire les espaces dans le thème narrative en m’appuyant sur un commentaire posté par un expert shopify sur une demande similaire (https://community.shopify.com/post/731886).

Il a indiqué de coller à la fin de theme.scss le suivant:

@media only screen and (min-width: 750px)
div#shopify-section-1586547735372 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}

C’est ce que j’ai fait mais ça a fait bouger tout mon site. Je l’ai donc à nouveau enlevé mais ça n’a pas remis mon site comme avant. Voici le message que je reçois quand je veux personnaliser mon thème :

Pouvez-vous m’aider?

Merci d’avance.

Daisy

Bonjour @DaisyF , et bienvenue sur le forum Shopify !

C’est une question dont la réponse en intéressera sûrement plus d’un ! Je serai ravi de répondre à toutes vos questions concernant la personnalisation de votre thème Narrative.

Afin de mieux comprendre votre situation, j’aurais besoin de quelques informations :

  • Quel est le résultat visuel que vous souhaitez obtenir exactement ?
  • Pour quelles raisons souhaitez-vous réduire l’espace entre les sections de votre thème ?
  • Par ailleurs, quel type de produits vendez-vous ? Avez-vous déjà lancé votre boutique ou bien êtes-vous encore en phase de réflexion ?

Personnaliser votre thème

Dans l’attente de votre réponse, Shopify vous offre effectivement un large éventail d’options de modification du thème, en particulier pour le thème Narrative. Vous pouvez ainsi le personnaliser pour le rendre unique et vous démarquer de la concurrence !

A cet effet, sachez que vous pouvez utiliser l’éditeur de thème pour personnaliser le contenu et les paramètres de votre thème à partir de votre interface administrateur Shopify. Afin de voir ce qu’il est possible de modifier, rendez vous sur Boutique en ligne > Thèmes > Thème actuel > Personnaliser :

L’éditeur de thème inclut un aperçu du thème et une barre latérale ou un menu que vous pouvez utiliser pour modifier les paramètres de votre thème et pour ajouter, supprimer, modifier et réorganiser le contenu.

Modification du code

En revanche, dans le cas où vous souhaiteriez apporter des modifications non disponibles dans les paramètres, et si vous vous sentez à l’aise avec le code (HTML, CSS, Liquid), vous pouvez effectivement modifier le code de votre thème. Avant d’effectuer la moindre modification, je vous inviterais à dupliquer votre thème.

D’après le post que vous avez partagé, il semble que le code que vous avez ajouté n’est compatible qu’avec le thème Debut, ce qui explique que le comportement observé ne soit pas celui attendu.

C’est pourquoi je vous invite, dans un premier temps, à visualiser votre boutique en utilisant une version non modifiée de votre thème Shopify. Pour ce faire, rendez-vous sur Boutique en ligne > Thèmes > Actions > Publier.

Par ailleurs, vous pouvez également revenir à une ancienne version de votre code, en vous rendant sur Boutique en ligne > Thèmes > Actions > Modifier le code. Sélectionnez ensuite theme.liquid dans le menu à gauche de l’écran, puis cliquez sur Versions plus anciennes.

Je reste à votre disposition dans l’attente de votre réponse.

Bonjour Nass,

Merci pour votre retour.

Ma boutique est toujours en construction et n’est pas encore en ligne, mais lorsque je fais un aperçu de la boutique je trouve que les espaces entre les différentes sections est très gros (cf image ci-dessous)

Je souhaite réduire cet espace blanc/vide afin d’améliorer le rendu pour les visiteur du site et le rendre plus fluide et professionnel. J’ai pu voir sur le community que d’autres personnes ont eu cette question, mais je n’ai pas trouvé de réponse. Savez-vous si c’est possible? Si oui, comment?

Merci d’avance pour votre retour et votre aide!

Daisy

1 Like

Merci pour toutes ces précisions, @DaisyF ! Je comprends mieux la situation et votre désir d’offrir une expérience de navigation optimale à vos visiteurs.

Réduire les espaces entre les sections du thème Narrative

En faisant quelques recherches, j’ai trouvé ce post issu de notre forum anglophone qui propose une solution pouvant vous intéresser. Bien entendu, je vous invite à suivre les instructions contenues dans mon premier post avant de faire toute modification du code.

Autrement, vous pourriez faire appel à un Expert Shopify afin de vous assister dans cette démarche.

Pour bien démarrer sur Shopify !

Par ailleurs, avez-vous déjà une expérience dans la vente ? Ou bien s’agit-il de votre première boutique ? À toutes fins utiles, je vous recommande de lire cet article de notre blog qui vous permettra de démarrer votre boutique sous les meilleurs auspices !

Afin de vous assister un maximum pour créer et gérer votre boutique en ligne, nous mettons en place différentes ressources pour vous aider. Des outils en ligne gratuits, utiles par exemple pour créer un logo, calculer votre marge ou générer la politique de retour ou les conditions générales de vente de votre boutique.

Voici quelques ressources pour vous aider à la création de votre boutique :

Je reste à votre disposition en cas de besoin, si vous avez des questions plus spécifiques ! N’hésitez pas non plus à partager le lien vers votre boutique, je serai ravi d’y jeter un œil et vous proposer d’éventuelles pistes d’améliorations.

Merci Nass, ça a en effet résolu mon problème!

1 Like

C’est parfait, je suis ravi de l’apprendre @DaisyF ! Je reste disponible si vous avez d’autres questions.

J’ai trouvé la solution :

Thèmes > Personnaliser > Icon n°2 " Paramètres de thèmes" > mise en page > “Espace entre les sections du modèle” : mettre à 0px