---
title: "Como configurar a página inicial (Home) do seu aplicativo | App de Loja Online - Tutoriais - GoodBarber"
description: "Hoje vamos aprender como montar a Home da sua loja\r \r A página inicial é a primeira página que seus usuários verão ao abrir seu aplicativo\r \r Nesta página, v…"
canonical_url: "https://pt.goodbarber.com/tutorials/shop/design/como-configurar-a-pagina-inicial-do-seu-aplicativo/"
lang: pt
---

# Como configurar a página inicial (Home) do seu aplicativo | App de Loja Online - Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/shop/)

# Como configurar a página inicial (Home) do seu aplicativo

Hoje vamos aprender como montar a Home da sua loja

A página inicial é a primeira página que seus usuários verão ao abrir seu aplicativo

Nesta página, você pode encontrar uma navegação secundária para complementar sua navegação principal

Vamos começar indo ao menu Conteúdo e Design e, em seguida, Home

Sua Home consiste em diferentes módulos chamados widgets
Existem diferentes tipos de widgets
- Lista de produtos
- Lista de coleções
- Banner promocional
- Link
- Links sociais
- Separador
- HTML
- Blog
- Localizador de lojas

Cuidado, a maioria dos widgets são atalhos para seções existentes. Eles só aparecerão se você já tiver adicionado a seção à sua loja. Por exemplo, se você não tiver uma seção de Pesquisa em sua loja, o widget de pesquisa não estará disponível.

Você pode encontrar os vídeos em cada seção na barra de informações

Para começar, vamos adicionar o widget da lista de produtos
Eu seleciono a seção ou seções relacionadas

Widget adicionado
Agora vou editá-lo

Eu seleciono um modelo

Exibição do título e todos os elementos de design

Os produtos exibidos aqui serão classificados por tags (o link para o vídeo das tags está na barra de informações)
Nesse caso, exibirei apenas produtos de cores claras

Tudo feito
Eu seleciono o número de produtos para exibir
As margens

O formato da miniatura

E voila

Agora vou criar o widget de pesquisa
Mesmo princípio. Adicionar e editar o widget

Ok, veja que o widget está lá, mas eu prefiro tê-lo no topo da página

Basta arrastá-lo para a posição desejada, como este

Agora, um widget de banner promocional

Mais widgets de lista de produtos

Um widget de newsletter para criar minha base de e-mail

Um widget de social media para exibir todos os meus links

E finalmente os avisos legais

Voila, tudo feito

A página inicial oferece muitas possibilidades, especialmente com os widgets de links, para exibir links para suas diferentes seções, mas também ações (chamadas, emails, texto) e até links externos. E o widget HTML que você pode personalizar totalmente.

Deixe-me mostrar a versão final da minha Home

Agora é hora da sua Home!

Vejo vocês em breve para outro tutorial!

## Vídeos semelhantes

[DesignComo configurar seu menu de navegação](/tutorials/shop/design/como-configurar-seu-menu-de-navegacao/)

![Como configurar seu menu de navegação](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignComo personalizar os ícones do menu](/tutorials/shop/design/como-personalizar-os-icones-do-menu/)

![Como personalizar os ícones do menu](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignComo personalizar sua tela de lançamento](/tutorials/shop/design/como-personalizar-sua-tela-de-lancamento/)

![Como personalizar sua tela de lançamento](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignComo configurar o cabeçalho da sua loja](/tutorials/shop/design/como-configurar-o-cabecalho-da-sua-loja/)

![Como configurar o cabeçalho da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignComo configurar o estilo global da sua loja](/tutorials/shop/design/como-configurar-o-estilo-global-da-sua-loja/)

![Como configurar o estilo global da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignComo personalizar os principais ícones da sua loja](/tutorials/shop/design/como-personalizar-os-principais-icones-da-sua-loja/)

![Como personalizar os principais ícones da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignComo criar o design das seções de sua loja](/tutorials/shop/design/como-criar-o-design-das-secoes-de-sua-loja/)

![Como criar o design das seções de sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[DesignComo desengatar o design de uma seção](/tutorials/shop/design/como-separar-o-design-de-uma-secao/)

![Como desengatar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignComo escolher o tamanho do seu cabeçalho](/tutorials/shop/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)