A tela “B2B Admin – Componentes” oferece uma intuitiva customização, permitindo a adição de imagens de produtos e promoções, bem como a criação de elementos de navegação. Ela oferece uma gama de recursos essenciais para melhorar a experiência do usuário final e impulsionar as vendas.
Neste documento, as funcionalidades desta ferramenta serão exploradas em detalhes, fornecendo orientações claras e exemplificando seu uso, a fim de garantir que os usuários possam aproveitar ao máximo todo o potencial que ela oferece.
A tela “B2B Admin – Componentes” é responsável por configurar as exibições visuais de componentes no site do B2B. Ela é composta por um filtro, para pesquisa de componentes já cadastrados e por três abas, divididas entre “Header”, “Body” e “Footer”. Para cada uma das abas, existem diferentes componentes que podem ser configurados.
HEADER
Para adicionar um componente a aba “Header”, basta clicar no botão “Novo”, como apontado na imagem.
Na tela de novo componente, é necessário preencher a “Descrição” informando qual será o nome do componente e selecionar a “Página” no qual o componente será exibido (atualmente, o sistema conta com a exibição apenas na página “Home”). Além disso, é possível definir a duração de exibição do componente, através das opções “Data início” e uma “Data fim”. Por último, é necessário escolher o “Tipo” do componente, que no caso do header, só existe um tipo de componente, o “Categorias”. Para finalizar, clique no botão “Criar”.
Após criar o componente, ele será exibido na tela sendo possível editar ou excluir. Além disso, por ser o único componente da aba “Header”, apesar de ser possível criar vários, apenas um estará em vigência. Para isso, ele possuirá três diferentes status:
Status:
- No status “Em exibição”, a data atual está entre a data de início e fim escolhidas para o componente, logo, ele estará em vigência.
- No status “Em espera”, a data atual está antes da data de início escolhida para o componente, logo, ele aguardará para entrar em vigor.
- No status “Inativo”, a data atual já ultrapassou a data de fim escolhida para o componente, logo, ele será inativado.
COMPONENTE “CATEGORIAS”
Responsável por exibir, na parte do cabeçalho do B2B, uma barra de navegação com as categorias de produtos selecionadas. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Clicando em editar, agora é necessário acessar a aba “Conteúdo”. Ela estará dividida em duas partes: “Preview”, que será uma amostra de como o componente será exibido no B2B e “Categorias”, que mostra as categorias já adicionadas ao componente. Para adicionar uma categoria, clique em “Adicionar Categoria”.
Nessa tela é onde serão adicionadas as categorias desejadas, entre as diversas presentes no B2B. Além disso, também é possível definir a duração de exibição para cada categoria, através das opções “Data início” e uma “Data fim”. Escolha uma categoria na aba “Selecione as categorias” e clique em criar.
Agora será possível visualizar a categoria adicionada nas abas de “Preview” e “Categorias”. É possível reordená-las no botão à esquerda do nome da categoria e as excluir no botão vermelho da aba “Ações”, como mostrado na imagem. Clique em “Salvar” para finalizar a edição do componente.
O componente “Categorias” adicionado a aba “Header” com o status “Em exibição” será exibido no cabeçalho da página do B2B, como mostra a imagem.
BODY
Para adicionar um componente na aba “Body”, basta clicar no botão “Novo”, como apontado na imagem.
Na tela de novo componente, é necessário preencher a “Descrição” informando qual será o nome do componente e selecionar a “Página” na qual o componente será exibido (atualmente, o sistema conta com a exibição apenas na página “Home”).
Além disso, é possível definir a duração de exibição do componente, através das opções “Data início” e uma “Data fim”. Por último, é necessário escolher o “Tipo” do componente. No Body existem vários tipos de componentes, como “Slider”, “Slider Mini”, “Banner duplo”, “Banner Triplo”, “Banner Wide”, “Slider Categorias” e “Slider Produtos”, que serão detalhados neste documento. Para finalizar, clique no botão “Criar”.
Após criar o componente, ele será exibido na tela, sendo possível editar ou excluir.
Além disso, é possível alterar a ordem de exibição dos componentes, clicando no botão a esquerda e arrastando para cima ou para baixo.
COMPONENTE “Slider”
Responsável por exibir, na parte do conteúdo do B2B, um banner interativo com várias imagens que alternam entre si as exibições, geralmente é usado para exibir propagandas em destaque. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Clicando em editar, agora é necessário acessar a aba “Conteúdo”. Ela estará dividida em duas partes: “Preview”, que será uma amostra de como o componente será exibido no B2B e “Imagens”, que mostra as imagens já adicionadas ao componente. Para adicionar uma imagem, clique em “Adicionar Imagem”.
Na aba de adicionar imagem, é necessário preencher a “Descrição” informando o nome da imagem. No campo “Link (URL)”, é possível inserir um link para que seja redirecionado ao clicar na imagem. Também é possível definir a duração de exibição da imagem, através das opções “Data início” e uma “Data fim”. O campo “Plataformas” define para quais plataformas a imagem será exibida, podendo escolher entre as opções “Web”, “App IOS” e “App Android”.
Ainda na aba de adicionar imagem, existem três campos para adicioná-las: “Desktop”, “Tablet” e “SmartPhone”. Essas opções existem para que sejam adicionadas três imagens parecidas/diferentes que sejam responsivas para cada uma das plataformas. Entretando, é possível adicionar somente uma imagem, para “Desktop”, que será exibida para todas.
Atenção: Existe também a opção “Não remover após data de expiração”, responsável por manter a imagem salva mesmo que passe da data final. Após serem feitas todas as configurações, clique em “Criar”.
Agora será possível visualizar a imagem adicionada nas abas de “Preview” e “Imagens”. É possível reordená-las clicando e arrastando a imagem para esquerda ou direita e as excluir no botão vermelho no canto superior direito, como mostrado na imagem. Clique em “Salvar” para finalizar a edição do componente.
O componente “Slider” adicionado a aba “Body” será exibido no corpo da página do B2B.
COMPONENTE “Slider Mini”
Responsável por exibir, na parte do conteúdo do B2B, um pequeno banner interativo que exibe pequenas imagens, geralmente é usado para exibir a logo de marcas de produtos. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do slider.
O componente “Slider Mini” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
COMPONENTE “BANNER DUPLO”
Responsável por exibir, na parte do conteúdo do B2B, dois banners estáticos com imagens distintas, geralmente é usado para destacar novidades ou promoções. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do banner.
O componente “Banner Duplo” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
COMPONENTE “BANNER TRIPLO”
Responsável por exibir, na parte do conteúdo do B2B, três banners estáticos com imagens distintas e, como o “Banner Duplo”, geralmente é usado para destacar novidades ou promoções. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do banner.
O componente “Banner Triplo” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
COMPONENTE “Banner wide”
Responsável por exibir, na parte do conteúdo do B2B, um banner estático com uma imagem horizontalmente maior. Assim como o “Slider”, geralmente é usado para exibir propagandas em destaque. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do banner.
O componente “Banner Wide” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
COMPONENTE “Slider categorias”
Responsável por exibir, na parte do conteúdo do B2B, pequenas imagens interativas que exibem as categorias dos produtos, geralmente é usado para destacar as categorias mais acessadas. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do banner.
O componente “Slider Categorias” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
COMPONENTE “Slider Produtos”
Responsável por exibir, na parte do conteúdo do B2B, cards interativos com descrição e imagens dos produtos, geralmente é usado para destacar produtos mais vendidos. Com o componente criado, agora é necessário editá-lo para configurar seu conteúdo.
Basicamente, o processo é o mesmo que o anterior, a diferença é o formato e a visualização do banner.
O componente “Slider Produtos” adicionado a aba “Body” será exibido no corpo da página do B2B, como mostra a imagem.
FOOTER
Para o Footer, ainda não existem componentes criados. Estes serão implementados no sistema futuramente e serão responsáveis pelas configurações de rodapé da página do B2B.
Ficou alguma dúvida? Entre em contato com o nosso suporte!