Tema da vitrine: como instalá-lo e configurá-lo

Publicados: 2018-01-12

O Storefront é um dos temas mais flexíveis e extensíveis quando se trata de lançar uma loja WooCommerce usando o WordPress.

Devido à sua arquitetura de código limpa, tornou-se extremamente popular entre os usuários e atualmente mais de 100.000 lojas online usam o Storefront como tema do WordPress.

Instalando o tema WooCommerce Storefront

Existem duas maneiras de instalar o tema Storefront, seja pesquisando o tema no painel do WP ou carregando o tema manualmente.

Instalando usando o Painel do WordPress

A maneira mais rápida de instalar o Storefront é através do painel do WordPress. Siga estas etapas para instalar o Storefront via painel do WordPress.

Vá para Aparência > Temas > Adicionar Novo
Digite ' storefront ' na caixa de pesquisa e pressione enter.
Passe o mouse sobre a captura de tela do Storefront.
Selecione o botão ' Instalar '.
Clique em Ativar

Instalando o Storefront manualmente

Baixe a versão mais recente do Storefront em wordpress.org
Vá para Aparência > Temas > Adicionar Novo
Clique em Carregar tema e escolha o arquivo zip baixado anteriormente.
Clique em Instalar agora
Clique em Ativar

Configurando a página inicial

O Storefront possui um modelo de página inicial integrado que é bem pensado. Sua estrutura limpa ajudará seu público a encontrar facilmente os produtos que você está vendendo.

Existem 6 seções no modelo padrão de página inicial da Storefront. Mas você pode adicionar ou excluir a seção com base em sua necessidade.

Seções da página inicial padrão:

Conteúdo da página
Categorias de Produtos
produtos recentes
produtos em destaque
Produtos populares
Produtos à venda
Produtos mais vendidos

Atribuindo modelo de página inicial

Para configurar o modelo de página inicial, siga estas etapas:

Vá para Dashboard -> Pages e crie uma página intitulada “ Home ” ou qualquer coisa que você goste.
Adicione qualquer conteúdo de boas-vindas que desejar, que será exibido acima dos produtos.
No lado direito, você encontrará uma caixa intitulada " Atributos da página "
Selecione “ Página inicial ” no menu suspenso “ Modelo ”.
Clique em Publicar ou Atualizar para salvar a alteração.

Exibindo o modelo de página inicial

Depois de publicar a página, agora você precisa exibir esta página inicial como a primeira página do seu site. Assim, qualquer pessoa que chegar ao seu site primeiro veja esta página. Para configurá-lo siga estes passos:

Vá para Painel > Configurações > Leitura
Em Sua página inicial, selecione Uma página estática (selecione abaixo)
Selecione a página de atribuição do modelo de página inicial anterior no menu suspenso Página inicial .
Clique em Salvar alterações

Reordenar as seções da página inicial da vitrine

Você pode alterar a ordem das seções da Página inicial do Storefront usando ganchos ou usando um plug-in chamado Controle de página inicial. Siga as etapas abaixo para reordenar as seções da página inicial:

Baixe e instale o controle da página inicial
Vá para Aparência -> Personalizar -> Controle da página inicial
Arraste e reordene as seções de acordo com sua necessidade.
Clique em Salvar e Publicar para salvar as alterações.

Configurando o Menu de Navegação

No tema Storefront, você pode exibir o Menu em 3 locais.

Menu Primário – Aparece logo abaixo do logotipo do site.
Menu Secundário – Ao lado do logotipo próximo à caixa de pesquisa.
Menu Handheld – Menu para dispositivos móveis.

Configurando os menus

Por padrão, se um menu principal específico não estiver definido, o WordPress exibirá todas as suas páginas como seu menu principal. Às vezes, confunde os usuários e dificulta a compreensão de como essas páginas chegaram ao menu.

Criando um novo menu e adicionando páginas a ele

Vá para o painel de administração e, em seguida, Aparência> Menus
Na parte superior, você encontrará o campo Nome do menu. Escreva o nome do seu menu aqui.
No lado esquerdo, clique em Páginas (supondo que você queira adicionar páginas ao menu)
Clique em Exibir tudo para obter uma lista de todas as páginas publicadas.
Marque as páginas que deseja que apareçam no menu.
Após selecionar a página, clique no botão Adicionar ao menu.
Arraste e solte o item de menu para reorganizá-los de acordo com o seu gosto.
Clique no menu Salvar

Atribuindo o cardápio

Depois de criar o menu, atribua o menu ao local onde você deseja que ele seja exibido. Navegue até Aparência > Menus > Configurações do menu e marque o local na caixa de seleção Exibir local .

Adicionando categorias de produtos ao seu menu

Vá para o painel de administração e, em seguida, Aparência> Menus
Clique em Opções de tela no canto superior esquerdo e verifique as categorias de produtos
Agora, no painel esquerdo, uma guia Categorias de produtos será exibida.
Clique na guia Categorias de produtos para expandir, selecione as categorias
Após selecionar, clique no botão Adicionar ao menu .
Arraste e solte o item de menu para reorganizá-los de acordo com o seu gosto.
Clique no menu Salvar

Configurações do widget

O Storefront permite exibir seis regiões de widgets em 3 áreas diferentes.

Barra lateral – à esquerda ou à direita do conteúdo principal do site,
Abaixo do Cabeçalho – Logo abaixo do cabeçalho do site e acima do conteúdo.
Coluna de Rodapé 1 - Área de Rodapé
Coluna de Rodapé 2 - Área de Rodapé
Coluna de Rodapé 3 - Área de Rodapé
Coluna de Rodapé 4 - Área de Rodapé

