• Coloca sua loja como um atalho na tela inicial do celular do cliente, com ícone próprio e nome próprio. Ao tocar nele, a loja abre em tela cheia, igual a um aplicativo — e o ícone fica ao lado do WhatsApp, Instagram e outros aplicativos.
• Não é um app de loja de aplicativos: ele roda sobre o seu site atual. Você não precisa publicar nada na Play Store nem na App Store.
• Uma faixa de convite aparece para o cliente na loja, explicando como instalar — com um toque no Android e com um passo a passo no iPhone.
• Disponível para lojas virtuais Magento 1.

#Passo a Passo por Escrito

#1. Acesse as configurações do aplicativo

No painel administrativo da sua loja, vá em Sistema → Configuração.

No menu lateral esquerdo, procure a aba Tema Mageshop e clique em App na Tela Inicial (PWA).

#2. Habilite o aplicativo

Abra o bloco Geral e mude o campo Habilitar PWA para Sim.

Clique em Salvar Configuração no canto superior direito.

#3. Envie a logo do aplicativo

Abra o bloco Ícone do App e, no campo Logo / Ícone, clique em Escolher arquivo e selecione a imagem.

Use um arquivo PNG quadrado, com no mínimo 512x512 pixels. Uma única imagem é suficiente: todos os tamanhos usados pelo celular são gerados automaticamente a partir dela.

Logo abaixo, o campo Cor de Fundo do Ícone define a cor aplicada atrás da logo. O padrão é branco (#FFFFFF). Se a sua logo for clara ou branca, troque por uma cor escura. Se preferir manter o fundo transparente, deixe o campo vazio.

Clique em Salvar Configuração.

#4. Defina o nome que aparece no celular

Ainda no bloco Geral, preencha:

1. Nome do App — o nome completo do aplicativo. Se deixar vazio, será usado o nome da sua loja.
2. Nome Curto — o nome que aparece embaixo do ícone na tela inicial. O ideal é até 12 caracteres. Se deixar vazio, será usado o Nome do App.
3. Descrição — uma frase curta sobre o aplicativo.
4. URL de Início — a página que o app abre ao ser aberto. O padrão é /?utm_source=pwa.

#5. Ajuste a aparência do aplicativo (opcional)

Abra o bloco Aparência. Ele está dividido em três partes, indicadas por subtítulos.

iPhone e Android:

1. Modo de Exibição — como o app abre. Mantenha em Como aplicativo, sem barra do navegador, que é o recomendado.
2. Cor de Fundo ao Carregar — a cor que aparece atrás da logo enquanto a loja está abrindo. Combine com a identidade visual da sua loja.
3. Tela de Abertura — liga a tela com sua logo enquanto a loja carrega dentro do app. Vem ligada.
4. Mostrar em — em quais aparelhos exibir essa tela. O padrão é iPhone e Android (recomendado).
5. Texto — a frase exibida abaixo do indicador de carregamento. O padrão é Carregando...
6. Cor do Texto — faça contraste com a Cor de Fundo ao Carregar.

Apenas Android:

1. Orientação da Tela — trava o app na vertical ou na horizontal. O padrão, Qualquer, segue o giro do aparelho.
2. Cor da Barra do Sistema — a cor da barra superior do celular com o app aberto. Combine com o topo do seu site.

Apenas iPhone (iOS):

1. Barra de Status — aparência da barra com relógio e bateria. O padrão é Barra sólida escura.

#6. Personalize o banner de convite (opcional)

Abra o bloco Banner de Instalação. É a faixa que convida o cliente a instalar o aplicativo.

1. Exibir Banner de Instalação — vem em Sim.
2. Exibir Ícone/Logo no Banner — onde mostrar a miniatura da logo. No celular ela ocupa espaço; se o banner ficar apertado, escolha Somente no Computador ou Não exibir.
3. Título do Banner — o padrão é Instale nosso app.
4. Mensagem (Android), Mensagem (iOS) e Mensagem (Computador) — textos diferentes para cada situação, porque a forma de instalar muda em cada uma.
5. Texto do Botão Instalar (Android) — o padrão é Instalar.
6. URL do Tutorial de Instalação (iOS) — já vem preenchida com /como-instalar-app, que é a página criada automaticamente no passo 2.
7. Texto do Botão do Tutorial (iOS) — o padrão é Como instalar.
8. Abrir Tutorial em Nova Aba (iOS) — em Sim, o cliente não perde a navegação na loja.
9. Reexibir após (dias) — quantos dias esperar antes de mostrar o banner de novo, depois que o cliente o fecha. O padrão é 30.

#7. Ajuste as cores do banner (opcional)

Abra o bloco Cores do Banner e ajuste os cinco campos: Cor de Fundo do Banner, Cor do Título, Cor da Mensagem, Cor de Fundo do Botão e Cor do Texto do Botão.

Cada campo tem um seletor de cor ao lado, para você escolher visualmente em vez de digitar o código.

#8. Personalize a página exibida sem conexão (opcional)

Abra o bloco Página Offline. Ela aparece quando o cliente abre o aplicativo e está sem internet.

Você pode ajustar Título, Mensagem, Texto do Botão e as quatro cores da página. Se deixar a Cor de Fundo vazia, ela usa a mesma cor da tela de carregamento.

#9. Confira a página de tutorial criada automaticamente

Vá em Conteúdo → Páginas e localize a página Como instalar o app.

Ela é criada sozinha quando você habilita o recurso e já vem pronta, com o passo a passo ilustrado para Android e para iPhone. Você pode editá-la à vontade — o texto, as imagens e o título são seus.

#10. Atualize o cache da loja

Toda alteração nessas configurações só aparece para o cliente depois de atualizar o cache — a memória temporária da loja.

Vá em Sistema → Cache, marque Todos os tipos, selecione Atualizar no campo Ações e clique em Enviar.

#Validação e Testes

Após concluir a configuração, execute os testes abaixo para confirmar o funcionamento correto.

Teste 1 — Instalação no Android

Ação: abra sua loja no navegador Chrome de um celular Android. Aguarde a faixa de convite aparecer na parte de baixo da tela e toque no botão Instalar. Confirme na janela que o Android exibe.

Teste 2 — Instalação no iPhone

Ação: abra sua loja no navegador Safari de um iPhone. Na faixa de convite, toque no botão Como instalar e leia o passo a passo. Depois siga as instruções: toque no ícone de Compartilhar (o quadrado com a seta para cima) e escolha Adicionar à Tela de Início.

Teste 3 — Faixa de convite e o botão de fechar

Ação: abra sua loja em um navegador que você ainda não usou para testar. Confirme que a faixa aparece com o título, a mensagem e as cores que você configurou. Feche a faixa no X e recarregue a página.

Teste 4 — Página sem conexão

Ação: com o aplicativo já instalado no celular, ative o modo avião e abra o app pelo ícone da tela inicial. Depois desative o modo avião e toque no botão da página.

Se não funcionar, verifique:

• A Logo / Ícone foi enviada e aparece como miniatura na configuração. Sem ela, o Android não oferece a instalação.
• O campo Habilitar PWA está em Sim e a configuração foi salva.
• O cache da loja foi atualizado após a última alteração (passo 10).
• Você está testando fora do aplicativo já instalado. Dentro do app, a faixa de convite não aparece — o cliente já instalou.
• Você não fechou a faixa antes no mesmo navegador. Se fechou, ela só volta depois do prazo configurado em Reexibir após (dias).
• Sua loja está em endereço seguro (https://). Esse é um requisito do próprio celular para permitir a instalação.

#Observações Importantes

• Não é um aplicativo de loja de aplicativos. O recurso instala um atalho avançado que abre a sua loja em tela cheia, com ícone próprio. Você não precisa publicar nada na Play Store ou na App Store, nem manter versões separadas.

• O Android instala com um toque; o iPhone, não. No Android o próprio navegador oferece a instalação pelo botão da faixa. No iPhone a Apple não permite esse botão — o cliente precisa usar Compartilhar → Adicionar à Tela de Início, e é exatamente por isso que existe a página de tutorial.

• A faixa de convite não aparece no computador com botão de instalar. No computador ela é informativa e leva o cliente ao tutorial, porque o aplicativo é feito para ser instalado no celular.

• Desativar o recurso não apaga o ícone do celular do cliente. O atalho na tela inicial é criado pelo sistema operacional e só o próprio cliente pode removê-lo. O que acontece ao desativar é que a loja para de funcionar como aplicativo e volta a abrir como site normal, conforme cada cliente for reabrindo a loja.

• A primeira página aberta depois de trocar a logo ou as cores pode demorar mais. Isso acontece porque todas as imagens do aplicativo são geradas naquele momento a partir da sua logo. Depois disso, tudo volta ao normal. A recomendação é abrir a página inicial da loja uma vez você mesmo, logo após salvar, antes de divulgar.

• As configurações podem ser diferentes por loja. Se você tem mais de uma visão de loja no mesmo painel, é possível configurar cada uma separadamente pelo seletor no canto superior esquerdo.

• O aplicativo nunca guarda preços, carrinho ou checkout. Todas as páginas são sempre buscadas atualizadas da loja. O cliente não corre risco de ver preço antigo ou carrinho errado por causa do aplicativo.

#Referências e Relacionados

• Limpeza de cache da loja: toda alteração no recurso só aparece depois de atualizar o cache. Aprenda a atualizar o cache da sua loja
• Gerenciamento de páginas de conteúdo (CMS): o recurso cria a página Como instalar o app automaticamente. Se você quiser editar o texto, trocar as imagens ou incluí-la no menu da loja, esta doc cobre como trabalhar com páginas.
• Certificado de segurança (HTTPS): o celular só permite instalar o aplicativo em lojas com endereço seguro. Se a sua loja ainda não estiver em https://, resolva isso antes.
• Configurações de tema da loja: as demais opções da aba Tema Mageshop, que definem a identidade visual usada também pelo aplicativo.