Pop

Esta página foi impressa em Jul 27, 2024. Para a versão atual, visite https://help.shopify.com/pt-PT/manual/using-themes/themes-by-shopify/pop.

Um tema minimalista, concebido para manter o seu conteúdo acessível. O tema Pop é ideal para lojas com inventários de pequena a média dimensão; foi concebido em torno de uma navegação em barra lateral grande que mantém o seu conteúdo facilmente acessível.

Exemplo de loja online com o tema Pop

Obter Pop da Loja de temas da Shopify:

Nesta página

Editor de temas

Utilize o editor de temas para personalizar o seu tema. A barra de ferramentas do editor de temas é dividida em Secções e Definições do tema.

A barra de ferramentas do editor de temas mostrando as definições do Tema e Secções

Pode utilizar secções para modificar o conteúdo e o esquema das diferentes páginas da sua loja. Pode utilizar as definições do tema para personalizar os tipos de letra e cores da sua loja e fazer alterações nas suas ligações para as redes sociais e nas definições de finalização da compra.

Secções Definições de tema Sugestões

Theme content is built using sections. Sections are customizable blocks of content that determine the layout and appearance of different pages on your online store. You can add, remove, edit, and customize sections using the updated theme editor.

Shopify's themes have the following types of sections:

  • Static sections: Sections that appear in predetermined locations in your online store. These sections can't be removed or rearranged. Static sections might include headers, footers, navigation sections, or content sections on pages like product pages and collection pages. For example, the Product section determines the appearance of each product page on your online store.
  • Dynamic sections: Optional sections that you can use to customize the layout of your home page. On your store's home page, you can add, rearrange, and remove dynamic sections to create the page layout. You can have up to 25 dynamic sections on your home page.

You can learn about your theme's unique selection of sections and how to customize them to suit your business.

Sugestão Se utilizar um tema livre da Shopify, pode ver descrições detalhadas das suas secções e definições ao marcar Temas livres da Shopify e clicar no nome do seu tema.

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

  • Logótipo e menu
  • Barra de comunicado
  • Rodapé
  • Páginas de produtos
  • Páginas de Coleções
  • Página da lista de coleções
  • Artigo

Secções dinâmicas

Pode adicionar, reorganizar e remover secções dinâmicas para personalizar o esquema da sua página inicial. Cada tema tem um conjunto único de secções dinâmicas para escolher.

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

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

Páginas de produtos

Na secção Página de produto, 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 dinâmico de finalização da compra
  • Ícones de partilha nas redes sociais

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

  1. A partir do menu pendente da barra superior, selecione Páginas de produtos.

  2. Clique em Secções.

  3. Clique em Página de produtos.

  4. Para mostrar a marca do produto ou o fornecedor, marque Mostrar fornecedor do produto. Para que uma marca ou fornecedor sejam apresentados deverá adicionar um fornecedor ao produto.

  5. Para permitir que os clientes aumentem o zoom passando o rato sobre a imagem de um produto, marque Ativar zoom da imagem.

  6. Para mostrar uma seleção de produtos relacionados no fundo da página, marque Mostrar produtos relacionados. A coleção à qual o produto pertence determina os produtos relacionados que são apresentados. Para que sejam apresentados produtos relacionados, deverá criar uma coleção para o produto ou adicioná-la a uma coleção existente. Se o produto não fizer parte de uma coleção, não será apresentado nenhum produto relacionado.

  7. Para apresentar um seletor de quantidade, marque Mostrar seletor de quantidade.

  8. Para mostrar um botão dinâmico de finalização da compra, marque Mostrar botão dinâmico de finalização da compra.

  9. Para mostrar ícones de partilha nas redes sociais, marque Ativar partilha de produtos.

  10. Clique em Guardar.

Newsletter

Pode adicionar um registo na newsletter na sua página inicial. Isto permite-lhe recolher endereços de e-mail de clientes para campanhas de marketing por e-mail. Pode saber mais sobre marketing por e-mail no blogue da Shopify.

A secção de newsletter num website. Existe um campo para os clientes introduzirem um endereço de e-mail e um botão com o texto

