Tudo o que você precisa saber sobre Shopify 2.0 (e o que fazer)

Se você é proprietário de uma empresa ou profissional de marketing, está pensando em usar Shopify para criar sua loja de comércio eletrônico, preste muita atenção a este artigo.

Estamos prestes a falar sobre Shopify 2.0 — incluindo o que há de novo, por que é bom e o que você precisa fazer para aproveitar a atualização.

Portanto, se você está apenas começando e fazendo sua pesquisa ou já é um usuário da Shopify considerando uma atualização, continue lendo para saber tudo o que precisa saber.

O que é abordado neste post:

• Uma breve visão geral da Shopify Store
• O que é Shopify 2.0 e quais são os novos recursos?
• Qual é a nova arquitetura do tema?
• O que os desenvolvedores precisam saber?
• Como configurar sua loja no Shopify 2.0
• O que você deve fazer se sua loja foi criada na Shopify 1.0?
• Você precisa atualizar sua Shopify Store para 2.0?

1. Uma breve visão geral da loja da Shopify

Fonte: Apresentando a Loja Online 2.0: O que isso significa para os desenvolvedores

Se você está aqui, ou já possui uma loja Shopify ou está pensando em adquirir uma. E se for o último, você pode estar se perguntando se uma loja online do Shopify é a plataforma certa para você.

Se for esse o caso, você pode estar interessado em ler nosso artigo “Shopify vs WooCommerce – Qual é o melhor para você”.

Havia 457 milhões de compradores no Shopify em 2020 – acima dos 218 milhões em 2018 (Fonte: Shopify).

Aqui na Exposure Ninja, adoramos trabalhar com Shopify. É o ajuste certo para você, se você é uma empresa de comércio eletrônico que procura uma loja on-line fácil de usar e com bastante suporte.

Seus ótimos recursos permitem acompanhar as vendas, criar relatórios de receita e gerar pedidos de compra.

A loja original do Shopify veio carregada com 70 temas personalizados plug-and-play, tornando mais fácil para qualquer pessoa configurar sua loja online em menos de 15 minutos.

Editar temas e criar páginas personalizadas nem sempre foi simples, mas a loja online 2.0 do Shopify espera mudar isso. Os lojistas da Shopify agora podem esperar uma loja online muito mais flexível com um editor de temas e extensões de aplicativos de temas incluídos.

2. O que é Shopify 2.0 e quais são os novos recursos?

Shopify loja online 2.0 é uma grande atualização para a plataforma de loja online da Shopify.

Lançada em junho de 2021, a loja online 2.0 atualizada passou por uma mudança significativa para Shopify em um espaço mais personalizável e que muitos desenvolvedores podem receber.

De olho na experiência do usuário, Shopify não se esqueceu de seus muitos usuários que usam a plataforma, graças à sua facilidade de uso. As mudanças, asseguram-nos, são “mais fáceis e flexíveis”.

Então, quais são os principais novos recursos?

• As “seções” agora estão disponíveis em todas as páginas, não apenas limitadas à página inicial
• Eles introduziram extensões de aplicativos temáticos
• Os blocos de aplicativos agora estão disponíveis por meio da interface do editor de temas
• Adicionar recursos às suas extensões de aplicativo de tema
• Melhorias nos metacampos
• O seletor de arquivos suporta arquivos de imagem
• Uma nova API de arquivos
• Aprimoramentos do editor de temas
• Configuração de entrada de líquido.

A atualização inclui um novo tema de referência chamado “ Dawn ” que é 35% mais rápido que o tema padrão anterior, Debut. A loja online Shopify 2.0 também está aberta a envios de temas de desenvolvedores e possui opções de personalização e suporte aprimorados.

Se você está olhando a lista de novos recursos e se perguntando o que isso significa, fique conosco. Vamos guiá-lo através de tudo o que você precisa saber sobre a loja online 2.0.

Não contrate uma agência de web design antes de ler este e-book

Baixe este e-book

3. Qual é a nova arquitetura temática?

A arquitetura do tema pode soar como um jargão, mas em termos simples, refere-se a como o editor está estruturado.

A loja online da Shopify 2.0 possui um editor de temas atualizado, o que é uma boa notícia por dois motivos:

