Como o desenvolvimento personalizado avançado da Shopify cria uma melhor experiência do usuário

Para a Paravel, vendedora de malas, malas e outros acessórios de viagem de alta qualidade, inovadores e produzidos com responsabilidade, a funcionalidade personalizada é essencial. Os produtos que produzem e vendem são únicos, por isso, para eles, era necessário oferecer uma experiência de compra única aos seus clientes.

A Paravel precisava de muitas funcionalidades básicas de comércio eletrônico para possibilitar a execução de operações práticas por meio de sua loja online. Originalmente, eles foram construídos em uma plataforma de código aberto chamada Spree, que tem muitos adeptos e apoiadores pelo próprio fato de ser uma plataforma de código aberto.

O Spree, como outras plataformas de código aberto, como Magento, é extremamente personalizável. Ele também pode ser integrado a um grande número de plugins e aplicativos de terceiros, é altamente escalável e exibe um nível de intuição de interface do usuário que facilita o desenvolvimento de uma interface amigável para dispositivos móveis.

Embora este seja apenas um instantâneo rápido dos vários recursos funcionais do Spree, alguns deles têm o mesmo alto custo de outras plataformas de código aberto. Eles podem ser quase ilimitados em funcionalidade, mas exigem muito tempo de desenvolvimento e ainda mais experiência para serem realizados. Sem ampla experiência em codificação ou experiência em desenvolvimento, plataformas como o Spree podem esgotar os recursos rapidamente.

A Paravel precisava dessa experiência de compra única, mas também precisava de uma solução pronta para uso que oferecesse muito aos seus comerciantes de comércio eletrônico. O problema para eles era como eles poderiam obter sua loja de comércio eletrônico já meticulosamente projetada e desenvolvida do Spree para uma plataforma mais capaz?

Um processo de migração completo

Após comunicação com nossa equipe de vendas, a Paravel decidiu que uma mudança para Shopify Plus era a resposta – com algumas estipulações. Entre outras coisas, a Paravel não queria experimentar nenhum efeito negativo da migração e queria que sua nova loja oferecesse todas as funcionalidades de sua loja Spree e muito mais. Para fazer isso, a Paravel precisava de mais do que um parceiro Shopify Plus – eles precisavam de um especialista Shopify Plus.

Enquanto o Spree oferecia opções quase ilimitadas de personalização, Shopify Plus, como uma plataforma SaaS de comércio eletrônico hospedada, poderia oferecer muito mais. Com a ajuda de uma equipe de desenvolvimento como 1Digital ^Ⓡ , Shopify Plus pode oferecer a eles todas as personalizações oferecidas pelo Spree e muito mais. Shopify Plus também ofereceu recursos de segurança aprimorados, tempo de atividade garantido, velocidade rápida do site, compatibilidade semelhante com aplicativos e plug-ins de terceiros, aceitação de várias opções de pagamento, imensa escalabilidade e muito mais. A Paravel foi, neste momento, encarregada de mover sua loja Spree existente, e seu design e funcionalidade, para Shopify Plus.

Para alguns, o processo de migração de um site é angustiante, mas sabíamos o contrário. Com centenas de migrações bem-sucedidas no retrovisor e uma equipe de desenvolvedores para apoiar nossos esforços, sabíamos que isso poderia ser feito sem nenhum problema. Bastaria um processo minucioso.

O processo foi intenso, mas nada que a 1Digital ^Ⓡ Agency não pudesse executar com louvor. O projeto exigiu a migração de 32 campos de produtos (incluindo nomes, descrições, imagens, preços e mais), bem como mais de 4.000 contas de clientes e pedidos cada. Para fazer isso, configuramos um servidor Linux temporário e escrevemos um script personalizado para desenhar e categorizar essas informações do inventário Spree de seu site original.

Para movê-lo, criamos outro script personalizado para se conectar à API da Shopify antes de importar corretamente todos os campos relevantes. Durante o processo e posteriormente, os dados foram verificados para garantir que estivessem chegando corretamente na nova loja, para que não apenas nada fosse perdido, mas tudo fosse preenchido para onde deveria ir.

