---
title: "Comment réaliser le design des sections de votre boutique ? | App eCommerce - Tutoriels - GoodBarber"
description: "Bonjour et bienvenue dans votre backoffice GoodBarber!\r \r Aujourd'hui, nous allons apprendre ensemble à paramétrer le design des sections de votre boutique.\r \r Chaque type de sectio…"
canonical_url: "https://fr.goodbarber.com/tutorials/shop/design/comment-realiser-le-design-des-sections-de-votre-boutique/"
lang: fr
---

# Comment réaliser le design des sections de votre boutique ? | App eCommerce - Tutoriels - GoodBarber

[Retour](https://fr.goodbarber.com/tutorials/shop/)

# Comment réaliser le design des sections de votre boutique ?

Bonjour et bienvenue dans votre backoffice GoodBarber!

Aujourd'hui, nous allons apprendre ensemble à paramétrer le design des sections de votre boutique.

Chaque type de section à des propriétés de design qui lui sont propres, mais le process pour les paramètres est toujours le même.

Pour désigner une section, rendons-nous dans le menu Content & Design > Design > Sections Design.

Pour cet exemple, on va choisir de désigner une section Product List.

La première chose à faire ici, c'est de choisir entre les templates d'affichage proposés. Vous pouvez voir les modifications en direct sur la preview du back office.

On va choisir le template 2.

Ensuite on va paramétrer le design de la zone de contenu.

La couleur de du background, l'alignement du contenu.

Les polices et les couleurs de police des différents éléments.

Enfin le format de la vignette.

Voilà c'est déjà terminé !

Ce design s'appliquera par défaut à toutes les sections liste de produits de votre boutique.

Il y a quand même un moyen de désigner une section en particulier, mais ça je vous en parle dans une autre vidéo ;)

Voilà la liste de produits entièrement designée !

C'est maintenant à vous de jouer !

A bientôt pour un nouveau tutoriel !

## Vidéos similaires

[DesignComment configurer le menu de navigation de votre app ?](/tutorials/shop/design/comment-configurer-votre-menu-de-navigation/)

![Comment configurer le menu de navigation de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignComment personnaliser les icônes de votre menu ?](/tutorials/shop/design/comment-personnaliser-les-icones-de-votre-menu/)

![Comment personnaliser les icônes de votre menu ?](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignComment créer la home page de votre app ?](/tutorials/shop/design/comment-creer-la-home-page-de-votre-app/)

![Comment créer la home page de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignComment configurer l'écran de lancement de votre app ?](/tutorials/shop/design/comment-configurer-lecran-de-lancement-de-votre-app/)

![Comment configurer l'écran de lancement de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignComment configurer la bannière de titre de votre boutique ?](/tutorials/shop/design/comment-configurer-la-banniere-de-titre-de-votre-boutique/)

![Comment configurer la bannière de titre de votre boutique ?](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignComment configurer le design global de votre app de vente en ligne ?](/tutorials/shop/design/comment-configurer-le-design-global-de-votre-boutique/)

![Comment configurer le design global de votre app de vente en ligne ?](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignComment personnaliser les icônes principales de votre app ?](/tutorials/shop/design/comment-personnaliser-les-icones-principales-de-votre-app/)

![Comment personnaliser les icônes principales de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignComment 'détacher' le design d'une section ?](/tutorials/shop/design/comment-detacher-le-design-dune-section/)

![Comment 'détacher' le design d'une section ?](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignComment choisir la taille de son header ?](/tutorials/shop/design/comment-choisir-la-taille-de-son-header/)

![Comment choisir la taille de son header ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)