---
title: "How to design the sections of your shop | eCommerce App Tutorials - GoodBarber"
description: "Hello and welcome to your GoodBarber back office\r Today, we’ll learn how to set up the design of the shop’s sections.\r \r Each type of section has its own design specificities, but the pro…"
canonical_url: "https://www.goodbarber.com/tutorials/shop/design/how-to-design-the-sections-of-your-shop/"
lang: en
---

# How to design the sections of your shop | eCommerce App Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/shop/)

# How to design the sections of your shop

Hello and welcome to your GoodBarber back office
Today, we’ll learn how to set up the design of the shop’s sections.

Each type of section has its own design specificities, but the process to set them up is the same.

To design a section, let’s go to the menu Content and Design > Design > sections design
For this example, we’ll design a Product. List.

First thing, select a template. You can see the modifications straight away in the back office preview.

Let's choose Template 2

Then we set up the design of the content zone
background-color, content alignment
Fonts and fonts colors of the different elements

And to finish the thumbnail format

Voila! All done

This design will be applied by default to all the product list sections in your shop.
There is a way to design a section in particular, but that’s for another video ;)

Here you go, my product list is ready
It’s your turn now!

See you soon for another tutorial!

## Related videos

[DesignHow to set up your navigation menu](/tutorials/shop/design/how-to-set-up-your-navigation-menu/)

![How to set up your navigation menu](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignHow to customize the icons of the menu](/tutorials/shop/design/how-to-customize-the-icons-of-the-menu/)

![How to customize the icons of the menu](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignHow to set up the home page of your app](/tutorials/shop/design/how-to-set-up-the-home-page-of-your-app/)

![How to set up the home page of your app](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignHow to customize your splashscreen](/tutorials/shop/design/how-to-customize-your-splashscreen/)

![How to customize your splashscreen](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignHow to set up the header of your shop](/tutorials/shop/design/how-to-set-up-the-header-of-your-shop/)

![How to set up the header of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignHow to set up the global style of your shop](/tutorials/shop/design/how-to-set-up-the-global-style-of-your-shop/)

![How to set up the global style of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignHow to customize the main icons of your shop](/tutorials/shop/design/how-to-customize-the-main-icons-of-your-shop/)

![How to customize the main icons of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignHow to unhook the design of a section](/tutorials/shop/design/how-to-unhook-the-design-of-a-section/)

![How to unhook the design of a section](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignHow to choose your header size ?](/tutorials/shop/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)