Nosso processo completo evitou a perda de dados, mas e a perda de tráfego? Se há uma coisa que afasta os clientes de comércio eletrônico da perspectiva de uma nova plataforma (mesmo que venha com enormes benefícios), é o medo de perder tráfego ou autoridade de domínio.

Felizmente, nosso processo de migração evita danos ao SEO de forma tão meticulosa quanto evita a perda de dados. Com a Paravel, como fizemos com todos os projetos de migração, coletamos todas as URLs associadas ao site e configuramos redirecionamentos 301 para as URLs associadas no novo site da Shopify. Sem surpresa, a Paravel não sofreu perda de tráfego ou flutuação na classificação após a conclusão da migração.

Suporte – Just in Case

A migração para Shopify ocorreu sem problemas, e a Paravel estava a caminho de uma nova loja Shopify Plus com funcionalidade aprimorada e uma melhor experiência do usuário, mas, por segurança, incluímos um período de suporte gratuito de 30 dias com o projeto de migração . Qualquer agência de migração da Shopify com um processo comprovado deve fazê-lo; é apenas parte integrante de uma estratégia de migração bem-sucedida.

A duração dos períodos de suporte gratuito varia de acordo com o escopo do projeto, mas no caso da migração da Paravel, alocamos 30 dias. Isso deu a eles um mês inteiro para investigar seu novo site e resolver quaisquer bugs de migração que pudessem aparecer – que nós corrigiríamos gratuitamente.

Mesmo depois, permitimos que permanecessem em regime de adiantamento, sem pedir-lhes depósito; simplesmente cobrando por quaisquer alterações que eles registrariam após o término do período de suporte gratuito do site. Pequenas coisas como essas ajudam muito a garantir um bom atendimento ao cliente, e nosso objetivo é garantir que as migrações ocorram sem problemas, mesmo quando tudo é verificado, verificado novamente e verificado novamente.

Um site recém-desenvolvido

Mas não acabou com uma migração. A Paravel tinha critérios para a mudança associados à experiência do cliente que o novo site ofereceria e, para garantir isso, tivemos que desenvolver um novo site Shopify Plus para eles.

Como parte de seu projeto, os desenvolvedores da 1Digital ^Ⓡ Agency criaram uma nova página inicial para eles, que foi melhor integrada à marca e ajudou a posicionar seus produtos em uma luz mais desejável. Apresentava produtos atualizados e imagens de fundo que melhor se alinhavam com os interesses e percepções de seu mercado-alvo. Considere a impressão elegante e sofisticada da nova página inicial, abaixo, com uma imagem da página inicial antiga abaixo dela.

Para os visitantes de sua página inicial, o novo layout é imediatamente impressionante não apenas pela estética superior de suas imagens, mas pelo esforço mais concentrado que faz para colocar o valor dos produtos da Paravel na frente e no centro. Você também notará que há um menu na parte superior do novo layout da página inicial que estava faltando no design anterior; a maneira de acessar seus produtos anteriormente era rolando a página até onde havia um botão chamado “comprar a coleção”. A nova página apresenta recursos de navegação do site muito melhores, como você pode ver acima.

Rolando a página inicial, os visitantes podem ver avaliações por meio de um banner deslizante, saber mais sobre categorias de produtos populares e até ver como os clientes estão usando os produtos nas mídias sociais, como você pode ver em algumas das capturas de tela abaixo.

Além da página inicial, a 1Digital ^Ⓡ criou um novo modelo de página de categoria junto com uma página “Nossa História” para a Paravel, além de várias outras páginas do sistema. Entre as páginas que foram desenvolvidas estavam as páginas de carrinho e checkout, páginas de login, páginas de vale-presente e páginas de “obrigado”. Por fim, personalizamos várias páginas de conteúdo, incluindo suas páginas de “FAQ” e “Termos”.