Configurando o WooCommerce

Instalando o WooCommerce

Vá para Painel > Plugins > Adicionar Novo > Plugins de Pesquisa
Procure por “WooCommerce”.
Clique em Instalar agora .
Clique em Ativar .

Configurando o WooCommerce

Depois de ativar o WooCommerce, você será solicitado a instalar o WooCommerce com um assistente. Ele cuidará de todas as configurações iniciais. Está dividido em 6 partes.

Configuração da página – Configura automaticamente as páginas essenciais (Loja, Carrinho, Checkout, Minha Conta).
Localização da loja - Configure a localização da loja, moeda e imposto sobre vendas
Envio – Configurar unidade de peso e unidade de dimensão
Pagamentos – Configure o gateway de pagamento.
Tema – Instale o tema compatível com WooCommerce.
Pronto – (opcional) Permitir que o WooCommerce colete informações de uso.

Você pode todas essas configurações sempre que quiser no painel do WooCommerce.

Adicionar um produto ao WooCommerce

Vá para o painel do WordPress
Clique em Produtos > Adicionar Novo
Escreva o nome ou título do seu produto no campo Nome do Produto.
Escreva a descrição do seu produto no editor abaixo.
Agora você precisa enviar uma imagem em destaque do seu produto e uma imagem adicional para uma galeria de produtos.
À direita, você encontrará uma caixa intitulada Imagem do produto e galeria de produtos
Carregue a imagem em destaque para a imagem do produto e imagens adicionais para a galeria do produto
Clique em Publicar .

Configurando o preço e o atributo do produto

Para configurar o preço do produto Vá para Painel > Produtos e selecione qualquer produto. Em seguida, role para baixo até a seção Dados do produto. Aqui está uma breve descrição de todas as configurações da seção de dados do produto:

Tipo de Produto

Produto simples : Um único produto simples.
Produto agrupado : Um produto que faz parte de uma coleção.
Produto Externo/Afiliado : Produto que está listado em sua loja, mas o produto real é vendido em outro lugar.
Produto variável : Um produto com variações (tamanho, cores)
Produto virtual : Um produto que não requer frete.
Produto para download : Um produto em que você deve fornecer um arquivo para download.

Em geral

Preço normal: Preço normal do produto.
Preço de venda : preço do produto com desconto.

Inventário

SKU : Unidade de manutenção de estoque (SKU) rastreia produtos
Gerenciar estoque : Habilite o gerenciamento de estoque
Status do estoque : Se o produto está ou não em estoque ou fora de estoque.
Vendido Individualmente : Pode ser vendido em um único pedido.

Envio

Peso: Peso do produto.
Dimensões: Comprimento, largura e altura do produto.
Classe de envio: Agrupe produtos de tipo semelhante a determinado método de envio.

Produtos vinculados

Upsells : exiba produtos relacionados abaixo de uma página de detalhes do produto.
Vendas cruzadas : exiba produtos relacionados na página do carrinho.
Atributos : Selecione o atributo global de seus produtos.

Avançado

Nota de compra : Nota para enviar ao cliente após a finalização da compra.
Ordem do menu : Posição de pedido personalizada para este produto.
Habilitar revisões : habilite ou desabilite revisões de produtos.

Personalizando a vitrine

Como adicionar um logotipo

Siga estas etapas para adicionar e exibir o logotipo em seu site:
1. Vá para WordPress Admin e depois Aparência > Personalizar
2. Em seguida, vá para Identidade do Site > Logo
3. Clique em Selecionar logotipo para fazer upload da imagem do logotipo. (Tamanho de imagem recomendado: 470px X 110px)
4. Clique em Publicar.

Onde fazer upload do favicon do site

Siga estas etapas para adicionar e exibir o favicon em seu site:
1. Vá para WordPress Admin e depois Aparência > Personalizar
2. Em seguida, vá para Identidade do Site > Ícone do Site
3. Clique em Selecionar imagem para fazer upload da imagem do seu logotipo. (Tamanho de imagem recomendado: 512px X 512px)
4. Clique em Publicar.

Como alterar o arquivo de postagem ou o layout do blog

Vá para Aparência > Personalizar > Personalizador de blog > Arquivos de postagem
Selecione o layout de Post Archive Layout
Clique em Publicar

Como alterar o arquivo de postagem ou a coluna do blog

Vá para Aparência > Personalizar > Personalizador de blog > Arquivos de postagem
Selecione o número da coluna (largura total, 2 colunas, 3 colunas e 4 colunas) da coluna pós-arquivamento
Clique em Publicar

Como alterar o layout de postagem ou artigo único

Vá para Aparência > Personalizar > Personalizador de blog > Postagem única
Selecione o layout do layout de postagem única
Clique em Publicar

Como alterar a fonte

Vá para Aparência > Personalizar > Estilos Gerais > Tipografia
Selecione a fonte em Pareamentos de Fontes
Clique em Publicar

Personalização WooCommerce

Como alterar o layout da página da loja

Vá para Aparência > Personalizar > WooCommerce > Página da loja – Listas de produtos
Selecione o layout do Layout de arquivo do produto
Clique em Publicar

Como alterar o layout da página de detalhes do produto

Vá para Aparência > Personalizar > WooCommerce > Página da loja – Listas de produtos
Selecione o layout do Layout de arquivo do produto
Clique em Publicar