No desenvolvimento web, um ambiente de teste de sites é uma cópia do seu site verdadeiro, em que você pode testar ajustes ao design e novos recursos. Em vez de enviar atualizações diretamente para um site ao vivo, os desenvolvedores utilizam um ambiente de teste de sites para testar e revisar até que estejam prontos para mostrar o trabalho a um público real. Pense em como se fosse um sandbox, um laboratório ou um ensaio geral privado.
As lojas da Shopify não vêm com ambientes de ambiente de teste de sites nativos, mas existem algumas alternativas, incluindo duplicar um tema, criar uma loja de desenvolvimento ou usar um aplicativo de ambiente de teste de sites de terceiros. A Shopify também ampliou as ferramentas integradas de teste com recursos como rollouts, que ajudam lojistas a agendarem mudanças de tema e testarem variações, como testes A/B de temas, dentro de um fluxo mais controlado.
Saiba mais sobre os benefícios de usar um ambiente de teste de sites para seu e-commerce, incluindo como criar um site de ambiente de teste de sites na Shopify e como incorporar recursos de teste ao seu fluxo de ambiente de teste de sites.
O que é um ambiente de teste de sites na Shopify?
Um ambiente de teste de sites na Shopify é um ambiente privado de testes onde você pode revisar atualizações ou designs refeitos sem afetar a loja ao vivo. Uma atualização fundamental, como uma nova seção de imagens de produtos, pode afetar as conversões do site se o site não funcionar adequadamente como consequência da alteração.
Um ambiente de teste de sites simula uma versão ao vivo de um site para que desenvolvedores e partes interessadas possam experimentá-lo como um usuário faria se estivesse ao vivo.
Como a Shopify não oferece um ambiente de teste de sites nativo, você pode combinar alternativas integradas e baseadas em aplicativos para testar mudanças.
A duplicação de tema cria uma segunda versão do tema existente, permitindo as edições de design. Criar uma loja de desenvolvimento ajuda a testar integrações, novas funcionalidades e novos aplicativos. Já os aplicativos de ambiente de teste de sites podem espelhar os dados de todo o site. As lojas de desenvolvimento estão disponíveis para quem tem uma conta de parceiro da Shopify, e a inscrição é gratuita.
A Shopify também expandiu as ferramentas nativas de teste. O SimGym, por exemplo, é um aplicativo da própria Shopify que usa compradores com IA para simular o comportamento real de compra em seu site.
Você pode usar o SimGym como um ponto de partida no site existente para entender quais mudanças fazer ou como uma camada de avaliação de qualidade (QA) depois de publicar alterações em uma versão duplicada. O SimGym funciona apenas em sites ao vivo, não em sites de desenvolvimento em rascunho.
Outro recurso útil são os Rollouts, que são um sistema centralizado para agendar e realizar testes A/B de mudanças no site. Programe alterações de tema para irem ao ar em data e horário específicos, como em uma promoção relâmpago ou lançamento sazonal, defina uma data de término para reverter a loja automaticamente, ou divida o tráfego entre o seu tema atual e uma variedade, e meça a taxa de conversão. Os rollouts estão disponíveis em todos os planos da Shopify. As lojas do plano Plus da Shopify também podem programar configurações de checkout e conta de clientes.
Site de desenvolvimento vs. site de ambiente de teste de sites vs. site ao vivo
O desenvolvimento web ocorre em três principais áreas: desenvolvimento, ambiente de teste de sites e ao vivo. Primeiro, o código é escrito em um site de desenvolvimento, depois é enviado para um site de ambiente de teste de sites para avaliação de qualidade (QA) e, finalmente, o site ao vivo é atualizado para todos os usuários.
Site de desenvolvimento
O site de desenvolvimento é um ambiente onde os desenvolvedores escrevem o código e trazem ideias à vida. Geralmente, é um ambiente local acessível apenas à equipe de desenvolvimento. Esta fase envolve a adição de imagens, textos, vídeos e códigos para funcionalidades personalizadas, como filtros de produtos interativos. Alguns testes iniciais ocorrem nesta fase, mas o ambiente de desenvolvimento normalmente não é polido nem os compradores verão o que está acontecendo. As mudanças precisarão ser atualizadas.
Site de ambiente de teste de sites
Após a conclusão do desenvolvimento, o código é publicado em um novo site de ambiente de teste de sites. Este é o seu ambiente de teste de sites, onde todos os problemas são resolvidos como se estivessem à vista de um público ao vivo. Sites de ambiente de teste de sites ficam online, geralmente em um domínio de ambiente de teste de sites que utiliza um URL como, “ambiente-teste-sites.seunomeweb.com.br”. Na Shopify, seu tema ou sua loja de desenvolvimento podem ser duplicados.
Certifique-se de que seu site de ambiente de teste de sites não seja indexável, ou seja, você deve desencorajar os mecanismos de busca de exibir você nos resultados de pesquisa. Você pode fazer isso rapidamente adicionando algumas linhas de código. Se necessário, proteja o site de ambiente de teste de sites com senha se ele contiver informações que você não está pronto para que os clientes vejam, como uma promoção futura ou números proprietários de uma base interna.
Quando o site de ambiente de teste de sites estiver ao vivo, as partes interessadas revisam e fornecem feedback. O código retorna ao site de desenvolvimento, onde os desenvolvedores abordam quaisquer demandas e enviam as alterações para o site de ambiente de teste de sites novamente. Esse processo continua até que todas as partes interessadas aprovem.
Sites ao vivo
Um site ao vivo é a versão final, voltada para o público, também chamada de ambiente de produção, site de produção ou, de forma abreviada, produção.
É nesta etapa em que o público confere o site e as atualizações são visíveis para todos os usuários. Eles podem fazer compras, interagir com seu conteúdo e se conectar com sua marca. Quando uma mudança estiver ao vivo, todos podem acessá-la. A avaliação de qualidade (QA) minuciosa na fase de ambiente de teste de sites é essencial.
Por que usar um ambiente de teste de sites para sua loja da Shopify?
Atualizações no site podem afetar a experiência do usuário sem querer e testar em ambiente de teste de sites é uma parte importante do processo de desenvolvimento e manutenção.
A seguir, confira alguns aspectos que um site de ambiente de teste de sites pode ajudar você.
- Teste elementos sem afetar a experiência do usuário: experimente designs e novos recursos sem atrapalhar a experiência dos seus clientes.
- Identifique bugs antes do lançamento público: encontre erros como problemas no carrinho, botões que não funcionam ou imagens de produtos quebradas.
- Teste integrações sem interromper o site: teste integrações de terceiros como interfaces de programação de aplicativos (APIs) ou calculadoras de frete sem afetar o site ao vivo.
- Colabore com partes interessadas: convide várias equipes, designers e partes interessadas para revisar e colaborar em revisões.
- Simule a experiência do usuário: experimente o site exatamente como seus clientes farão, permitindo que você encontre falhas na experiência de compra. Esta é uma simulação mais completa do que simplesmente usar arquivos de design interativos em uma ferramenta como o Figma.
- Teste o desempenho do site: suas atualizações estão tornando seu site mais lento? Um site de ambiente de teste de sites permite que você teste o impacto no desempenho técnico, o que também pode impactar as classificações de busca orgânica.
Três maneiras de criar um ambiente de teste de sites na Shopify
Os sites padrão da Shopify não vêm com um site de ambiente de teste de sites, então você precisará criar um. Existem três maneiras de fazer isso.
1. Duplique seu tema
Esta é a maneira mais fácil de criar um ambiente de ambiente de teste de sites com um plano padrão da Shopify. O tema contém os elementos visuais e estruturais da loja, mas não inclui configurações secundárias, como aplicativos, checkout ou estoque.
É um processo de configuração rápido que leva apenas alguns cliques. Você também não precisa instalar aplicativos de terceiros porque seu ambiente de ambiente de teste de sites estará integrado ao painel de administração da Shopify.
Esta opção é melhor para mudanças de design, como ajustes de layout, atualização de textos, novas seções de página ou designs sazonais refeitos. Ela não fornece um ambiente de teste para integrações ou mudanças de funcionalidade, como alterações nas configurações do checkout.
Veja como criar um site de ambiente de teste de sites na Shopify duplicando seu tema.
- Acesse “Loja Online” > “Temas” no painel de administração da Shopify.
- Em “Tema atual” > “Ações”, selecione “Duplicar”.
- Agora você tem uma cópia idêntica do seu tema ao vivo. Edite-o livremente sem afetar o site ao vivo. Você pode clicar em “Visualizar” para gerar uma instância de ambiente de teste de sites.
- Quando você tiver terminado os testes, pode fazer as alterações no seu site ao vivo.
Lembre-se que você precisará adicionar manualmente ao site ao vivo os elementos que já colocou na versão duplicada.
2. Crie uma loja de desenvolvimento
Este método requer que você crie uma nova conta de parceiro da Shopify, que permite construir uma loja completa para testes. As contas de parceiros são recomendadas para desenvolvedores, designers e agências que constroem e gerenciam lojas para clientes. Elas são gratuitas e dão acesso a uma loja de desenvolvimento, permitindo que você replique tudo sobre seu site principal, incluindo o design e a funcionalidade do site, em um ambiente privado.
Criar uma loja de desenvolvimento é a melhor opção para mudanças de funcionalidade, incluindo código personalizado ou integrações de terceiros. Por exemplo, um ajuste de preço pode afetar a lógica do carrinho, os valores de frete e aplicativos integrados. Em uma loja de desenvolvimento, você consegue identificar esses efeitos posteriores antes que um cliente os encontre.
Veja como criar um site de ambiente de teste de sites usando uma loja de desenvolvimento.
- Inscreva-se para uma conta de parceiros da Shopify.
- Acesse “Lojas” > “Criar loja”.
- Selecione “Desenvolvimento” como o tipo de loja.
- Nomeie algo como “ambiente-teste-seunome” para que seja fácil diferenciá-la de sua loja ao vivo.
- Adicione produtos, instale seu tema e configure tudo para espelhar sua loja ao vivo. Para transferir produtos, clientes e pedidos em lote, faça backup da loja usando arquivos CSV. Você também pode fazer backup do tema baixando-o pelo painel de administração da Shopify.
Agora, você pode simular a experiência completa do usuário sem colocar seu site verdadeiro em risco.
As lojas de desenvolvimento são gratuitas para realizar testes, mas elas têm algumas limitações. Por exemplo, você só pode instalar aplicativos gratuitos e para parceiros, e pode gerar apenas etiquetas de envio de teste.
Se você quiser testar aplicativos adicionais ou criar etiquetas de frete funcionais, pode configurar uma nova loja paga em um plano Básico. Assim como se você duplicasse seu tema, precisará copiar manualmente os elementos do seu site que foram adicionados ao seu site de ambiente de teste de sites.
3. Use um aplicativo
Às vezes, duplicar manualmente seu site pode fazer com que elementos “sumam”, então usar um aplicativo de ambiente de teste de sites pode garantir uma cópia exata, principalmente se você tiver um tema complicado.
Algumas ferramentas de ambiente de teste de sites como Duplify (que oferece um plano gratuito limitado) permitem que você crie um ambiente de ambiente de teste de sites que replica todo o seu site. Você poderá testar páginas e produtos existentes antes de ir ao vivo.
O Rewind Staging é um aplicativo semelhante (com um teste gratuito) que inclui backups de tema, para que você possa reverter para a versão anterior se algo der errado. Basta acessar a Shopify App Store e procurar aplicativos de ambiente de teste de sites para começar.
Veja como criar um site de ambiente de teste de sites usando Rewind Staging:
- Instale o Rewind Staging no seu site ao vivo da Shopify App Store.
- Escolha sua loja ao vivo como sua “Loja-fonte”.
- Instale o Rewind Staging na sua loja de desenvolvimento.
- Escolha sua loja de desenvolvimento como sua “Loja de destino”.
- Copie a chave da sua loja “Fonte” para sua loja “Destino” para associar as lojas.
- Escolha as informações a serem copiadas para o site de ambiente de teste de sites, para que ele espelhe seu site ao vivo.
- Verifique continuamente as alterações de cópia para manter a sincronização entre ambas as lojas.
- Clique em “Iniciar tarefa” para começar a cópia.
Perguntas frequentes sobre ambiente de teste de sites na Shopify
Qual é a diferença entre um site de produção e um ambiente de teste de sites?
Um site de produção é a versão final de um site, acessível ao público. O ambiente de teste de sites fornece uma prévia privada das atualizações do site, simulando a versão final. Ele ajuda os desenvolvedores a identificarem bugs, testarem a funcionalidade do site e coletarem feedback das partes interessadas antes do lançamento final.
É possível criar um site de ambiente de teste de sites para a Shopify?
A Shopify não possui um site de ambiente de teste de sites embutido. Você pode criar um manualmente duplicando seu tema, criando uma loja de desenvolvimento ou usando um aplicativo como o Rewind Copy.
Como faço para colocar meu site ao vivo na Shopify?
Siga as etapas a seguir para disponibilizar seu site na Shopify.
- Altere o registro A do seu domínio raiz e aponte-o para o endereço IP da Shopify.
- Altere o registro CNAME para o seu domínio hospedado na Shopify.
- Conecte seu domínio na Shopify.
- Defina seu domínio principal na Shopify.
- Remova a senha da sua loja online.
