Pop

Um tema minimalista, projetado para manter seu conteúdo acessível. Pop é ideal para lojas com estoques de pequeno a médio porte e projetado em torno de uma grande barra de navegação lateral que mantém o seu conteúdo facilmente acessível.

Exemplo de loja virtual usando Pop

Editor de temas

Use o editor de temas para personalizar seu tema. O conteúdo exibido na loja é definido no editor de temas, que permite adicionar e editar as seções disponíveis. Também é possível modificar a aparência e a funcionalidade da loja nas configurações do tema.

O conteúdo do tema é criado usando blocos personalizáveis de conteúdo que determinam o layout e a aparência de diferentes páginas da loja virtual e são denominados seções.

As seções estáticas aparecem em locais predeterminados da loja virtual e não podem ser removidas ou reorganizadas. São ocupadas por cabeçalhos, rodapés, seções de navegação ou seções de conteúdo em páginas como páginas de produto e páginas de coleção. Por exemplo, a seção Produto determina a aparência de cada página de produto da loja virtual.

As seções dinâmicas são opcionais e servem para personalizar a página inicial. O layout é criado com até 25 seções dinâmicas, que podem ser adicionadas, reorganizadas e removidas.

Você pode saber mais sobre a seleção exclusiva de seções de Pop e aprender a personalizá-las para se adequarem à sua empresa.

Pop inclui as seguintes seções estáticas:

  • Logo e menu
  • Barra de avisos
  • Rodapé
  • Páginas de produtos
  • Páginas de coleções
  • Página da lista de coleções
  • Artigo

Seções dinâmicas

Você pode adicionar, reorganizare removerseções dinâmicas para personalizar o layout da sua página inicial. Cada tema tem um conjunto exclusivo de seções dinâmicas para escolher.

Pop inclui as seguintes seções dinâmicas:

  • Posts do blog
  • Lista de coleções
  • Coleção em destaque
  • Imagem com texto
  • Apresentação de slides
  • Produto em destaque
  • Newsletter
  • Mapa
  • Rich text
  • Vídeo
  • HTML personalizado

Páginas de produtos

Na seção Páginas de produto, você pode adicionar ou remover os seguintes elementos:

  • A marca ou fabricante do produto
  • Zoom de imagem
  • Produtos relacionados
  • Um seletor de quantidade
  • Um botão de checkout dinâmico
  • Ícones de compartilhamento em redes sociais

Para editar as configurações das páginas de produtos:

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Seções.

  3. Clique em Páginas de produtos.

  4. Para mostrar a marca ou o fabricante do produto, marque Exibir fabricante do produto. Para uma marca ou fabricante aparecer, você precisa adicionar um fabricante ao produto.

  5. Para permitir que os clientes aumentem o zoom ao passarem o mouse sobre a imagem de um produto, marque Habilitar o zoom de imagem.

  6. Para mostrar uma seleção de produtos relacionados na parte inferior da página, marque Exibir produtos relacionados. A coleção da qual o produto faz parte determina os produtos relacionados que são exibidos. Para que produtos relacionados sejam exibidos, você precisa criar uma coleção para o produto ou adicioná-lo a uma coleção existente. Se o produto não faz parte de uma coleção, os produtos relacionados não podem ser exibidos.

  7. Para mostrar um seletor de quantidade, marque Exibir seletor de quantidade.

  8. Para mostrar um botão de checkout dinâmico, marque Exibir botão de checkout dinâmico.

  9. Para mostrar ícones de compartilhamento em redes sociais, marque Habilitar compartilhamento de produto.

  10. Clique em salvar.

Newsletter

Você pode adicionar uma assinatura de newsletter à sua página inicial. Isso permite coletar endereços de e-mail de clientes para campanhas de e-mail marketing. Saiba mais sobre e-mail marketing no blog da Shopify.

Para adicionar uma assinatura de newsletter à sua página inicial:

  1. Clique em Seções.

  2. Clique em Adicionar seção > Newsletter.

  3. Insira um título para a assinatura de newsletter no campo Título. O título padrão é "Assine nossa newsletter".

  4. Insira um subtítulo para a assinatura de newsletter no campo Subtítulo. O texto padrão é "Promoções, novos produtos e vendas. Diretamente em sua caixa de entrada."

  5. Defina a cor de fundo para a seção de assinatura de newsletter clicando na amostra Cor de fundo e escolhendo uma cor.

  6. Clique em salvar.

