Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Nesse tutorial DataCake, você confere a documentação completa das customizações visuais disponíveis para seu carrinho do sistema Datacake!DataCake!

Para customização do sistemas DataCake existem algumas telas especificas para cara vertical.
Para customização das telas da esteira de vendas vamos seguis as seguintes atividades:

  1. Subir imagem para servidor DataCake

  2. Copiar URLs da imagens nos campos de logo do core website e do logo da home

  3. Trocar as cores das variáveis primarias e secundarias

  4. Copiar URLs da imagens nos campos de logo do e-mail

...

1️⃣ Subir para o servidor as logos na tela de MEDIA do DataCake.

Informações

IMPORTANTE
imagens deve ser de preferência com fundo transparente em formato png salvo com qualidade para web. Evitar resoluções muito baixas a baixo de 100px tanto na altura quanto na largura ou resoluções muito alta acima de 1024px tanto na altura quanto na largura.

No Painel de controle
Acessar CONTEÚDO > MEDIA/ARQUIVOS clicar em “clique para enviar arquivos”

Escolha o arquivo do logo 1 para fundo escuro 2 para fundo claro como no exemplo a baixo:

...

2️⃣ Copiar as URLs das imagens no campos de logo em CORE WEB SITE

Após o upload das imagens cada uma delas vai receber dois ícones um para apagar e um que vamos utilizar para fazer a cópia da URL dessa imagem que agora está online. image-20241003-170716.pngImage Added

...

Informações

Recomendamos abrir em uma nova aba o painel DataCake para facilitar essa configuração

Em uma nova janela vá em SISTEMA > CONFIGS > CORE WEBSITE

image-20241003-171118.pngImage Added

Preencha os campos indicados nos prints abaixo. Altere entre as abas da pagina de MEDIA para copiar a url de cada imagem que fez o upload anteriormente.

...

Nota

Após alterações lembre de salvar clicando no botão superior direito ou teclando ctr-l + S

image-20241003-171534.pngImage Added

...

3️⃣ Trocar as cores das variáveis primarias e secundarias

Ainda em CORE WEB SITE logo a baixo temos as variáveis que vão ser usadas para definir as cores do sistema. Necessário utilizar código de cores HEX ou RGB como nos prints a baixo.

Após alterações salvar image-20241003-171534.pngImage Added

Devem ser alterados as duas variáveis com o nome primary assim como as com nome secondary

Bloco de código
--primary: #073643 !important;
--c-primary: #073643 !important;
Bloco de código
--secondary: #b0df01 !important;
--c-secondary: #b0df01 !important;

...

As outra variais são referentes as mesmas cores usadas na primaria e secundaria porém mais claro para lighter e mais escuro para darker .

Para isso use o código de cores que original e altere usando o color-peeker que aparece quando deixar o mouse parado sobre a cor. Dessa forma vai conseguir clarear e escurecer a própria cor que já sendo usada assim não fugindo do tema. Porém essas cores tem um pequeno impacto na pratica, são usadas só como efeitos e destaque

image-20241003-173558.pngImage Added

...

4️⃣ Copiar URLs da imagens nos campos de logo do e-mail

Assim como copiamos as URLs dos logos para os campos no core web site, também precisamos copiar as urls para um campo de logo de e-mails esse logo será usado nos templates de e-mail do sistema.

Va em SISTEMA > CONFIGS > EMAIL

image-20241003-175513.pngImage Added

Basta colar no campo “Logo padrão de email” e salvar

...

Nota

Atenção

Essa tela está relacionado a configuração do SMTP do site para que possa enviar e-mail do dominio do provedor. Porém vamos discutir as outra opções dessa tela em outro tutorial → AQUI

Importante.

A baixo temos um vídeo tutorial detalhando tudo e mais um pouco do que discutimos no tutorial acima.

Tutorial em Vídeo da customização visual do sistema.

...