Personalizar Vitrine | Cartify
Personalizando a Vitrine
Sua vitrine é a uma das partes mais importantes da sua loja. É através dela que seus clientes entram em sua loja, conhecem seus produtos ou serviços, podem ver as fotos de produtos e realizar a compra. Uma vitrine atraente e bem organizada é a chave para seu cliente se sentir à vontade para permanecer em sua loja e realizar uma compra.
Sua vitrine CARTIFY já vem pré-configurada para facilitar a personalização. Nela já estão incluídos os principais elementos de uma loja virtual, como: carrossel de imagens (banner de slides), lista de produtos com botão comprar, categorias de produtos (com imagens), imagem em destaque (promoções, novos produtos, etc), depoimentos e formulário de contato. Todos os elementos podem ser alterados e você ainda conta com dezenas de outros elementos que podem ser incluídos em sua vitrine.
Banner de slides (imagens)
Sua loja é criada com 3 banners de exemplo que você pode alterar e até mesmo excluir.
Já está configurado para mostrar 4 produtos por linha.
Pode ser usada para destacar promoções, campanhas ou novos produtos.
Enfatiza a qualidade da loja e de seus produtos, mostrando comentários de quem já comprou na loja.
Permite que seus clientes possam encaminhar mensagens através de seu e-mail.
Como transformar sua vitrine padrão em uma vitrine incrível!
Assista o vídeo Criando uma loja de lingerie com Cartify
Entendendo o Carrossel de Imagens (banner de slides)
Slides: mostra a lista de slides. Você pode arrastá-los e soltá-los para alterar sua posição, duplicar, excluir ou adicionar um slide. Quando você clica em um único slide, suas opções se abrem. Cada slide possui as configurações de plano de fundo, conteúdo e estilo.
Cor: define a cor de fundo do slide
Imagem: escolha uma imagem da biblioteca de mídia
Se uma imagem for escolhida como plano de fundo do slide, opções adicionais serão exibidas:
Tamanho: escolha se deseja exibir o plano de fundo como capa ou automático. A imagem automática é para situações em que você tem os tamanhos exatos necessários e também onde deseja que toda a imagem apareça no controle deslizante. O tamanho da capa é para imagens mais abstratas e atmosféricas, onde a exibição de toda a imagem é menos importante.
Ken Burns Effect: Escolha Sim para ativar esse popular efeito de zoom na imagem de fundo. Observe que esse efeito só aparece quando mais de um slide está definido.
Sobreposição de fundo: escolha SIM para definir uma sobreposição de fundo que aparecerá na parte superior da imagem. Se definido como SIM, você poderá escolher a cor da sobreposição.
Título e descrição: insira o título e a descrição do slide
Texto do botão: defina o texto para o botão
Link: adicione um URL ao qual o slide ou o botão vinculará
Aplicar link ativado: se um link estiver definido, esta opção será exibida. Escolha se o link se aplica somente ao botão ou a todo o slide
O estilo de guias individuais está DESLIGADO por padrão, dependendo dos estilos globais definidos na guia Estilo do widget. Se você deseja substituir os estilos globais de slides, ative a opção Personalizada. Isso permitirá que você defina estilos personalizados para esse slide individual.
Os estilos personalizados para slides individuais são:
Posição Horizontal: Posicione o conteúdo horizontalmente: Esquerda, direita ou centro
Posição vertical: posicione o conteúdo na parte superior, central ou inferior
Alinhamento do texto: alinha o texto à esquerda, central ou direita
Cor do conteúdo: escolha a cor do conteúdo
Altura: defina a altura exata do slide em PX, VH ou EM
Navegação: escolha exibir setas, pontos, ambos ou nenhum
Pausar ao passar o mouse: faça o slide pausar quando o mouse passar sobre ele
Reprodução automática: faça com que os slides girem automaticamente, de acordo com a velocidade definida
Velocidade de reprodução automática: defina o tempo necessário para o slide começar a girar
Loop infinito: faça os slides girarem em um loop infinito e sem parar
Direção: Escolha uma direção para o controle deslizante, como esquerda ou direita
Transição: defina a transição dos slides como slide ou desbotamento
Velocidade de transição: defina o tempo necessário para os slides girarem
Animação de conteúdo: defina o efeito de animação da exibição do conteúdo quando o slide for exibido: Nenhum, Baixo, Cima, Direita, Esquerda ou Zoom.
Largura do conteúdo: defina a largura do conteúdo dentro do slide
Preenchimento: defina o espaçamento interno entre a borda do conteúdo e a borda do slide
Posição horizontal: defina a posição do conteúdo como direita, esquerda e central
Posição vertical: defina a posição do conteúdo como superior, central ou inferior
Alinhamento do texto: alinha o texto à direita, esquerda ou centro
Sombra de texto: adicione uma sombra e desfoque ao texto
Nota: Se um slide individual tiver estilos personalizados definidos, esses estilos globais não terão efeito sobre esse slide.
Espaçamento: defina o espaçamento entre o título e a descrição
Cor do texto: define a cor do título
Tipografia: defina a tipografia do título
Espaçamento: defina o espaçamento entre a descrição e o botão
Cor do texto: defina a cor da descrição
Tipografia: defina a tipografia da descrição
Tamanho: defina o tamanho do botão, de extra pequeno a extra grande
Cor do texto: defina a cor do texto do botão
Tipografia: defina a tipografia do botão
Largura da borda: defina a largura da borda do botão
Raio da borda: defina o raio da borda para controlar a redondeza dos cantos
Estado normal / estado de foco
Cor do texto – Defina a cor do texto
Cor de fundo – defina a cor de fundo do botão
Cor da borda – defina a cor da borda do botão
Posição das setas – defina a posição das setas dentro ou fora do controle deslizante
Tamanho das setas – defina o tamanho exato das setas
Cor das setas – defina a cor das setas
Posição dos pontos – Defina a posição dos pontos dentro ou fora do controle deslizante
Tamanho dos pontos – defina o tamanho exato dos pontos
Cor dos pontos – defina a cor dos pontos
Assista o vídeo de configuração do carrossel de imagens
Entendendo o Mostrador de Produtos
Exiba produtos em qualquer página do seu site, definindo seu conteúdo e estilo com o widget Produtos Cartify
Colunas: defina o número exato de colunas a serem exibidas, de 1 a 12
Linhas: defina o número máximo de linhas a serem exibidas
Paginação: selecione Sim para mostrar Paginação ou Não para ocultá-la
Permitir pedido: selecione Sim para dar aos usuários a opção de classificar os produtos por padrão, popularidade, classificação, mais recentes, preço: baixo para alto ou preço: alto para baixo
Mostrar contagem de resultados: selecione Sim para mostrar o número de resultados deste arquivo ou Não para ocultá-lo
Origem: selecione a fonte de resultados, escolhendo entre Consulta atual, Produtos mais recentes, Venda, Destaque ou Seleção manual. Dependendo da fonte que você escolheu para a consulta, você terá opções que permitem filtrar os resultados.
Incluir por: termo e use Pesquisar e selecionar para escolher quais usar
Ordenar por: defina a ordem em que os produtos serão exibidos. As opções incluem: título, preço, popularidade, classificação, aleatório e ordem dos menus.
Ordem: DESC (decrescente) ou ASC (crescente)
Nota: Escolher Relacionado como Origem e Categoria como Termo Incluir por exibirá postagens relacionadas à categoria atribuída à postagem atual que está sendo exibida. Portanto, se o usuário estiver visualizando uma postagem na categoria Viagem, por exemplo, a página mostrará Postagens relacionadas que também estão na categoria Viagem. Se a postagem exibida no momento tiver várias categorias atribuídas, as postagens relacionadas receberão as postagens da PRIMEIRA categoria (em ordem alfabética) atribuída à postagem.
Excluir por: postagem atual, seleção manual, termo e use as opções Pesquisar e Selecionar manual ou Termo
Ordenar por: defina a ordem em que as postagens serão exibidas. As opções incluem: título, preço, popularidade, classificação, aleatório e ordem dos menus.
Intervalo de colunas: defina o intervalo exato entre as colunas
Intervalo de linhas: defina o intervalo exato entre as linhas
Alinhamento: alinha os dados dos produtos à esquerda, direita ou centro
Tipo de borda: selecione o tipo de borda, escolhendo entre nenhuma, sólida, dupla, pontilhada, tracejada ou ranhurada
Raio da borda: defina o raio para controlar a redondeza do canto da borda
Espaçamento: ajuste a quantidade de espaço entre as imagens e seus dados
Cor: Escolha a cor do título do produto
Tipografia: defina as opções de tipografia para o texto do título
Espaçamento: ajuste a quantidade de espaço após o título
Cor da estrela: escolha a cor de uma estrela preenchida
Empty Star Color: escolha a cor de uma estrela vazia
Tamanho da estrela: defina o tamanho das estrelas
Espaçamento: ajuste a quantidade de espaço após as Estrelas de classificação
Cor: Escolha a cor do produto Preço
Tipografia: defina as opções de tipografia para o produto Preço
Cor: escolha a cor do preço normal do produto
Tipografia: defina as opções de tipografia para o preço normal do produto
Normal Flutuar
As seguintes opções podem ser definidas independentemente para os estados normal e de foco.
Cor do texto: escolha a cor do texto do botão do produto
Cor de fundo: escolha a cor de fundo do botão do produto
Cor da borda: escolha a cor da borda do botão do produto
Tipografia: defina as opções de tipografia para o Texto do botão do produto
Raio da borda: controle da redondeza do canto da borda do botão
Preenchimento de texto: defina o preenchimento dentro do botão
Espaçamento: ajuste a quantidade de espaço acima dos botões
Cor: escolha a cor do texto do carrinho de compras, abaixo dos botões
Tipografia: defina as opções de tipografia para o texto Ver carrinho
Largura da borda: controle a espessura da borda ao redor da caixa do produto
Raio da borda: redondeza do canto de controle da caixa de produtos
Preenchimento: altere o preenchimento na caixa de produtos
Sombra da caixa: ajuste as opções de sombra da caixa
Cor de fundo: escolha a cor de fundo da caixa de produtos
Cor da borda: escolha a cor da borda da caixa de produtos
Venda em Flash
Flash de venda: mostrar ou ocultar
Cor do texto: escolha a cor do texto do Flash de venda
Cor de fundo: escolha a cor de fundo do Flash de venda
Tipografia: defina as opções de tipografia para o texto Flash de venda
Raio da borda: controle a redondeza dos cantos do Flash de venda
Largura: controle a espessura da borda do Flash de venda
Altura: defina a altura do Flash de venda
Posição: defina a posição do Flash de venda, Esquerda ou Direita, da caixa de produtos
Distância: defina a distância do Flash de venda na parte superior da caixa de produtos
Entendendo a Chamada para Ação
O Widget Chamada para Ação é uma ferramenta para criar caixas bonitas que combinam uma imagem, algum texto e um botão. O widget usa animações e efeitos para criar interações do usuário, que aparecem quando o usuário passa o mouse sobre a caixa.
Skin: Escolha a skin Classic ou a capa
Layout: (mostrado apenas na capa Clássica) Alinhe a imagem à esquerda, direita ou em cima da imagem
Se a opção Classic Skin for escolhida, as seguintes opções estarão disponíveis:
Elemento gráfico: escolha entre Nenhum, Imagem ou Ícone para exibir um elemento gráfico acima do título da frase de chamariz
Se Imagem for selecionada como o elemento gráfico:
Escolher imagem: selecione ou faça upload de uma imagem
Tamanho da imagem: defina o tamanho da imagem, da miniatura para a íntegra, ou defina um tamanho personalizado.
Se o ícone estiver selecionado como o elemento gráfico:
Ícone: selecione um ícone na biblioteca FontAwesome
Exibir: escolha a visualização padrão dos ícones ou selecione Empilhados ou Emoldurados.
Título e descrição: escolha o título e a descrição que aparecem na frente da caixa flip
Tag HTML do título: defina a tag HTML do título como H1- H6, Div ou Span
Texto do botão: Digite o texto a ser exibido no botão
Link: insira o URL para o link do botão. Clique na engrenagem Opções de link para adicionar rel = nofollow ao link ou abrir o link em uma nova janela.
Título: Digite o texto a ser exibido na faixa de opções.
Min. Altura – defina a altura mínima de toda a caixa
Alinhamento – Alinhe o conteúdo à esquerda, centro ou direita da caixa
Posição vertical – Alinhe o conteúdo na parte superior, central ou inferior da caixa
Preenchimento – Defina o preenchimento para o conteúdo
Min. Largura: defina a largura mínima para a imagem
Min. Altura: defina a altura mínima para a imagem
Tipografia: defina as opções de tipografia para o título
Espaçamento: defina a quantidade de espaço entre o título e a descrição
Espaçamento: defina a quantidade de espaço entre a descrição e o botão
Cor do plano de fundo: escolha a cor do plano de fundo
Cor do título: escolha a cor do título
Cor da descrição: escolha a cor da descrição
Cor do botão: Escolha a cor do botão
Tamanho: selecione o tamanho do botão, de Extra Pequeno a Extra Grande
Cor do texto: escolha a cor do texto do botão
Cor do plano de fundo: escolha a cor do plano de fundo do botão
Cor da borda: escolha a cor da borda do botão
Largura da borda: defina a largura da borda
Cor do plano de fundo: escolha a cor do plano de fundo da fita
Cor do texto: escolha a cor do texto da faixa de opções
Distância: mova o controle deslizante entre 0 e 50 para definir a distância da fita.
Tipografia: defina as opções de tipografia para o título da faixa de opções
Sombra da caixa: defina as configurações de sombra da caixa para a faixa de opções
Animação em sequência: escolha se a animação para os elementos de texto aparece em sequência ou de uma só vez
Animação suspensa: escolha a animação suspensa da imagem: aumente ou diminua o zoom ou mova para a esquerda, direita, para cima ou para baixo
Os seguintes itens podem ser configurados independentemente para os estados Normal e Hover
Cor da sobreposição: escolha a cor da sobreposição para a imagem
Filtros CSS: defina desfoque, brilho, contraste e saturação para a imagem
Modo de mesclagem: (Para o estado Normal) Defina um modo de mesclagem
Duração da transição (ms): (Para o estado de foco) Defina a duração do efeito de foco
Se Escolher capa for escolhido, as seguintes opções estarão disponíveis:
Min. Altura: defina a altura mínima de toda a caixa
Alinhamento: alinhe o conteúdo à esquerda, centro ou direita da caixa
Posição vertical: alinhe o conteúdo na parte superior, central ou inferior da caixa
Preenchimento: defina o preenchimento para o conteúdo
Tipografia: defina as opções de tipografia para o texto do botão
Animação suspensa: escolha a animação suspensa da imagem: aumentar ou diminuir o zoom ou mover para a esquerda, direita, para cima ou para baixo
Duração da animação: defina a quantidade de tempo que a animação leva para concluir
Cor da sobreposição: escolha a cor da sobreposição para normal e pairar
Modo de mesclagem: (Para o estado Normal) Defina um modo de mesclagem para a imagem
Entendendo a seção Depoimentos
você pode adicionar e estilizar depoimentos com facilidade e sem a necessidade de plug-ins de terceiros.
Conteúdo – Digite o texto do depoimento
Escolha imagem – faça o upload da imagem do autor depoimento
Nome – digite o nome do autor do depoimento
Trabalho – digite o cargo do autor do depoimento
Link para – Defina um link para um URL, arquivo de mídia ou nenhum link
Posição da imagem – defina a posição da imagem em relação ao conteúdo de depoimento. As opções incluem: Fora ou Superior
Alinhamento – Alinhe o depoimento à esquerda, direita ou centro
Cor do texto – Escolha a cor do conteúdo.
Tipografia – Altere a tipografia do conteúdo.
Tamanho da imagem – Dimensione o tamanho da imagem para cima ou para baixo
Tipo de borda – selecione o tipo de borda. As opções incluem nenhuma, sólida, dupla, pontilhada, tracejada ou ranhurada
Raio da borda – defina o raio da borda para controlar a redondeza dos cantos
Cor do texto – Escolha a cor do nome
Tipografia – Altere a tipografia do nome
Cor do texto – Escolha a cor do trabalho
Tipografia – Altere a tipografia do trabalho
Conhecendo os elementos visuais da loja CARTIFY
Tudo é personalizável!
Barra lateral de ferramentas (widgets)
O editor de páginas conta com a facilidade de arrastar-e-soltar os elementos. Basta escolher a ferramenta que deseja inserir em sua página e arrastá-la para a área desejada. Simples e rápido.
São dezenas de ferramentas disponíveis: carrossel de imagens (banner de slides), depoimentos, formulários, títulos, galeria de imagens/fotos, ícones, listas de preços, botões de ação, botões de redes sociais, mostrar produtos da loja, produtos visitados, carrinho de compras, entre outros.
Basta escolher a ferramenta, arrastar e soltar em sua página.
Insere uma imagem. A imagem se ajustará ao espaço definido para ela em sua página.
Insere um espaço para textos na página.
Insere um botão clicável, que direciona o visitante a uma ação ou página, como o carrinho, por exemplo.
Mude os blocos de posição
É muito fácil organizar sua vitrine! Simplesmente clique e arraste os blocos para reposicioná-los de forma diferente.
Exclua os blocos que não precisa
Exclua os blocos clicando no 'X'. Pronto. Se quiser incluí-lo novamente, procure pelo bloco na barra lateral de ferramentas e arraste-o para a posição desejada na página.