A importância de um design de site responsivo de alta qualidade é fundamental para o comércio eletrônico hoje em dia, e os desenvolvedores da 1Digital ^Ⓡ tiveram o cuidado de preparar um site responsivo atualizado para a Paravel como parte do projeto. No interesse da experiência do usuário da Paravel, o novo design responsivo da 1Digital ^Ⓡ se adapta automaticamente a telas menores, redimensionando e reformatando o texto de acordo.

Desenvolvimento Avançado - Funcionalidade de Página de Categoria

Quando os desenvolvedores do 1Digital ^Ⓡ transferiram todas as informações associadas às categorias de produtos da Paravel, também adicionamos algumas novas funcionalidades para que eles repassassem aos seus clientes, melhorando a experiência do cliente.

Instalamos um Metafield Editor em seu modelo de página de categoria para que a Paravel pudesse fazer alterações rápidas em alguns dos emblemas que apareciam na exibição da página de categoria. Isso permitiu que eles editassem campos personalizados para que as promoções associadas a produtos “novos”, “mais vendidos” ou “em destaque” pudessem ser exibidas com mais destaque.

Esse recurso aparentemente simples dá muito poder aos administradores da Paravel para fazer alterações rápidas e fáceis na exibição de seu site sem trabalhar com um desenvolvedor. Um homem pode receber um peixe ou ensinar a arte, e fornecemos instruções detalhadas à Paravel sobre como usar e gerenciar o aplicativo para que eles possam fazer alterações facilmente mesmo após o encerramento do projeto.

Da mesma forma, os desenvolvedores da 1Digital ^Ⓡ criaram a funcionalidade Product Swatches e Quick View nas páginas de coleções da Paravel. Criamos um script personalizado para a página de coleções do Shopify Plus que conseguiu buscar e exibir as informações desejadas.

O script para essas amostras também garantiu que, quando um cliente clicasse na amostra associada à cor de seu interesse, a imagem do produto fosse exibida nessa cor. Além disso, exibiria o preço aplicável associado à alteração, bem como quaisquer opções de “personalização” ou, se necessário, uma mensagem de “esgotado”.

Desenvolvimento Avançado - Funcionalidade da Página do Produto

A Paravel coloca uma grande ênfase na experiência do cliente e, como tal, eles exigiram uma grande quantidade de funcionalidades adicionais de seu modelo de página de produto, incluindo recursos adicionais para ajudar a personalizar a experiência de compra.

Assim, como parte da vertente de desenvolvimento avançado do projeto, a 1Digital ^Ⓡ ajudou a criar um novo e melhor conjunto de funcionalidades para personalizar a experiência de compra no seu website, especificamente na sua página de produto.

Configuramos o modelo de página do produto para que ele fosse exibido de maneira semelhante à antiga loja Spree. Em seguida, criamos uma barra de “adicionar ao carrinho” que permaneceria na parte inferior da exibição da página do produto. Essa era a parte fácil.

Também desenvolvemos uma ferramenta para o modelo de página de produto que permitiria aos compradores personalizar sua experiência de compra e torná-la mais realista. Além de oferecer a seus clientes a possibilidade de ver como seria uma determinada bolsa (ou outro produto) usando a funcionalidade de amostra descrita acima, a Paravel também oferece a seus clientes a possibilidade de personalizar seus produtos.

A Paravel estava interessada nos recursos de aumento de conversão de uma ferramenta realista que permitiria que seus clientes realmente vissem como seus produtos ficariam depois de personalizados, por isso criamos uma ferramenta que permite que eles façam isso.

A ferramenta que construímos para a Paravel exibia um popup com as palavras “Personalizar” quando um cliente visitava a página do produto Criamos então uma ferramenta que possibilitaria ao cliente personalizar o produto de acordo com o estilo e a cor das letras que apareceriam como monograma com suas iniciais.

