Como personalizar meu layout BW Store?
Publicado em:
Entenda neste artigo como personalizar seu layout BW Store para melhorar sua experiência na plataforma.
Nada é mais gratificante do que personalizar o design da sua loja de acordo com a identidade da sua empresa. E a boa notícia é que esse processo é extremamente simples. Neste artigo, vamos explorar como realizar essas edições de forma descomplicada.
O grande diferencial é que a plataforma BW Commerce oferece um editor de temas que elimina a necessidade de conhecimentos em programação. Isso significa que você não precisa ser um especialista para personalizar a aparência da sua loja.
O aclamado layout BW Store, que anteriormente reinava como o tema mais vendido em nossa plataforma, passou por uma emocionante transformação. Agora, estamos entusiasmados em apresentar o BW Store Gratuito, um tema que herda toda a elegância e funcionalidade de seu predecessor premium, disponibilizado para todos os usuários sem nenhum custo.
Introdução ao editor
Nos seus layouts, é fundamental que você defina o logotipo da sua loja. Ele é o elemento principal da sua identidade visual. Criamos um tutorial exclusivamente para que você saiba como alterar a logo geral.
Como inserir a logomarca na minha loja?
Ao alterar a logo geral, ela só será exibida se a logo do tema for ocultada manualmente. Mais adiante deste mesmo tutorial, vamos ensinar como alterar a logo de um único tema.
Para começar a editar o seu tema, acesse o painel administrativo da BW Commerce e vá em Personalizar > Layout e clique em Personalizar layout atual.
Todas as edições feitas aqui, irão valer apenas para o tema atual.
Essas são as opções que todos os temas sempre terão em comum entre seus respectivos editores.
- Limpar: Esse botão serve para que você exclua todas as alterações feitas antes de clicar em Salvar alterações.
- Restaurar padrão do tema: Ao clicar nesse botão todas as alterações que você fez serão excluídas e o tema voltará ao padrão, como se você tivesse recém instalado.
- Salvar alterações: Esse botão serve para você salvar todas as edições no tema que você gostou.
- Selecione a página: Aqui você pode pré-visualizar as páginas de Home, Produtos, Carrinho e Contato da sua loja enquanto edita o layout.
- Botões desktop e mobile: No canto direito superior do layout você encontra essas duas opções, servem para que você possa pré-visualizar a sua loja como se estivesse usando um celular.
Cores pré-definidas e cores gerais
Logo no começo do editor você encontrará as Cores pré-definidas, geralmente serão 3 sugestões de cores escolhidas pela BW para você utilizar no seu layout. Mas se preferir, logo abaixo o editor possui a aba de Cores, onde você pode editar cada cor do tema individuamente.
Fontes
Nessa aba você pode alterar a fonte utilizada em sua loja. Caso deseje adicionar mais fontes ou alguma customizada, será necessário abrir uma solicitação para a nossa equipe de suporte.
Cabeçalho
Na aba Cabeçalho você pode customizar de diferentes formas seu cabeçalho.
- Logo: Aqui fica a logo do tema, ao alterar ela só irá mudar para esse único tema. Caso queira utilizar a logo geral, marque as duas opções abaixo (Ocultar logo do tema e Exibir logo geral).
- Tamanho da logo: Defina em px a altura da logo para computadores. O valor nunca deve passar de 150.
- Tamanho da logo (mobile): Essa opção funciona igual a de cima, mas só servirá para celulares.
- Cabeçalho fixo: Aqui você pode escolher se deseja que o cabeçalho acompanhe a rolagem da página Sempre, Apenas no desktop, Apenas no mobile ou Nunca.
- Categorias: Marque essa opção se deseja que o botão de todas as categorias seja exibido no inicio da sua barra de categorias.
Banners
- Ocultar setas dos banners: Marque se deseja que quando passar o mouse em cima do banner principal, as setas de passagem não apareçam.
- Ocultar indicador de quantidade dos banners: Marque se deseja que as bolinhas que indicam a quantidade de banners fiquem ocultas.
- Tempo: Defina em segundos (1, 2, 3, etc) quanto tempo deseja que demore para passar de um banner para o outro.
Miniaturas
- Exibir bloco de Miniaturas: Marque se de seja que as miniaturas sejam exibidas.
- Cor de fundo: Escolha a cor de fundo do bloco de miniaturas.
- Exibir imagem acima do texto: Marcando essa opção os ícones serão exibidos acima do texto ao invés a esquerda, que é o padrão.
- Títulos: Aqui você pode escolher se deseja os títulos e/ou subtítulos em negrito ou não, tamanho da fonte e a cor dos mesmos.
Logo abaixo você encontra edição individual de cada miniatura:
- Imagem: Você pode escolher a imagem desejada para exibição. Siga a recomendação!
- Título: Defina o título da miniatura.
- Subtítulo: Defina o subtítulo da miniatura.
- Link: Cole um link caso deseje que ao clicar na miniatura, o cliente seja levado a outra página.
- Exibir o card: Marque se deseja que o card de miniatura seja exibido.
Abaixo separamos um tutorial que te ensina com mais detalhes a como cadastrar e configurar as miniaturas:
Como editar as miniaturas do meu tema?
Home
Produtos (Mais Vendidos, Lançamentos e Ofertas):
- Exibir bloco dos Mais Vendidos/Lançamentos/Ofertas: Desmarque essa opção se você não quer que os produtos Mais Vendidos/Lançamentos/Ofertas sejam exibidos.
- Título do Mais Vendidos/Lançamentos/Ofertas: Defina o título para o bloco.
- Subítulo do Mais Vendidos/Lançamentos/Ofertas: Defina o subtítulo para o bloco.
- Exibir os produtos em carrossel: Marque essa opção se você quer que os produtos sejam exibidos em carrossel ao invés de grade.
Banners entre os Mais Vendidos e Lançamentos:
- Imagem 1 e Imagem 2: Você pode inserir a imagem desejada. Lembre-se sempre de seguir as recomendações.
- Link do banner: Cole um link nesse campo caso deseje que o cliente seja redirecionado para outra página ao clicar no banner.
- Exibir este banner: Desmarque esta opção para que o respectivo banner não seja exibido.
Banner após os Lançamentos:
- Imagem desktop: Insira a imagem que deseja. Ela só sera exibida em computadores. Siga as recomendações.
- Imagem mobile: Insira a imagem que deseja. Ela só sera exibida em celulares. Siga as recomendações.
- Link: Cole um link nesse campo caso deseje que o cliente seja redirecionado para outra página ao clicar no banner.
- Exibir este banner: Desmarque esta opção para que o banner não seja exibido.
Produto
- Proporção da imagem: Escolha entre 800 x 800 ou 800 x 1200 conforme a proporção das imagens dos seus produtos.
- Cor do preço do produto: Aqui você pode escolher se o preço do produto vai usar a cor primária ou secundária, definidas na aba Cores. Ou se quiser manter a cor padrão, selecione Cor padrão dos textos.
- Ocultar botões de compartilhamento por redes sociais: Marque essa opção se deseja ocultar os botões das redes sociais dentro da página do produto, que pode ser visualizada ao alterar a página no topo.
Newsletter
- Exibir bloco: Desmarque esta opção se você não quer que o bloco seja exibido.
- Cor de fundo: Escolha a cor de fundo do bloco.
- Cor dos textos: Escolha a cor dos textos do bloco.
- Título: Defina o título da Newsletter.
- Subtítulo: Defina o subtítulo da newsletter.
- Exibir campo nome: Marque essa opção se deseja que o seu cliente informe o nome para se cadastrar a newsletter.
- Exibir campo telefone: Marque essa opção se deseja que o seu cliente informe o telefone para se cadastrar a newsletter.
Rodapé
- Ocultar ícone de voltar ao topo: Marque esta opção se deseja que o ícone do canto inferior direito que acompanha a rolagem seja ocultado.
- Formas de pagameto: Nessas opções você escolhe quais bandeiras de pagamento deseja exibir e ocultar.
- Outras opções: Marque as que deseja ocultar individualmente do rodapé.
Menu lateral
Nessa aba você pode editar as cores do menu lateral esquerdo exclusivo de celulares.
- Ocultar links para páginas extras: Marque esta opção se deseja que as páginas cadastradas em Personalizar > Páginas sejam ocultadas.
Representante
Esse bloco flutuante só irá exibir se tiver clientes cadastrados como representantes na loja.
- Ocultar bloco de informações do representante: Marque esta opção se deseja que o bloco de representantes seja ocultado mesmo com um cadastrado.
- Título do representante: Defina um título para o bloco.
- Cor do fundo: Escolha uma cor personalizada para o fundo.
- Cor dos textos: Escolha uma cor personalizada para os textos.
- Ocultar cidade do representante: Marque se deseja que apenas a cidade do mesmo fique oculta.
- Exibir bloco do representante sempre aberto: Marque se deseja que o bloco permaneça sempre aberto ao invés de minimizado.
Abaixo você pode conferir alguns tutoriais que ensinam a como cofigurar o recurso de representantes:
Como habilitar a funcionalidade para representantes em minha loja virtual?
Representantes: como acessar, recursos disponíveis e como utilizar?
Avaliações
Nessa aba você pode customizar o bloco de avaliações caso sua loja possua.
Abaixo disponibilizamos um tutorial de como configurar as avaliações:
Como habilitar as avaliações de pedidos?
Blog
Postagens na home:
- Exibir últimas postagens na home: Marque esta opção para que o bloco seja exibido.
- Cor de fundo: Defina a cor para o fundo do bloco.
- Título do bloco: Defina um título para o bloco.
- Subtítulo do bloco: Defina um subtítulo para o bloco.
- Quantidade de postagens exibidas na home: Escolha quantas postagens vão ser exibidas na home, serão sempre as últimas cadastradas.
- Categoria das postagens exibidas na home: Digite uma categoria específica caso queira que apenas as postagens vinculadas a ela sejam exibidas.
Página da postagem:
- Exibir imagem principal abaixo do título: Marcando essa opção a imagem em destaque será exibida depois do título.
- Exibir cabeçalho da postagem ocupando toda a largura da tela: Ao marcar essa opção, a barra de busca e categorias será exibida a esquerda da imagem em destaque e do título.
- Exibir título e descrição sobrepostos à imagem principal: Marque essa opção se quiser que o título seja exibido em cima da imagem em destaque.
- Alinhamento do título e descrição: Escolha se deseja que o título e a descrição fiquem Centralizado ou alinhados À esquerda.
Abaixo disponibilizamos um tutorial de como habilitar e configurar o blog da sua loja:
Pronto! 🙌
Seguindo esses passos, você conseguirá aproveitar todas as possibilidades do layout BW Store!