Para adicionar um registo na newsletter na sua página inicial:

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Encontrar Pop e clicar em Personalizar.

  2. Clique em Secções.

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

  4. Introduza um título para o seu registo na newsletter no campo Título. O título predefinido é "Subscreva a nossa newsletter".

  5. Introduza um subtítulo para o seu registo na newsletter no campo Subtexto. O texto predefinido é "Promoções, novos produtos e vendas. Diretamente na sua caixa de entrada."

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

  7. Clique em Guardar.

Vídeo

Pode adicionar um vídeo alojado no YouTube ou Vimeo à sua página inicial. Os vídeos cativam os clientes e geram interesse no seu negócio.

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

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Encontrar Pop e clicar em Personalizar.

  2. Clique em Secções.

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

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

  5. Introduza a ligação de partilha para o seu vídeo no campo Ligação de vídeo.

    É este o aspeto de uma ligação de partilha do YouTube: https://youtu.be/OTJXAUZY9t0. Pode aprender como copiar uma ligação de partilha de um vídeo do YouTube neste artigo de Ajuda do YouTube.

    É este o aspeto de uma ligação de partilha do Vimeo: https://vimeo.com/281332510. Pode aprender como copiar uma ligação de partilha de um vídeo do Vimeo neste artigo do Centro de ajuda do Vimeo.

  6. Clique em Guardar.

HTML personalizado

Na secção HTML personalizado, pode utilizar código HTML para criar conteúdos personalizados para a sua página inicial. Por exemplo, pode utilizar HTML para formatar blocos de texto, criar tabelas ou incorporar conteúdos a partir de um website de terceiros.

Para adicionar HTML personalizado na sua página inicial:

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Encontrar Pop e clicar em Personalizar.

  2. Clique em Secções.

  3. Clique em Adicionar secção.

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

  5. Clique em HTML personalizado e introduza o código HTML que pretende adicionar à sua página inicial.

  6. Clique em Guardar.

Pode utilizar definições do tema para personalizar as cores e a tipografia na sua loja online. Também pode configurar ligações para as suas contas de redes sociais, editar as suas configurações do carrinho e adicionar um favicon.

Pop inclui as seguintes definições de tema:

  • Cores
  • Tipografia
  • Favicon
  • Página do carrinho
  • Redes sociais
  • Finalização da compra

Cores

Pode escolher as cores das diferentes partes da sua loja online.

Personalizar as suas definições de cores

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Junto a **, clique em **Personalizar.

  2. Clique em Definições do tema.

  3. Clique em Cores.

  4. Para cada tipo de conteúdo, clique na paleta de cores para utilizar o seletor de cores:

    O seletor de cores no editor de temas

- A área Selecionado recentemente mostra as cores que selecionou recentemente para o seu tema. - A área Utilizado atualmente mostra as cores que está a utilizar atualmente noutras partes do seu tema.

Para definir a cor para transparente, clique em Nenhuma.

  1. Clique em Guardar.

Tipografia

Pode definir o tamanho e o estilo do tipo de letra para o texto na sua loja online.

Personalizar as suas definições de tipografia

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Junto a **, clique em **Personalizar.

  2. Clique em Definições do tema.

  3. Clique em Tipografia.

  4. Para cada tipo de texto, clique em Alterar para utilizar o seletor de tipo de letra:

    O botão

  5. Explore os tipos de letra utilizando o campo de pesquisa, ou clicando em Carregar mais.

    Para ver todos os tipos de letra disponíveis, consulte a biblioteca de tipos de letra da Shopify.

  6. Clique no nome do tipo de letra que pretende utilizar.

  7. Para alterar o estilo do tipo de letra, como negrito ou itálico, clique em Regular. De seguida, clique no estilo que pretende utilizar e, de seguida, clique em Selecionar:

    Uma seleção de espessuras de tipo de letra disponíveis no seletor de tipo de letra

  8. Clique em Guardar.

Redes sociais

Pode adicionar botões de partilha nas redes sociais para os seus produtos e publicações no blogue, bem como ligações para as suas contas nas redes sociais.