1. É mais fácil para quem não é desenvolvedor personalizar todas as páginas
2. É mais fácil para os desenvolvedores criarem temas personalizados e integrações.

Sete novos recursos foram adicionados à loja online 2.0. Aqui veremos cada um com um pouco mais de detalhes.

Os modelos de página agora têm seções

As seções são os componentes visuais de uma página em seu site, por exemplo, um banner, um bloco de imagem com texto ou um botão.

Na versão anterior do Shopify, apenas a página inicial permitia adicionar novas seções e arrastar e soltar onde você queria na sua página.

Foi possível personalizar suas seções em outras páginas, mas não sem a ajuda de um desenvolvedor.

Agora, os comerciantes podem personalizar qualquer página em seu site, incluindo páginas de produtos, para que sua loja online pareça totalmente personalizada para seus negócios.

Como eles funcionam?

• Cada página agora pode ser renderizada usando arquivos de modelo JSON
• Você pode configurar vários arquivos de modelo que mapeiam para diferentes produtos
• Os comerciantes podem ter diferentes páginas de produtos, páginas de coleção e outras páginas na mesma loja
• Os comerciantes podem definir as seções e a ordem em que as seções devem aparecer por padrão quando o tema for instalado
• Seções dinâmicas agora podem ser adicionadas à página inicial.

Extensões de aplicativos temáticos com blocos de aplicativos

Na loja online anterior do Shopify, não havia como os aplicativos se integrarem ao editor de temas. Um comerciante precisaria empregar um desenvolvedor para codificar a integração com temas existentes. Isso pode causar quebras no código do tema, dificultando a realização de integrações entre os temas.

Com a loja online 2.0, uma extensão de aplicativo de tema permite que os desenvolvedores adicionem recursos e extensões. Graças a isso, agora você pode adicionar funcionalidades adicionais às suas lojas da Shopify.

Modularidade de aplicativo integrada

Os blocos de aplicativos permitem que os desenvolvedores criem componentes para adicionar a um editor de temas sem codificar a integração.

O que isso significa para você como comerciante? Simplificando, se você quiser alterar seu tema, mas levar um aplicativo integral com você, isso é muito mais fácil e significa que um desenvolvedor não precisará reconstruir toda a integração. Também facilita muito a remoção de um aplicativo, com todos os códigos fantasmas removidos em uma desinstalação.

Alterações nos metacampos

Um metacampo é o espaço para você adicionar dados informativos sobre um determinado ativo em seu site. Pode ser uma imagem, lista, gráfico ou download.

Este novo editor de temas permite adicionar metacampos e propriedades sem usar APIs ou código. Isso não é possível com a funcionalidade anterior nas ferramentas de edição nativas da Shopify.

Os metacampos foram reformulados desde o início para serem mais flexíveis e intuitivos. Agora, você pode criar campos personalizados para atender às suas necessidades em minutos com o sistema de tipo avançado da loja online 2.0. Metacampos padrão foram introduzidos para que todos os temas funcionem imediatamente nas lojas em diferentes verticais de mercado - sem necessidade de codificação extra ou instalação de plugins.

Seletor de arquivos

O seletor de arquivos de metacampo facilita o upload e a seleção de mídia nas páginas do produto. Todas as suas imagens salvas na seção Configurações/Arquivos ficam imediatamente disponíveis para uso com este novo recurso.

Os metacampos funcionam com muitas fontes de mídia, como imagens ou arquivos PDF.

Por exemplo, em vez de codificar tipos de arquivos específicos para a área de conteúdo do construtor de páginas de cada tema, os metacampos permitem que você carregue o item selecionado do seu telefone e o faça aparecer imediatamente nas páginas do produto - sem necessidade de voltar às configurações.

API de arquivo

A atualização da loja online 2.0 para a API de arquivos fornece aos comerciantes novas funcionalidades e uma interface simplificada para upload de arquivos.

Com esta versão, os desenvolvedores podem criar, escolher e fazer upload de mídia em suas lojas da Shopify por meio de um console GraphQL fácil de usar dentro do painel de administração da Shopify.

Além disso, a API agora permite o acesso de vários aplicativos para usar o espaço para arquivos não relacionados diretamente a um determinado produto.

Configurações de entrada de líquido

