Paramètres de mise en page

Liens en vedette

1. Documentation Company XYZ sur les paramètres de largeur de mise en page
2. Documentation Company XYZ sur les paramètres de mise en page
3. Documentation Shopify sur l’éditeur de thème
4. Documentation Shopify sur les sections et les blocs

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Ces paramètres contrôlent la structure globale de votre boutique en ligne, notamment la largeur maximale que peuvent atteindre les zones de contenu, l’extension des arrière-plans de section et le degré d’arrondi de nombreux éléments de l’interface. Comme ils agissent globalement sur le thème, il est préférable de les utiliser pour définir une direction de design claire avant d’affiner des sections individuelles dans l’éditeur de thème

Toutes les sections peuvent toujours proposer leurs propres paramètres de largeur, alors considérez ce groupe comme la base de votre mise en page par défaut. Vous pouvez aussi consulter la référence Mise en page associée pour plus d’informations.

Contrôles principaux de mise en page

Rayon des coins

Le rayon des coins ajoute des bords arrondis à la plupart des éléments du frontend. Des valeurs plus faibles créent un rendu plus net et plus épuré, tandis que des valeurs plus élevées rendent la boutique en ligne plus douce et plus expressive.

Utilisez ce paramètre dans le cadre de votre style de marque global, et pas seulement comme ajustement décoratif. Le meilleur résultat consiste généralement à choisir un rayon qui semble naturel sur les boutons, les cartes, les champs de saisie et les cadres de médias.

Largeur du contenu

La largeur du contenu définit la largeur maximale principale du contenu du thème sur les écrans plus grands. C’est le principal paramètre de mise en page, et celui qui a le plus d’impact sur l’impression d’espace ou de concentration de vos pages.

Une largeur plus étroite peut améliorer la lisibilité et créer un rendu plus éditorial. Une largeur plus grande laisse davantage d’espace aux grilles de produits, aux sections d’images et au contenu promotionnel, mais des mises en page très larges peuvent rendre les zones riches en texte plus difficiles à parcourir.

L’éditeur peut faire paraître les changements de largeur plus limités qu’ils ne le sont réellement sur la boutique en ligne. Vérifiez l’aperçu en direct après avoir effectué des modifications de mise en page, en particulier sur ordinateur.

Largeur de section

La largeur de section affecte principalement les sections qui utilisent un arrière-plan. Elle détermine si ces arrière-plans restent alignés sur la largeur principale du contenu ou s’étendent davantage pour une présentation plus immersive.

Garder les arrière-plans de section alignés sur le contenu crée un cadre net et cohérent. Des arrière-plans plus larges peuvent aider les promotions mises en avant ou les sections centrées sur l’image à se démarquer, mais leur utilisation trop fréquente peut donner à la page une impression de structure moindre. Lorsque vous laissez un arrière-plan dans son style par défaut ou transparent, il conserve généralement le style de repli environnant ; l’ajout d’une couleur unie, d’un dégradé ou d’un arrière-plan basé sur un média rend cette zone plus indépendante du reste de la page.

Comment ces paramètres fonctionnent ensemble

Ces contrôles sont plus efficaces lorsqu’ils fonctionnent comme un système. La largeur du contenu définit le cadre principal de lecture et de navigation, la largeur de section façonne la relation des zones d’arrière-plan avec ce cadre, et le rayon des coins définit le ton de l’interface. Pour un aperçu plus large de l’organisation des zones du thème, consultez la documentation Shopify sur les sections et les blocs

Une largeur de contenu contenue associée à des arrière-plans occasionnellement plus larges crée souvent une mise en page équilibrée, tout en conservant une impression de dynamisme. Si vous préférez un rendu plus ample, assurez-vous que vos images, vos espacements et la longueur de votre texte peuvent supporter cette échelle supplémentaire.

Notes d’utilisation

1. Définissez d’abord le cadre global. Choisissez la direction générale de la largeur avant d’ajuster des sections individuelles afin que le thème reste visuellement cohérent.
2. Prévisualisez sur la boutique en ligne. Vérifiez les changements de mise en page en dehors de l’éditeur pour évaluer plus précisément l’espacement et la largeur.
3. Préservez la lisibilité. Évitez les mises en page de contenu très larges si vos pages reposent fortement sur de longs titres, du texte riche ou des informations produit détaillées.
4. Utilisez les arrière-plans larges avec intention. Réservez les traitements de section plus larges aux zones qui bénéficient d’une mise en avant visuelle supplémentaire. Conservez des arrière-plans par défaut ou transparents lorsque vous souhaitez que la section se fonde dans la mise en page environnante.
5. Gardez une cohérence visuelle. Choisissez un rayon des coins qui correspond à votre marque afin que les éléments courants de l’interface paraissent unifiés.