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.

Produtos

Já está configurado para mostrar 4 produtos por linha.

Imagem de Destaque

Pode ser usada para destacar promoções, campanhas ou novos produtos.

|

Depoimentos de Clientes

Enfatiza a qualidade da loja e de seus produtos, mostrando comentários de quem já comprou na loja.

Formulário de Contato

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)

Conteúdo
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.
fundo

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.

Conteúdo

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

Estilo

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

Opções de controle deslizante

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.
Estilo
Slides

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.
Título

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

Descrição

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

Botã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

Navegação
Setas; flechas

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

Pontos

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
Conteúdo
Produtos

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

Inquerir

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

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

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.
Ordem: DESC (decrescente) ou ASC (crescente)

Estilo
Produtos

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

Imagem

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

Título

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

Avaliação

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

Preço

Cor: Escolha a cor do produto Preço
Tipografia: defina as opções de tipografia para o produto Preço

Preço regular

Cor: escolha a cor do preço normal do produto
Tipografia: defina as opções de tipografia para o preço normal do produto

Botão

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
Tipo de borda: selecione o tipo de borda, escolhendo entre nenhuma, sólida, dupla, pontilhada, tracejada ou ranhurada
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

Ver carrinho

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

Caixa

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

Normal Flutuar

As seguintes opções podem ser definidas independentemente para os estados normal e de foco.

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.

Conteúdo
Imagem

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:
Conteúdo

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.

Fita

Título: Digite o texto a ser exibido na faixa de opções.

Estilo
Caixa

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

Imagem

Min. Largura: defina a largura mínima para a imagem
Min. Altura: defina a altura mínima para a imagem

Conteúdo

Título

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

Descrição

Tipografia: defina as opções de tipografia para o título
Espaçamento: defina a quantidade de espaço entre a descrição e o botão

Cores

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

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
Raio da borda: defina o raio da borda para controlar a redondeza dos cantos

Fita

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

Efeitos suspensos

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:
Conteúdo

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.

Fita

Título: Digite o texto a ser exibido na faixa de opções.
Estilo
Caixa

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
Conteúdo

Título

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

Cores

Cor do título: escolha a cor do título
Cor do botão: Escolha a cor do botão

Botão

Tamanho: selecione o tamanho do botão, de Extra Pequeno a Extra Grande
Tipografia: defina as opções de tipografia para o texto do botão
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
Raio da borda: defina o raio da borda para controlar a redondeza dos cantos

Fita

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

Efeitos suspensos

Conteúdo

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
Animação em sequência: escolha se a animação para os elementos de texto aparece em sequência ou de uma só vez

fundo

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
Cor da sobreposição: escolha a cor da sobreposição para normal e pairar
Filtros CSS: defina desfoque, brilho, contraste e saturação para a imagem
Modo de mesclagem: (Para o estado Normal) Defina um modo de mesclagem para a imagem
Duração da transição (ms): (Para o estado de foco) Defina a duração do efeito de foco

Entendendo a seção Depoimentos

você pode adicionar e estilizar depoimentos com facilidade e sem a necessidade de plug-ins de terceiros.
Conteúdo
Depoimento

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

Estilo
Conteúdo

Cor do texto – Escolha a cor do conteúdo.
Tipografia – Altere a tipografia do conteúdo.

Imagem

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

Nome

Cor do texto – Escolha a cor do nome
Tipografia – Altere a tipografia do nome

Trabalho

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.

Dezenas de Ferramentas

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.

Imagens

Insere uma imagem. A imagem se ajustará ao espaço definido para ela em sua página.

a

Texto

Insere um espaço para textos na página.

Botão

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.

Mude as cores conforme desejar

Todos os elementos podem ter sua cor alterada. Use o color picker e selecione a cor desejada.