Essa ferramenta é exibida como um widget na página do produto após o cliente clicar em “Personalizar” e é muito fácil de manipular e personalizar de acordo com suas preferências. Para garantir que o produto exibisse a personalização corretamente, tivemos que criar um script personalizado que exibisse com precisão as letras que o cliente havia digitado, no estilo que ele selecionou, na área certa do produto, como pode ser visto na imagem abaixo. Como nível final de funcionalidade, criamos um “Modelo de Nylon” que possibilitaria aos clientes da Paravel personalizar seus produtos com letras bordadas ao invés de letras pintadas à mão ou apliques.

Houve mais algumas personalizações que criamos para as páginas de produtos da Paravel, incluindo a implementação de quatro guias das páginas de produtos em sua antiga loja Spree via codificação HTML. Também recriamos a funcionalidade “Escolha sua própria aventura” da loja Spree da Paravel, que permite aos clientes personalizar ainda mais os produtos da Paravel com apliques e designs pintados à mão, além de algumas outras personalizações para preservar a integridade da funcionalidade original que apareceu no sua loja Spree.

Integração com aplicativos críticos

Para proteger a funcionalidade de sua nova loja Shopify Plus e garantir uma experiência de usuário suave e agradável, a 1Digital ^Ⓡ Agency teve que integrar a nova loja da Paravel com seus aplicativos essenciais aos negócios.

Entre outras coisas, os clientes da Paravel confiaram em avaliações e depoimentos que a Paravel conseguiu desenhar e exibir via YotPo, que garantimos que fosse perfeitamente integrado para eles. A Paravel também contou muito com o uso da Zaius para engajamento de clientes e CRM, então realizamos essa integração bem como a mencionada anteriormente.

Além disso, a Paravel faz uso da funcionalidade oferecida não apenas pelo RJ Metrics, mas também pelo Talkable. Esses aplicativos fornecem dados valiosos aos administradores da Paravel e permitem programas de marketing de referência seguros.

A 1Digital ^Ⓡ Agency integrou todos esses aplicativos com a nova loja da Paravel, além de codificar e desenvolver seu novo site Shopify Plus. Concluímos este projeto, de abrangência abrangente, com migração e desenvolvimento customizado avançado, sem pendências. Ou seja, o cliente não experimentou interrupções indevidas nos negócios, nenhuma perda de tráfego e mudou-se para uma loja recém-desenvolvida com funcionalidade personalizada avançada sem nenhum contratempo. Para fazer isso, é preciso experiência e processos completos, ambos integrados pelo 1Digital ^Ⓡ ao nosso fluxo de trabalho.

A Solução Completa

Alguns provedores ajustam seus serviços a um ou dois serviços altamente especializados, mas sabemos que os problemas enfrentados pelos comerciantes de comércio eletrônico são diversos. Se pudéssemos oferecer apenas serviços de desenvolvimento, não poderíamos migrar o Paravel do Spree para o Shopify Plus, que é uma das principais plataformas de comércio eletrônico para comerciantes online. Da mesma forma, se nos limitássemos a realizar migrações, não poderíamos personalizar sua nova loja da maneira que eles queriam.

Os serviços de design e desenvolvimento do Shopify Plus, mesmo quando combinados com nossos serviços de migração, são apenas uma pequena amostra do que a 1Digital ^Ⓡ Agency oferece. Além de nossos serviços de design personalizado da Shopify, também oferecemos campanhas abrangentes de marketing digital, incluindo campanhas de SEO e PPC altamente competitivas, minuciosamente pesquisadas e direcionadas.

Essa história de sucesso depende do fato de que conseguimos migrar o Paravel do Spree para uma loja Shopify Plus recém-desenvolvida com funcionalidade avançada. Muitos de nossos outros estudos de caso de comércio eletrônico se concentram em outras plataformas de comércio eletrônico, como design e desenvolvimento BigCommerce, serviços Magento semelhantes e campanhas de marketing digital. Dê uma olhada em nosso repertório, e se quiser ver como podemos resolver os problemas que seu negócio online enfrenta, ligue para 888-982-8269.

baixar PDF