As configurações de entrada do Liquid permitem que os comerciantes adicionem o código Liquid personalizado às páginas diretamente do editor com uma nova configuração semelhante à HTML. Isso significa que você terá acesso a variáveis ​​globais e objetos específicos do modelo, reduzindo a necessidade de alterar o código do tema manualmente.

Esse código Liquid personalizado facilita o trabalho dos lojistas da Shopify com a nova loja online 2.0 sem interferir no código do seu tema ou envolver demais os desenvolvedores de aplicativos.

Chegue ao topo do Google de graça

Baixe uma cópia gratuita do nosso livro mais vendido,

" Como chegar ao topo do Google "

Baixe Minha Cópia Gratuita

4. O que os desenvolvedores precisam saber?

Se você é um comerciante e está apenas procurando saber os motivos básicos pelos quais deve mudar para Shopify 2.0, o editor de temas atualizado deve ser motivo suficiente.

Mas Shopify incluiu algumas novas ferramentas de desenvolvedor como parte da loja online renovada. Vamos falar sobre isso brevemente aqui.

Integração do GitHub

A integração Shopify GitHub permite que os desenvolvedores se conectem facilmente à sua conta de usuário do GitHub com apenas alguns cliques.

A integração entre os temas e o GitHub permitirá que os desenvolvedores trabalhem com mais eficiência ao fazer alterações. Os desenvolvedores agora podem implementar o fluxo de trabalho onde precisam de aprovação antes de preencher os sites ativos com suas atualizações. Isso agora funciona em uma plataforma, economizando tempo ao preencher um tema ao vivo.

Ferramenta CLI da Shopify

Anteriormente, os desenvolvedores podem ter usado a CLI para gerar aplicativos Node.js, Ruby on Rails e extensões de aplicativo. A loja online 2.0 da Shopify permite que eles usem a CLI para atualizar temas de desenvolvimento.

Os temas de desenvolvimento estão ocultos na parte do Shopify Admin da loja, permitindo que os desenvolvedores trabalhem neles. Esses temas de desenvolvimento não contam para o limite do seu tema, mas Shopify ‌exclui-os automaticamente se eles virem inatividade nos temas de desenvolvimento após sete dias.

A nova ferramenta CLI dará a você ou ao seu desenvolvedor controle sobre o desenvolvimento do tema, a edição de temas e a aparência do seu novo tema. Dentro do seu novo projeto de tema, você poderá visualizar todas as alterações que estão acontecendo ao vivo, interagir e personalizá-las usando o editor.

Verificação de Tema

Entre as novas ferramentas para desenvolvedores está o Theme Check — um servidor de linguagem que se integra a um editor de texto para identificar problemas no código para o desenvolvimento eficiente de novos temas.

Ele é fornecido com a ferramenta Shopify CLI, portanto, um desenvolvedor deve instalá-los juntos. Ele foi projetado cuidadosamente, com mensagens de erro, incluindo um link para a documentação da verificação com falha.

Alvorecer

Fonte: Apresentando a Loja Online 2.0: O que isso significa para os desenvolvedores

Dawn é o novo tema de referência que vem como padrão com a nova loja online Shopify 2.0. O tema padrão anterior era Debut, e Dawn é notavelmente mais rápido, mais flexível e mais simplificado que seu antecessor, tornando o processo de desenvolvimento muito mais suave.

Dawn já possui templates JSON para todas as suas páginas, então pode ser usado como modelo ao desbloquear seções dentro de um novo tema.

Sua velocidade se deve ao fato de ser construído com o mínimo de Javascript, então Shopify incentiva os desenvolvedores a aproveitar a funcionalidade nativa do navegador para renderizar layouts HTML e CSS.

5. Como configurar sua loja na Shopify 2.0

A configuração de uma loja na Shopify 2.0 é igual à versão anterior da Shopify. É rápido e fácil de fazer, mas antes de começar, você deve ter pensado no seguinte:

• Qual é o nome do seu negócio? Ser-lhe-á pedido imediatamente o nome da sua loja, e é impossível alterá-lo, por isso certifique-se de que escolhe com cuidado. No entanto, você poderá alterar isso para um domínio escolhido posteriormente.
• Cores da marca, fontes e um logotipo. Você selecionará um tema da loja de temas da Shopify, mas provavelmente desejará substituir determinados componentes do tema pela sua marca.
• Imagens e descrições dos produtos que você deseja vender, incluindo UPCs, variantes, detalhes de envio e, claro, o preço.
• Como você gostaria que os usuários fizessem pagamentos.
  • Shopify permite a maioria das opções, incluindo Paypal, Visa, Mastercard, AMEX, Apple Pay, Amazon Pay e Google Pay.
• A estrutura do site; quais páginas você gostaria de incluir e a cópia que gostaria de ter nelas. Você precisará saber disso quando for configurar sua navegação e suas novas páginas.
• Elementos adicionais como metadados e elementos de SEO que você gostaria de incluir em suas páginas.

Para obter um guia completo sobre como configurar sua loja Shopify de uma maneira que tenha SEO em mente, ouça nosso podcast, Shopify SEO for Beginners ou assista ao vídeo abaixo.

O que você deve fazer se sua loja foi criada no Shopify 1.0?

Se você já possui uma loja virtual da Shopify e deseja atualizar para a Shopify 2.0, há três maneiras disponíveis:

Visite a loja de temas da Shopify e baixe um dos novos temas da Shopify.

Verifique se o seu tema existente oferece uma versão atualizada usando a loja online 2.0.

Migre seus modelos de tema atuais para a nova arquitetura.

1. Baixe um novo tema

1. Visite a loja temática da Shopify.
2. Filtre por “Arquitetura de Tema”.
3. Selecione “Loja Online 2.0”.
4. Escolha o seu tema preferido e clique em “Experimentar Tema”.
5. Você só precisa pagar se publicar o tema em seu site da Shopify.

2. Atualize seu tema atual

1. Visite a loja temática da Shopify e filtre por “Online Store 2.0” como acima. Se o seu tema estiver disponível para atualização, você deverá vê-lo lá.
2. Como alternativa, você deve receber uma notificação em seu Shopify Admin (abaixo de onde informa seu tema).
3. Clique na notificação e em “Adicionar à Biblioteca de Temas”.
4. Quaisquer personalizações feitas em seu tema usando o Editor de Temas são copiadas e aplicadas ao tema atualizado. Esses incluem:
5. Configurações de tema modificadas
6. Layouts de página modificados, como adicionar, reordenar, remover ou ocultar seções ou blocos
7. Novos modelos
8. Configurações adicionadas, removidas ou modificadas de incorporações de aplicativos ou extensões de aplicativos.

3. Migre seu modelo de tema

Este é um processo demorado e não recomendamos, a menos que você seja um desenvolvedor.

1. Use a ferramenta CLI da Shopify ou o editor de código. Pode ser necessário instalar o CLI.
2. Certifique-se de estar conectado como colaborador ou como “funcionário” da conta na qual deseja trabalhar.
3. Faça uma cópia do seu tema.
4. Converta seu código de tema atual de uma configuração de entrada Liquid em um modelo JSON.
5. Mova qualquer código Liquid ou HTML para seções a serem usadas em seu novo modelo JSON.
6. Você pode ler o processo completo aqui em Shopify.dev.

Você precisa atualizar sua loja Shopify para 2.0?

A resposta curta para isso é não .

Shopify ainda oferece muitos temas compatíveis com a versão original.

No entanto, se você é proprietário de uma loja e procura personalização adicional, novos modelos de página e páginas personalizadas, mudar para 2.0 pode ser uma boa opção para você.

O conselho mais recente da Shopify é que, se você planeja usar aplicativos, tente usar extensões de aplicativo para integrar-se à sua loja online. Isso é verdade se você estiver enviando um novo aplicativo porque eles devem usar extensões de tema para integrar. Shopify planeja tornar isso um requisito para todos os aplicativos no futuro.

Shopify proprietário da empresa? Você pode gostar de ler nosso blog sobre Como criar uma estratégia de marketing vencedora da Shopify.

O que ler a seguir

• As melhores plataformas de comércio eletrônico para usar
• Shopify vs WooCommerce – Qual é o melhor para você?
• Como criar uma estratégia de marketing vencedora da Shopify
• Um guia de PPC para lojas de comércio eletrônico da Shopify
• 11 coisas que você precisa saber antes de escolher uma agência de web design
• 6 maneiras de aumentar as vendas da sua loja de comércio eletrônico