Skip to main content
Junte-se a nós na TDX em São Francisco ou no Salesforce+ nos dias 5 e 6 de maio e assista à Developer Conference for the AI Agent Era. Registre-se agora.

Personalizar o modelo de loja D2C

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Enumerar o que está incluído no modelo de loja D2C Commerce.
  • Explicar como personalizar o tema do modelo de loja D2C Commerce.
  • Explicar como personalizar um cabeçalho ou rodapé.
  • Descrever como usar páginas e componentes.
  • Explicar a diferença entre ativar e publicar uma loja.
  • Explicar como personalizar uma loja.

Personalizar uma loja do D2C Commerce

Taylor Givens, operador comercial sênior da Ursa Major Solar, está interessado em criar uma experiência incrível para os visitantes da loja Salesforce D2C Commerce. Eles estão ansiosos para personalizar o modelo D2C Experience Builder com o logotipo da loja Ursa Major Solar, só para começar.  

Logotipo da Ursa Major Solar

O modelo D2C Commerce inclui páginas comerciais específicas, como a página inicial e uma página de resultados de pesquisa. Essas páginas usam componentes desenvolvidos especificamente para lojas D2C Commerce. Com a interface fácil de usar do Experience Builder, Taylor pode arrastar e soltar componentes nas páginas e personalizar as propriedades dos componentes. A equipe da Ursa Major Solar pode adicionar imagens e estilos à loja para criar uma experiência única para o comprador.

Taylor Givens, operador comercial sênior da Ursa Major Solar

Taylor cria esta lista de verificação útil do que eles precisam fazer.


Tarefa

1

Configurar o tema da loja.

2

Configurar um cabeçalho ou rodapé personalizado.

3

Explorar páginas e componentes.

4

Visualizar e publicar a loja.

5

Configurar uma URL personalizada para a loja.

Taylor começa a personalizar as páginas e componentes da loja D2C Commerce clicando no bloco Experience Builder na página inicial da loja.

Use o Experience Builder da loja para criar, marcar e personalizar sua loja.

Consulte Personalizar sites com o Experience Builder para obter detalhes sobre como usar o Experience Builder.

Configurar o tema da loja

Taylor está feliz em saber que o modelo de loja D2C Commerce usa um tema D2C pré-criado. Eles podem especificar cores, imagens, tamanhos de texto e espaçamento para personalizar o tema de acordo com seus requisitos. Alguns componentes têm propriedades que permitem que eles substituam as configurações de tema do componente.

Acesse as configurações de tema da loja expandindo o ícone Theme (Tema) no lado esquerdo da página do Experience Builder.

No Experience Builder, selecione um tema.

Taylor escolhe cores para o fundo, texto, marca e primeiro plano. Eles geram uma paleta a partir de uma imagem carregada.

Na página Images (Imagens), eles selecionam o logotipo da empresa.

No Experience Builder, altere a cor e adicione uma imagem.

Eles também podem configurar o tamanho do texto e o espaçamento do site para PC/desktop e dispositivos móveis. 

O modelo de loja D2C Commerce inclui um componente de cabeçalho e rodapé em cada página. Taylor quer usar um cabeçalho personalizado para uma página, então eles primeiro ajustam o layout do tema da página. Veja como eles fazem isso.

  1. Selecione a página onde você deseja usar um cabeçalho ou rodapé personalizado: Início
  2. Clique no ícone Settings (Configurações).
  3. Clique em Theme (Tema).
  4. Clique em Configure (Configurar).
  5. Clique em New Theme Layout (Novo layout de tema).
  6. Insira o novo layout: Ursa Major Solar - home (Ursa Major Solar - página inicial)
  7. No menu suspenso de Commerce Layout (Layout do Commerce), selecione Commerce Layout (Layout do Commerce).
    No Experience Builder, personalize o layout da sua página.
  8. Clique em Save (Salvar).

A página agora tem uma seção superior e inferior em branco onde Taylor pode usar seu cabeçalho ou rodapé personalizado.
Consulte o Guia do desenvolvedor do D2C Commerce para obter detalhes sobre o desenvolvimento de componentes personalizados.

Explorar páginas e componentes

O modelo de loja D2C Commerce inclui páginas e componentes que permitem que Taylor crie uma loja atraente e fácil de usar. Veja alguns componentes disponíveis por página.

Página

Meta

Componentes

Carrinho

Mostrar aos compradores os produtos que eles selecionaram para comprar.

  • Carrinho
  • Totais do carrinho
  • Botão Checkout
  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Categoria

Mostrar aos compradores os produtos da categoria selecionada.

  • Banner da categoria
  • Breadcrumbs da categoria
  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Resultados da pesquisa
  • Comprar por categoria
  • Logotipo da loja
  • Menu do bloco
  • Mais vendidos

Checkout

Permitir que os compradores concluam a compra.

  • Totais do carrinho
  • Checkout
  • Cabeçalho do checkout
  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Erro

Informar os compradores que o sistema encontrou um erro.

  • Banner principal
  • Lista de links
  • Mensagem de erro da página
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Fazer login/Verificar a senha

Informar os compradores registrados que eles devem verificar o email para redefinir a senha.

  • Verificar o email
  • Banner principal
  • Lista de links
  • Cabeçalho de My Account (Minha conta)
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Fazer login/Esqueci minha senha

Permitir que os compradores registrados recuperem uma senha esquecida.

  • Esqueci minha senha
  • Banner principal
  • Lista de links
  • Cabeçalho de My Account (Minha conta)
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Fazer login/Fazer login

Permitir que os compradores façam login na loja.

  • Banner principal
  • Lista de links
  • Formulário de login
  • Cabeçalho de My Account (Minha conta)
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Fazer login/Cadastrar-se

Permitir que os compradores cadastrem-se na loja.

  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Autorregistro
  • Logotipo da loja
  • Menu do bloco

Início

Criar uma página de destino interessante para os compradores entrarem na sua loja.

  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Comprar por categoria
  • Logotipo da loja
  • Menu do bloco
  • Mais vendidos

Meu perfil

Permitir que os compradores vejam a imagem do seu perfil e redefinam a senha.

  • Banner principal
  • Lista de links
  • Cabeçalho de My Account (Minha conta)
  • Senha de My Account (Minha conta)
  • Meu perfil
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Pedido

Informar os compradores que os itens foram pedidos com êxito.

  • Banner principal
  • Lista de links
  • Mensagem de confirmação do pedido
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Produto

Mostrar informações sobre um produto, incluindo preço, descrição e imagem.

  • Einstein Recommendations (Recomendações do Einstein)
  • Banner principal
  • Lista de links
  • Mensagem de confirmação do pedido
  • Descrição do produto
  • Galeria de produtos
  • Informações sobre o produto
  • Editor de Rich Content
  • Logotipo da loja
  • Menu do bloco

Pesquisa

Permitir que os compradores pesquisem a loja.

  • Banner principal
  • Lista de links
  • Editor de Rich Content
  • Resultados da pesquisa
  • Comprar por categoria
  • Logotipo da loja
  • Menu do bloco

Serviço não disponível

Especificar o que os compradores verão se a loja não estiver disponível.

  • Editor HTML
  • Editor de Rich Content

 Taylor observa mais atentamente os componentes para descobrir quais devem ser usados como estão e quais eles gostariam de modificar.

Categoria

Componente

Carrinho

  • Carrinho: Exibir o conteúdo do carrinho de compra.
  • Totais do carrinho: Exibir o custo dos itens no carrinho.

Categoria 

  • Banner da categoria: Especificar a cor do nome da categoria exibida no banner.
  • Breadcrumbs da categoria: Exibir o caminho da categoria atual.

Checkout

  • Checkout: Exibir etapas do processo de checkout.
  • Botão Checkout: Clicar para iniciar o checkout.
  • Cabeçalho do checkout: Exibir o logotipo da loja e o emblema do carrinho na parte superior da página Checkout.

Commerce Einstein

  • Einstein Recommendations (Recomendações do Einstein): Personalizar a experiência de compra.

Conteúdo

  • Banner principal: Exibir uma imagem e um texto de forma proeminente na página.
  • Editor HTML: Criar e editar conteúdo personalizado em HTML, incluindo texto e imagens.
  • Mensagem de erro da página: Exibir uma mensagem de página inválida.
  • Editor de Rich Content: Adicionar texto e imagens personalizados formatados a uma página, incluindo texto e imagens.
  • Logotipo da loja: Substituir a imagem do logotipo em uma determinada página.

Navegação

  • Lista de links: Exibir uma lista de links no rodapé que permite ao comprador navegar na loja.
  • Comprar por categoria: Exibir produtos agrupados por categoria.
  • Menu do bloco: Navegar pela loja clicando nos blocos.
  • Mais vendidos: Exibir produtos em uma categoria.

Pedidos

  • Mensagem de confirmação do pedido: Exibir quando o pedido de um comprador estiver concluído.

Detalhes do produto

  • Descrição do produto: Exibir informações sobre produtos.
  • Galeria de produtos: Exibir o produto na página Product (Produto).
  • Informações sobre o produto: Exibir o SKU, o preço e a descrição de um produto.

Pesquisa

  • Resultados da pesquisa: Exibir produtos recuperados como resultado de uma pesquisa do comprador.

Contas de usuário

  • Verificar o email: Informar o comprador que ele deve verificar o email para localizar o link de redefinição da senha.
  • Esqueci minha senha: Permitir que um comprador redefina a senha.
  • Formulário de login: Usa-o para fazer login na loja, acionar o processo de senha esquecida ou iniciar o autorregistro.
  • Cabeçalho de My Account (Minha conta): Adicionar o título My Profile & Password (Meu perfil e senha) na parte superior do componente My Account Menu (Menu Minha conta).
  • Senha de My Account (Minha conta): Exibir um link que permita ao comprador redefinir a senha.
  • Meu perfil: Exibir o nome e endereço de email de um comprador.
  • Autorregistro: Permitir que um comprador cadastre-se na loja.

Visualizar e publicar a loja

À medida que Taylor personaliza a loja, eles podem visualizar a aparência para os compradores e publicar as alterações. Veja como eles fazem isso.

  1. Abra o Experience Builder.
  2. Abra a página que você deseja visualizar.
  3. Clique em Preview (Visualizar) no canto superior direito da página.
    Consulte Visualizar seu site do Experience Builder.
  4. Quando estiver satisfeito com a aparência da sua loja, clique em Publish (Publicar) no canto superior direito da página. Taylor recebe uma notificação por email quando a loja é publicada.

Você pode publicar uma loja, esteja ela ativada ou não. Você pode ativar uma loja mesmo que ela não tenha sido publicada. Nesse caso, Maria Jimenez, a administradora, já a ativou. Consulte o módulo Noções básicas do Salesforce D2C Commerce para saber como ela fez isso.

Vamos concluir

Nessa unidade, você aprendeu a personalizar o modelo de loja D2C Commerce. Você também aprendeu a publicar e visualizar a loja. Em unidades anteriores, você conheceu a pesquisa e o Commerce Einstein. Agora, faça o teste final e ganhe um emblema incrível.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback