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

Seções As seções são blocos personalizáveis de conteúdo que determinam o layout de sua loja virtual. Cada tema inclui seções estáticas e seções dinâmicas. ### Seções estáticas As seções estáticas estão sempre em locais específicos na sua loja virtual. Você pode editar seções estáticas, mas não pode reorganizá-las ou removê-las. Cada tipo de página na sua loja virtual inclui diferentes seções estáticas.

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

  • Logo e menu
  • Barra de anúncio
  • 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, reorganizar e remover seçõ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 fornecedor do produto
  • Zoom de imagem
  • Produtos relacionados
  • Um seletor de quantidade
  • Um botão de checkout dinâmico
  • Ícones de compartilhamento social

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 fornecedor do produto, marque Exibir fornecedor do produto. Para uma marca ou fornecedor aparecer, você precisa adicionar um fornecedor ao produto.

  5. Para permitir que os clientes aumentem o zoom ao passarem o mouse sobre a imagem de um produto, marque Ativar 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 Mostrar botão de checkout dinâmico.

  9. Para mostrar ícones de compartilhamento social, marque Ativar 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 marketing por e-mail. Saiba mais sobre marketing por e-mail no blog da Shopify.

A seção de newsletter em um site. Há um campo para os clientes inserirem um endereço de e-mail e um botão que diz

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

  1. Encontre Pop e clique em Personalizar.

  2. Clique em Seções.

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

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

  5. 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."

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

  7. 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. Encontre Pop e clique em Personalizar.

  2. Clique em Seções.

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

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

  5. 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.

  6. 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.

Para adicionar HTML personalizado à sua página inicial:

  1. Encontre Pop e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Adicionar seção.

  4. Na área Layout avançado , clique em HTML personalizado > Adicionar.

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

  6. Clique em Salvar.

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. Para personalizar as cores:

  1. Encontre Pop e clique em Personalizar.
    1. Clique em Configurações do tema. 2. Clique em Cores. 3. Para cada tipo de conteúdo, clique na amostra de cores para usar o seletor de cores:
      O seletor de cores no editor de temas
      - A área Selecionados recentemente mostra as cores que você selecionou recentemente para o seu tema. - A área Usando atualmente mostra as cores que você está usando atualmente em outras partes do seu tema. Para definir a cor como transparente, clique em Nenhuma. 4. Clique em Salvar.

Tipografia

Você pode escolher a tipografia para o texto em sua loja virtual.

Etapas:

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Tipografia.

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

    O botão 'Alterar' no seletor de fontes

  5. Explore as fontes usando o campo de pesquisa ou clicando em Carregar mais.

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

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

  7. Para alterar a fonte para um estilo diferente, como negrito ou itálico, clique em Regular. Em seguida, clique no estilo que você deseja usar e, em seguida, clique em Selecionar :

    Uma seleção de pesos de fonte disponíveis no seletor de fontes

  8. Clique em Salvar.

Redes sociais

Você pode adicionar botões de compartilhamento social para seus produtos e postagens de blog e links para suas contas de mídias sociais.

Para personalizar as configurações de mídias sociais:

  1. Encontre Pop e clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Redes sociais.

  4. Para enviar uma imagem de compartilhamento social, na área de imagem de compartilhamento social , clique em Selecionar imagem ou Explorar imagens gratuitas.

  5. Para adicionar links às suas contas de mídias sociais, na área Contas sociais , insira os links para suas contas nos campos fornecidos. Insira os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

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

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

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

- Compartilhar no Facebook - Tweetar - Fixar no Pinterest (não disponível para postagem no blog)

  1. Clique em Salvar.

Obs.: Para mostrar botões de compartilhamento social em páginas de produtos e postagens de blog, você também precisa ativar os botões nas seções dessas páginas.

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 logotipo ideal para a loja

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

O seu logotipo 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.

Torne seu logotipo maior em dispositivos móveis

Para tornar seu logotipo maior em qualquer layout, é extremamente importante aparar todo o espaço negativo, ou pixels transparentes, ao redor do gráfico do logotipo antes de fazer o upload do arquivo para a Shopify.

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

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

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

Agora, veja logotipo aparado quando usado no tema Pop:

Once you know that your logo is not made any smaller because of the negative space it contains, you can adjust the height of your mobile header to give your logo room to expand. As a result, your logo will become larger.

Head over to the theme editor and, in the Header & Navigation section, increase the "Sizing > Mobile Menu Height" value.

Deixe seu logotipo maior na barra lateral

Para tornar seu logotipo maior em qualquer layout, é extremamente importante aparar todo o espaço negativo, ou pixels transparentes, ao redor do gráfico do logotipo antes de fazer o upload do arquivo para a Shopify.

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

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

Veja como fica o logotipo com espaço negativo quando usado no tema Pop:

Agora, veja logotipo aparado quando usado no tema Pop:

Quando tiver certeza de que seu logotipo não ficará menor do que o necessário por conta do espaço negativo, poderá ajustar a largura da sua barra lateral para que seu logotipo possa expandir. Assim, o logotipo ficará maior.

Acesse o editor de temas e, na seção Cabeçalho Navegação , aumente o valor em "Tamanho > Largura do menu do Desktop".

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

Antes de remover qualquer preenchimento adicionado pelo tema Pop acima e abaixo do seu logotipo, é 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 logotipo antes de fazer o upload do arquivo na Shopify.

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

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

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

Agora, veja logotipo aparado quando usado no tema Pop:

Após fazer o upload do logotipo 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 logotipo, siga estas etapas:

  1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

  3. 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 fornecedor do produto
  • Zoom de imagem
  • Produtos relacionados
  • Um seletor de quantidade
  • Um botão de checkout dinâmico
  • Ícones de compartilhamento social

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 fornecedor do produto, marque Exibir fornecedor do produto. Para uma marca ou fornecedor aparecer, você precisa adicionar um fornecedor ao produto.

  5. Para permitir que os clientes aumentem o zoom ao passarem o mouse sobre a imagem de um produto, marque Ativar 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 Mostrar botão de checkout dinâmico.

  9. Para mostrar ícones de compartilhamento social, marque Ativar 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 ativada 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.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça