Como administrador do catálogo, você pode usar o Editor de Temas da Loja para personalizar as cores da marca, os logotipos e as imagens do cabeçalho da loja sem a necessidade de JavaScript (JS), CSS (Folhas de Estilo em Cascata) ou HTML (Linguagem de Marcação de Hipertexto) personalizados.
O Editor de Temas da Loja Virtual deve ser ativado na conta da sua instituição pelo administrador raiz do Catálogo . Caso não esteja disponível, você pode personalizar o catálogo usando CSS, JS ou HTML .
Notas:
- Saiba mais sobre como personalizar a identidade visual de e-mails usando HTML e criar modelos de e-mail personalizados.
- Para obter detalhes e especificações sobre como adicionar logotipos e imagens de cabeçalho, consulte as Diretrizes de Logotipo do Catálogo Canvas .
- Se a personalização da marca não for adicionada a um subcatálogo, ele herdará a marca, as configurações e outras opções de personalização do catálogo principal.
- A aparência da página de Listagens do Catálogo pode variar dependendo da versão da plataforma ou de qualquer estilo personalizado aplicado por meio de código do site, como CSS, JS ou HTML (HyperText Markup Language).
Abra o painel de administração.
Clique no menu suspenso Nome de usuário [1]. Em seguida, clique no link Admin [2].
Abrir catálogo
Clique na aba Catálogos [1].
Em seguida, clique no link do nome do catálogo [2].
Personalizações abertas
No menu suspenso Configurações do catálogo, a página Informações do catálogo é exibida por padrão. Clique no link Personalizações .
Copiar tema padrão
Com o Editor de Temas da Loja ativado , clique no botão Copiar Tema Padrão [1].
Alternativamente, no bloco do tema padrão, você pode clicar no botão Fazer uma cópia [2].
Abrir editor
No bloco de cópia, clique no botão Editar tema .
Editor Geral Aberto
Para fazer personalizações gerais na loja virtual, clique no link Geral .
Selecionar imagens
Para selecionar uma imagem para o cabeçalho e rodapé, clique no bloco Imagem do cabeçalho [1].
Para selecionar uma imagem de logotipo para os blocos de listagem, descrições, notificações por e-mail, formulários de inscrição e no painel do aluno, clique no bloco Logotipo [2].
Para selecionar uma imagem para as abas e favoritos do navegador, clique no bloco Favicon [3].
Selecione as cores
Para selecionar uma cor primária do tema, insira um valor hexadecimal no campo Cor Primária [1].
Para selecionar uma cor de comprimido de filtro, insira um valor hexadecimal no campo Cor do comprimido de filtro [2].
Para usar o seletor de cores, clique em um ícone de cor [3].
Na janela de seleção de cores, selecione uma cor usando o misturador de cores ou as predefinições de cores [4]. Para salvar suas seleções, clique no botão Aplicar [5].
Ver detalhes de acessibilidade
Ao selecionar a cor principal do tema, a janela de seleção de cores exibe detalhes de acessibilidade.
Ao selecionar ou editar a cor primária, a seção Taxa de contraste atualiza automaticamente a taxa de contraste atual [1]. A taxa mínima necessária para acessibilidade é 4,5:1.
Os rótulos são exibidos para textos normais, grandes e gráficos com base nas cores de fundo e de primeiro plano selecionadas. O texto que não atende aos requisitos mínimos de contraste exibe um rótulo "Reprovado" [2]. O texto que atende aos requisitos mínimos de contraste exibe um rótulo "Aprovado" [3].
Para personalizar o cabeçalho e o rodapé do catálogo, clique no link Cabeçalho e Rodapé .
Por padrão, o cabeçalho é exibido em um fundo branco. Para exibir o cabeçalho em um fundo escuro, clique no botão de opção Inverter [1].
Para personalizar a cor do cabeçalho ou rodapé, clique no botão de opção Personalizado [2].
Por padrão, o cabeçalho tem a mesma largura que o conteúdo abaixo dele. Para estender a largura do cabeçalho para preencher toda a janela, clique no botão de opção Largura Total [3].
Por padrão, não há imagem de capa na loja. Para adicionar uma imagem, clique na opção Imagem de capa em [4]. Em seguida, para selecionar uma imagem dos arquivos do seu computador, clique no bloco Carregar imagem [5].
Quando o cabeçalho é exibido em largura total, uma cor de fundo é exibida atrás da imagem. Para selecionar uma cor de fundo, insira um valor hexadecimal no campo Cor de fundo [6].
Para exibir a imagem de capa em largura total, clique na opção Ativar ajuste à largura total em [7].
Por padrão, as linhas separadoras acima e abaixo do painel de listagens são definidas como finas. Para selecionar linhas separadoras mais largas, clique no botão de opção Estendido [8].
Para selecionar uma cor para os separadores, insira um valor hexadecimal no campo Cor do Separador [9].
Para usar o seletor de cores para escolher cores para o fundo ou separadores, clique em um ícone de Cor [10]. Em seguida, escolha uma cor na janela do seletor de cores e clique no botão Aplicar [11].
Para adicionar conteúdo personalizado ao rodapé, clique no botão Adicionar conteúdo [12].
Para aplicar as alterações, clique no botão Salvar [13].
Editar nome
Para inserir um novo nome para o tema, clique no ícone Editar .
Pré-visualizar e salvar
A janela de pré-visualização é exibida.
Para visualizar outras opções de personalização, clique no botão Voltar [1].
Para fechar a janela de edição sem salvar as alterações, clique no botão Fechar Editor de Temas [2].
Para salvar suas alterações, clique no botão Salvar [3].
Ver botão Editar na página de detalhes do anúncio
Um botão "Editar" na página de detalhes do anúncio permite que os administradores do Catálogo e do Subcatálogo gerenciem os anúncios diretamente da Loja Virtual Moderna.
Aplicar tema na loja
Para ativar o tema personalizado na Loja Virtual, clique no ícone Aplicar Tema .
Excluir tema
Para excluir um tema, clique no ícone Excluir [1].
Um tema que foi aplicado não pode ser excluído. Para aplicar um tema diferente, clique no ícone Aplicar [2] e, em seguida, exclua o tema.
Observação: um tema só pode ser excluído pelo usuário que o criou.
Configurações da loja
O design da Vitrine Moderna pode ser gerenciado centralmente no nível do catálogo principal. Essa configuração se aplica automaticamente a todos os subcatálogos associados, incluindo elementos de marca herdados, como logotipos, esquemas de cores e favicons, e não pode ser personalizada no nível do subcatálogo.
Se o catálogo principal for alterado para o design da Loja Virtual Legada, os subcatálogos poderão ativar a Loja Virtual Moderna de forma independente e gerenciar suas configurações de marca, proporcionando maior flexibilidade.
Para alterar as configurações da Loja virtual, no menu suspenso Configurações do catálogo e clique na guia Loja virtual [1].
Para ativar a Loja Legada, clique na opção Usar Loja Legada [2].
Pré-visualização da fachada moderna
Para pré-visualizar a vitrine moderna, a opção Usar vitrine legada deve ser ativada [1].
Para pré-visualizar a vitrine moderna, clique no botão Pré-visualizar Vitrine Moderna [2].
