---
title: "Cómo diseñar las secciones de tu tienda | App de tienda online - Tutoriales - GoodBarber"
description: "Hoy, aprenderemos a configurar el diseño de las secciones de la tienda.\r \r Cada tipo de sección tiene sus propias especificidades de diseño, pero el proceso para configurarlas es…"
canonical_url: "https://es.goodbarber.com/tutorials/shop/diseno/como-disenar-las-secciones-de-tu-tienda/"
lang: es
---

# Cómo diseñar las secciones de tu tienda | App de tienda online - Tutoriales - GoodBarber

[Atrás](https://es.goodbarber.com/tutorials/shop/)

# Cómo diseñar las secciones de tu tienda

Hoy, aprenderemos a configurar el diseño de las secciones de la tienda.

Cada tipo de sección tiene sus propias especificidades de diseño, pero el proceso para configurarlas es el mismo.

Para diseñar una sección, vayamos al menú Contenido y diseño> Diseño> diseño de secciones

Para este ejemplo, diseñaremos un Producto. Lista.

Primero, selecciona una plantilla. Puedes ver las modificaciones de inmediato en la vista previa del back office.

Elijamos la Plantilla 2

Luego configuramos el diseño de la zona de contenido.

color de fondo, alineación del contenido

Fuentes y colores de fuentes de los diferentes elementos

Y para terminar el formato de miniaturas

¡Voila! Todo listo

Este diseño se aplicará de forma predeterminada a todas las secciones de la lista de productos de su tienda.

Hay una forma de diseñar una sección en particular, pero esa es para otro video;)

Aquí tienes, mi lista de productos está lista.

¡Te toca!

¡Hasta pronto para otro tutorial!

## Vídeos similares

[DiseñoCómo configurar tu menú de navegación](/tutorials/shop/diseno/como-configurar-tu-menu-de-navegacion/)

![Cómo configurar tu menú de navegación](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DiseñoCómo personalizar los iconos del menú](/tutorials/shop/diseno/como-personalizar-los-iconos-del-menu/)

![Cómo personalizar los iconos del menú](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DiseñoCómo configurar la página de inicio de tu aplicación](/tutorials/shop/diseno/como-configurar-la-pagina-de-inicio-de-tu-aplicacion/)

![Cómo configurar la página de inicio de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DiseñoCómo personalizar tu pantalla de bienvenida](/tutorials/shop/diseno/como-personalizar-tu-pantalla-de-bienvenida/)

![Cómo personalizar tu pantalla de bienvenida](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DiseñoCómo configurar el encabezado de tu tienda](/tutorials/shop/diseno/como-configurar-el-encabezado-de-tu-tienda/)

![Cómo configurar el encabezado de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DiseñoCómo configurar el estilo global de tu tienda](/tutorials/shop/diseno/como-configurar-el-estilo-global-de-tu-tienda/)

![Cómo configurar el estilo global de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DiseñoCómo personalizar los iconos principales de tu tienda](/tutorials/shop/diseno/como-personalizar-los-iconos-principales-de-tu-tienda/)

![Cómo personalizar los iconos principales de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DiseñoCómo desenganchar el diseño de una sección](/tutorials/shop/diseno/como-desenganchar-el-diseno-de-una-seccion/)

![Cómo desenganchar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/shop/diseno/como-elegir-el-tamano-de-tu-encabezado/)

![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)