Para personalizar as definições de redes sociais:

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.
  1. A partir da aplicação da Shopify, toque em Loja.
  2. Na secção Canais de vendas, toque em Loja online.
  3. Toque em Gerir temas.

  1. Encontrar Pop e clicar em Personalizar.

  2. Clique em Definições do tema.

  3. Clique em Redes sociais.

  4. Para carregar uma imagem de partilha nas redes sociais, na área Imagem de partilha nas redes sociais, clique em Selecionar imagem ou Explorar imagens grátis.

  5. Para adicionar ligações para as suas contas das redes sociais, na área Contas de redes sociais, introduza as ligações para as suas contas nos campos fornecidos. Introduza ligações completas, tais como https://instagram.com/shopify ou https://twitter.com/shopify.

    As ligações para as suas contas nas redes sociais são apresentadas no rodapé da sua loja online.

  6. Para adicionar botões de partilha nas redes sociais aos seus produtos e publicações no blogue, na área Opções de partilha nas redes sociais, marque as respetivas caixas de verificação.

    Pode adicionar os seguintes botões de partilha:

- Partilhe no Facebook - Tuíte no Twitter - Adicionar no Pinterest (não disponível para partilha de publicações no blogue)

  1. Clique em Guardar.

Adicionar submenus à barra lateral

Para adicionar menus pendentes ao seu Menu principal, deverá criar menus na sua página de Navegação. Este artigo explicará o funcionamento do processo.

Tamanho ideal do logótipo da loja

Um logótipo proporcionalmente compacto ficará melhor no tema Pop, uma vez que mostra o seu logótipo numa barra lateral. Os logótipos semelhantes a faixas, com uma largura grande e uma altura relativamente pequena, não ficarão bem nesse tema.

A largura máxima do seu logótipo é de 450 píxeis e a altura máxima é de 200 píxeis. O ficheiro do logótipo carregado será redimensionado para se encaixar dentro destas restrições.

O formato ideal é PNG.

Torne seu logótipo maior em dispositivos móveis

Em primeiro lugar, para tornar o seu logótipo maior em qualquer esquema, é extremamente importante cortar todo o espaço negativo ou píxeis transparentes que envolvem o seu logótipo antes de carregar o respetivo ficheiro para a Shopify.

Aqui está um logótipo com muito espaço negativo em seu redor:

Aqui está o mesmo logótipo depois de cortado — quando todo o seu espaço negativo foi cortado:

O logótipo que não foi cortado é apresentado abaixo quando utilizado no tema Pop:

O logótipo que foi cortado é apresentado abaixo quando utilizado no tema Pop:

Quando concluir que o seu logótipo não pode ser mais pequeno devido ao espaço negativo que contém, pode ajustar a altura do cabeçalho do dispositivo móvel para que o seu logótipo tenha espaço para se expandir. Como resultado, o seu logótipo ficará maior.

Aceda ao editor de temas e, na secção Cabeçalho e navegação, aumente o valor de "Dimensionamento > Altura do menu em dispositivo móvel".

Torne o seu logótipo maior na barra lateral

Em primeiro lugar, para tornar o seu logótipo maior em qualquer esquema, é extremamente importante cortar todo o espaço negativo ou píxeis transparentes que envolvem o seu logótipo antes de carregar o respetivo ficheiro para a Shopify.

Aqui está um logótipo com muito espaço negativo em seu redor:

Aqui está o mesmo logótipo depois de cortado — quando todo o seu espaço negativo foi cortado:

O logótipo com o espaço negativo é apresentado abaixo quando carregado para o tema Pop:

O logótipo que foi cortado é apresentado abaixo quando utilizado no tema Pop:

Quando concluir que o seu logótipo não pode ser mais pequeno devido ao espaço negativo que contém, pode ajustar a largura da barra lateral para que o seu logótipo tenha espaço para se expandir. Como resultado, o seu logótipo ficará maior.

Aceda ao editor de temas e, na secção Cabeçalho e navegação, aumente o valor de "Dimensionamento > Largura do menu em computador".

Reduzir espaços em branco em redor do logótipo da barra lateral

Antes de remover qualquer preenchimento adicionado pelo tema Pop acima e abaixo do seu logótipo, é extremamente importante cortar qualquer preenchimento que possa estar incluído na própria imagem. Tem de cortar o espaço negativo ou os píxeis transparentes que envolvem o logótipo antes de carregar o respetivo ficheiro para a Shopify.

