{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-criar-ambiente-de-desenvolvimento-de-versao-mobile","locale":"pt","slug":"como-criar-ambiente-de-desenvolvimento-de-versao-mobile","path":"docs/pt/tutorials/storefront/layout/como-criar-ambiente-de-desenvolvimento-de-versao-mobile.md","branch":"main","content":"> Tutorial válido apenas para lojas CMS Portal (Legado).\n\nIniciamos esse artigo reforçando que a tendência e as boas práticas indicam a utilização de uma única versão (responsiva) para desktop e mobile. A criação de uma versão mobile apartada era uma prática adotada quando os recursos de CSS dificultavam a adaptação de uma versão desktop para mobile. \n\nHoje em dia, com os recursos que o CSS oferece, a criação de uma versão responsiva tornou-se padrão. Leia mais sobre esse assunto no artigo [Responsivo × Versão Mobile](/pt/docs/tutorials/responsivo-x-versao-mobile/).\n\nEsse artigo tem objetivo de ilustrar como preparar um ambiente de desenvolvimento para versão mobile sem impactar a versão de produção.\n\nExistem algumas maneiras de desenvolver uma versão mobile sem impactar a versão desktop e sem que esse desenvolvimento esteja público em navegações de mobile. Nesse artigo, abordaremos a principal.\n\n## Preparando ambiente\n\nPara desenvolver uma versão mobile com um novo WebSite, você deve seguir os seguintes passos:\n\n1. Configurar uma nova loja (temporária) no módulo **Configurações da conta** Esse passo deve ser realizado pelo responsável pela loja (ambiente). No Admin, acesse __Configurações da conta > Conta__. Selecione a conta deseja e clique __Configurar outra loja__.\n2. Criar (ou clonar o principal) um novo WebSite no **CMS Portal (Legado)**:\n\n  Storefront > Layout > Pasta CMS > Sites and Channels > New Website\n\n![cms-new-website](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-criar-ambiente-de-desenvolvimento-de-versao-mobile_1.png)\n\n3. Criar estrutura de pastas do WebSite Mobile: Nesse passo será necessário criar as pastas padrões do sistema que serão utilizadas na versão mobile (busca, departamento, categoria, marca, produto etc.)\n\n## Desenvolver versão mobile\n\nPara visualizar a versão mobile, acesse o site pelo ambiente _myvtex.com.br_ através de algum host configurado no Configurações da conta. Não se esqueça dos seguintes parâmetros: `?uam=true&mobile={versao_mobile)`\n\nExemplo: http://(nomedaloja).myvtex.com?uam=true&mobile=4\n\n## Publicando versão mobile\n\nQuando o desenvolvimento estiver concluído, para publicar a versão mobile, siga os passos abaixo:\n\n1. __Definir versão mobile do WebSite Principal:__ No WebSite Principal, configure o campo WebSite-Mobile, apontando para o WebSite mobile.\n2. __Definir WebSite-Pai da versão Mobile:__ No WebSite Mobile, configure o campo WebSite-Pai, apontando para o WebSite Principal.\n3. __Excluir Ligação (WebSite Binding) da versão Mobile:__ No WebSite Mobile, exclua a Ligação (Binding) criada. Versões mobile não precisam de ligação pois eles herdam essa configuração do WebSite Pai.\n4. __Exclua a loja Mobile (Temporária) criada no Configurações da conta:__ Essa loja foi criada apenas para servir como ambiente para o desenvolvimento do mobile. Como a versão mobile herdará os hosts do WebSite Principal, essa loja não será mais utilizada e, por isso, indica-se sua exclusão."}