Central de conhecimento/Documentação/Artigo
Documentação

Usando a extensão App Embed para exibir conteúdo do site

Atualizado March 28, 2025

Como usar a extensão Mobile App Embed no Evlop

Introdução

A extensão Mobile App Embed permite incorporar páginas do seu site ou site Shopify diretamente no seu app mobile do Evlop. Ela exibe apenas o conteúdo principal da sua página, ocultando automaticamente cabeçalhos, rodapés e outros elementos não essenciais para garantir uma experiência fluida dentro do app.

Quando usar

  • Exibir rapidamente páginas personalizadas ou complexas do site sem precisar recriá-las.
  • Garantir consistência entre o seu site e o seu app mobile.
  • Incluir políticas, FAQs ou páginas especiais diretamente no app.

Como funciona

A extensão identifica o elemento HTML <main> diretamente dentro da tag <body> do seu site ou site Shopify, exibindo apenas esse conteúdo no app e ocultando todos os outros elementos. Para obter os melhores resultados, verifique se o tema do seu site coloca a tag <main> diretamente dentro de <body>, com cabeçalhos e rodapés também dentro da tag <body>, mas fora de <main>.

Solução de problemas

1. Se nada for exibido após ativar

  • Check: Confirme se o tema do seu site tem uma tag <main> HTML diretamente dentro do <body> ao redor do seu conteúdo principal.
  • Resolve: Se a tag <main> estiver ausente, adicione-a ao código do seu tema ou entre em contato com o desenvolvedor do tema para obter ajuda.
  • Check: Certifique-se de que o Mobile App Embed está ativado nas configurações do tema no Shopify:
    • Acesse Shopify Admin > Online Store > Themes > Customize.
    • Navegue até Theme Settings > App Embeds.
    • Ative a extensão Mobile App Embed.
  • Resolve: Se não estiver ativada, habilite e salve as configurações do tema.

2. Se o cabeçalho ou rodapé ainda estiver aparecendo

  • Check: Verifique a estrutura do tema do seu site. Cabeçalhos e rodapés devem estar dentro da tag <body> mas fora da tag <main>.
  • Resolve: Ajuste a estrutura do seu tema movendo cabeçalhos e rodapés para fora da <main>. Se você não se sente confortável editando o código, entre em contato com o desenvolvedor do tema.

Para mais ajuda, entre em contato com o Suporte da Evlop.