Aqui está um logótipo com muito espaço negativo em seu redor:

Aqui está o mesmo logótipo depois de cortado — todo o seu espaço negativo foi cortado:

O logótipo que não foi cortado é apresentado abaixo quando utilizado no tema Pop:

O logótipo que foi cortado é apresentado abaixo quando utilizado no tema Pop:

Depois de ter carregado um logótipo cortado para os recursos do seu tema, pode ajustar a largura da barra lateral acedendo ao editor de temas. Na secção Cabeçalho e navegação, edite o valor de "Dimensionamento > Largura do menu em computador" de acordo com as suas preferências.

Como medida final, não suportada, se pretender reduzir o preenchimento acima e abaixo do seu logótipo, siga estes passos:

  1. A partir do seu admin Shopify, aceda a Loja online > Temas.

  2. Encontre o tema que pretende editar e, em seguida, clique em Ações > Editar idiomas.

  1. A partir da aplicação da Shopify, toque em Loja.

  2. Na secção Canais de vendas, toque em Loja online.

  3. Toque em Gerir temas.

  4. Encontre o tema que pretende editar e, em seguida, clique em Ações > Editar idiomas.

  1. A partir da aplicação da Shopify, toque em Loja.

  2. Na secção Canais de vendas, toque em Loja online.

  3. Toque em Gerir temas.

  4. Encontre o tema que pretende editar e, em seguida, clique em Ações > Editar idiomas.

  1. Em Recursos, clique em timber.scss.liquid para abrir a folha de estilo do tema no editor de código online ou aceda a este URL.

  2. No fundo do ficheiro, adicione:

```sass {% comment %} A função de consulta de multimédia produz o seguinte: @ecrã multimédia e (largura mín.: 1025 px){ ... } A barra lateral só é apresentada quando a largura é > a 1025 píxeis. {% endcomment %}

@incluir na consulta ($min, $large) {.logótipo do cabeçalho { parte inferior da margem: 30 px /* original é de 60 px */; }

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

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

} ```

  1. Guarde o seu ficheiro.

Editar as definições da página do produto

Na secção Página de produto, 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 dinâmico de finalização da compra
  • Ícones de partilha nas redes sociais

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

  1. A partir do menu pendente da barra superior, selecione Páginas de produtos.

  2. Clique em Secções.

  3. Clique em Página de produtos.

  4. Para mostrar a marca do produto ou o fornecedor, marque Mostrar fornecedor do produto. Para que uma marca ou fornecedor sejam apresentados deverá adicionar um fornecedor ao produto.

  5. Para permitir que os clientes aumentem o zoom passando o rato sobre a imagem de um produto, marque Ativar zoom da imagem.

  6. Para mostrar uma seleção de produtos relacionados no fundo da página, marque Mostrar produtos relacionados. A coleção à qual o produto pertence determina os produtos relacionados que são apresentados. Para que sejam apresentados produtos relacionados, deverá 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, não será apresentado nenhum produto relacionado.

  7. Para apresentar um seletor de quantidade, marque Mostrar seletor de quantidade.

  8. Para mostrar um botão dinâmico de finalização da compra, marque Mostrar botão dinâmico de finalização da compra.

  9. Para mostrar ícones de partilha nas redes sociais, marque Ativar partilha de produtos.

  10. Clique em Guardar.

Melhores tipos de imagens de produto para o tema Pop

As fotos com maior resolução terão um aspeto mais cuidado e profissional no tema Pop, pelo que sugerimos que aposte em imagens com, pelo menos, 1024 píxeis de largura por 1024 píxeis de altura. As imagens serão automaticamente reduzidas quando necessário, portanto, quanto mais alta for a qualidade melhor será o resultado.

Fotos com resoluções mais altas são especialmente importantes se utilizar a função Zoom de imagem, algo que poderá ativar no editor de tema na secção Páginas dos produtos.

Idealmente, as imagens em destaque dos seus produtos partilharão a mesma proporção de largura e altura para ficarem melhor nas páginas de coleção.

Está pronto para começar a vender na Shopify?

Experimente gratuitamente