Vídeo

Você pode adicionar um vídeo hospedado no YouTube ou no Vimeo à sua página inicial. Os vídeos podem envolver seus clientes e gerar interesse em seus negócios.

Para adicionar um vídeo à sua página inicial:

  1. Clique em Seções.

  2. Clique em Adicionar seção > Vídeo.

  3. Insira um título para o vídeo no campo Título.

  4. Insira o link de compartilhamento para o vídeo no campo Link para o vídeo.

    Os links de compartilhamento do YouTube são como este: https://youtu.be/OTJXAUZY9t0. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do YouTube neste artigo da Ajuda do YouTube.

    Os links de compartilhamento do Vimeo são como este: https://vimeo.com/281332510. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do Vimeo neste artigo do Centro de Ajuda do Vimeo.

  5. Clique em salvar.

HTML personalizado

Na seção HTML personalizado, você pode usar o código HTML para criar conteúdo personalizado para sua página inicial. Por exemplo, você pode usar HTML para formatar blocos de texto, criar tabelas ou incorporar conteúdo de um site de terceiros.

Adicione uma seção de HTML personalizado à página inicial

  1. Clique em Adicionar seção.

  2. Clique em HTML personalizado e em Selecionar.

  3. Clique em HTML personalizado e insira o código HTML que você deseja adicionar à sua página inicial.

  4. Clique em salvar.

Utilize as configurações do tema para personalizar as cores e a tipografia em sua loja virtual. Você também pode configurar links para suas contas em redes sociais, editar as configurações do carrinho e adicionar um favicon.

Pop inclui as seguintes configurações de tema:

  • Cores
  • Tipografia
  • Favicon
  • Página do carrinho
  • Redes sociais
  • Checkout

Cores

Você pode escolher as cores para as diferentes partes de sua loja virtual.

Personalizar suas configurações de cor

  1. Clique em Configurações do tema.
  2. Clique em Cores.
  3. Para abrir o seletor de cores, clique na amostra de cor do conteúdo que você deseja alterar. A área Recém-selecionadas mostra as cores que você selecionou recentemente para o seu tema. A área Usadas no momento mostra as cores que você está usando em outras partes do seu tema.

    Para definir uma cor específica, clique no campo de texto para inserir um código hexadecimal de cor.

    Para definir a cor como transparente, exclua o valor do código hexadecimal do campo de texto.

  4. Clique em salvar.

Tipografia

Defina o estilo e o tamanho da fonte do texto da loja virtual. É possível escolher uma que seja do sistema ou uma personalizada.

Recomendamos o uso de fontes do sistema, já que baixar novas fontes no computador do cliente pode afetar negativamente a velocidade de carregamento da loja. A exibição depende do sistema operacional usado. Saiba mais sobre fontes do sistema.

Personalizar suas configurações de tipografia

  1. Clique em Configurações do tema.

  2. Clique em Tipografia.

  3. Para cada tipo de texto, clique em Alterar para usar o seletor de fontes.

  4. Acesse as fontes usando o campo de pesquisa ou clicando em Carregar mais.

    Para ver todas as opções disponíveis, consulte a biblioteca de fontes da Shopify.

  5. Clique no nome da fonte que você deseja usar.

  6. Para alterar o estilo da fonte, clique no nome do estilo atual e, em seguida, selecione um novo no menu suspenso.

  7. Clique em Selecionar.

  8. Clique em salvar.

Redes sociais

Você pode adicionar botões de compartilhamento em redes sociais a seus produtos e posts de blog, e links de suas contas de redes sociais.

Para personalizar as configurações de redes sociais:

  1. Clique em configurações do tema.

  2. Clique em Redes sociais.

  3. Para carregar uma imagem de compartilhamento em redes sociais, na área de imagem de compartilhamento em redes sociais, clique em Selecionar imagem ou Acessar imagens gratuitas.

  4. Para adicionar links às suas contas de redes sociais, na área Contas de redes sociais, insira os links das contas nos campos fornecidos. Insira os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

    Os links para suas contas de redes sociais são exibidos no rodapé de sua loja virtual.

  5. Para adicionar botões de compartilhamento em redes sociais aos seus produtos e postagens de blog, na área Opções de compartilhamento em redes sociais, marque uma ou todas as caixas de seleção.

    Você pode adicionar os seguintes botões de compartilhamento:

- Compartilhar no Facebook - Publicar tuíte no Twitter - Fixar no Pinterest (indisponível para compartilhamento em posts do blog)

  1. Clique em salvar.

Adicione menus secundários à barra lateral

Para adicionar menus suspensos ao Menu principal, crie menus na sua página de Navegação. Saiba como neste artigo.

Tamanho de logo ideal para a loja

Um logo compacto, mas proporcional, é a melhor opção para o tema Pop, já que o logo é exibido em uma barra lateral. Logos semelhantes a banners, com a largura bem maior que a altura, não ficarão bem neste tema.

O seu logo deve ter uma largura máxima de 450 pixels e altura máxima de 200 pixels. O arquivo enviado será redimensionado para se encaixar nessas restrições.

O formato de arquivo ideal é PNG.

Reduza o espaço em branco ao redor do logo na barra lateral

Antes de remover qualquer preenchimento adicionado pelo tema Pop acima e abaixo do seu logo, é extremamente importante aparar qualquer preenchimento que possa vir da própria imagem. Corte o espaço negativo ou os pixels transparentes ao redor do gráfico do logo antes de carregar o arquivo na Shopify.

Veja o exemplo de um logo com muito espaço negativo ao redor:

Agora, veja o mesmo logo aparado — com todo o espaço negativo removido:

Veja como fica o logo que não foi quando usado no tema Pop:

Agora, veja logo aparado quando usado no tema Pop:

Após carregar o logo aparado nos recursos do tema, você pode ajustar a largura da barra lateral no editor de temas. Na seção Cabeçalho e Navegação, edite o valor em "Tamanho > Largura do menu do Desktop" como desejar.

Esta medida não recebe assistência, mas se você deseja reduzir o preenchimento acima e abaixo do seu logo, siga estas etapas:

  1. Em Ativos, clique em timber.scss.liquid para abrir a folha de estilo do seu tema no editor de códigos online, ou acesse este URL.

  2. Na parte inferior do arquivo, adicione o seguinte:

```sass {% comment %} The following media query function produces this: @media screen and (min-width: 1025px) { ... } Sidebar is only shown when width > 1025 pixels. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Salve o arquivo.

Edite as configurações da página do produto

Na seção Páginas de produto, você pode adicionar ou remover os seguintes elementos:

  • A marca ou fabricante do produto
  • Zoom de imagem
  • Produtos relacionados
  • Um seletor de quantidade
  • Um botão de checkout dinâmico
  • Ícones de compartilhamento em redes sociais

Para editar as configurações das páginas de produtos:

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Seções.

  3. Clique em Páginas de produtos.

  4. Para mostrar a marca ou o fabricante do produto, marque Exibir fabricante do produto. Para uma marca ou fabricante aparecer, você precisa adicionar um fabricante ao produto.

  5. Para permitir que os clientes aumentem o zoom ao passarem o mouse sobre a imagem de um produto, marque Habilitar o zoom de imagem.

  6. Para mostrar uma seleção de produtos relacionados na parte inferior da página, marque Exibir produtos relacionados. A coleção à qual o produto pertence determina os produtos relacionados que são exibidos. Para que produtos relacionados sejam exibidos, você precisa criar uma coleção para o produto ou adicioná-lo a uma coleção existente. Se o produto não fizer parte de uma coleção, nenhum produto relacionado será exibido.

  7. Para mostrar um seletor de quantidade, marque Exibir seletor de quantidade.

  8. Para mostrar um botão de checkout dinâmico, marque Exibir botão de checkout dinâmico.

  9. Para mostrar ícones de compartilhamento em redes sociais, marque Habilitar compartilhamento de produto.

  10. Clique em salvar.

Melhor tipo de imagem de produto para o Pop

Fotos de alta resolução terão uma aparência mais sofisticada e profissional no tema Pop, portanto as imagens devem ter, no mínimo, 1024 x 1024 pixels. As imagens são reduzidas automaticamente quando necessário, então quanto maior a qualidade, melhor.

Fotos de alta resolução são especialmente importantes para a função Zoom da imagem, que pode ser habilitada no editor de temas, na seção Páginas de produtos.

O idela é que as imagens de seus produtos em destaque tenham a mesma proporção entre largura e altura para que tenham a melhor aparência possível nas páginas das coleções.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça