Os comandos nesta aba permitem que você defina o estilo das fichas dos produtos que descrevem os produtos na lista.
Uma ficha de produto é feita com alguns elementos, todos sendo configurados de acordo com os parâmetros indicados na janela Carrinho de compras | Configurações do Produto:
| • | Detalhes: indica a categoria, modelos do produto, disponibilidade, preço, ICMS e a quantidade. |
| • | Botão: contém o link para adicionar o produto ao carrinho de compras. |
Se elementos tais como a capa ou modelos do produto não tiverem sido especificados, essas informações não serão incluídas na ficha.
Se estiver trabalhando com a edição Pro, tanto o ícone para a Quantidade aproximada quanto o número que indica a Quantidade disponível serão exibidos na ficha do produto.
Primeiro você precisa indicar o layout das fichas de produto, escolhendo as opções de exibição na aba Configurações das fichas:
|
Capa à esquerda, título e conteúdo à direita
|
|
Título e conteúdo à esquerda, capa à direita
|
|
Capa no alto, título e conteúdo embaixo
|
|
Título e conteúdo no alto, capa embaixo
|
|
Qualquer que seja o tipo que você escolher, o nome e/ou imagem que possa ser incluído na ficha serão automaticamente associados ao link, criado com a opção Link (ex Página do Produto) na janela Configurações do Produto | Geral.
|
Quando tiver decidido no tipo de exibição, poderá trabalhar nas seguintes opções:
| ▪ | Fichas por fileira: quantas fichas de produtos em uma única linha. |
| ▪ | Altura das fichas: a altura em pixels das fichas de produtos. As fotos dos produtos serão redimensionadas automaticamente de acordo com a altura fornecida. Se as descrições dos produtos forem longas demais para serem exibidas por completo, será adicionada uma barra de rolagem. Se as descrições do produto forem longas demais para serem exibidas por completo, será adicionada uma barra de rolagem. |
| ▪ | Margem externa: configura o valor em pixels da distância a ser mantida entre as fichas. |
O Estilo da Ficha também pode ser definido usando as seguintes opções:
| ▪ | Tamanho da capa (%): define a largura da imagem de capa em relação ao conteúdo (se ficará à esquerda ou à direita) ou em relação à altura da ficha (se ficará no alto, acima ou abaixo do nome do produto). |
| ▪ | Margem da capa / Margem do conteúdo: essas opções indicam quanto espaço (em pixels) deverão ser deixados entre a imagem de capa / conteúdo (nome e descrição) e as bordas da ficha. |
Quando tiver definido as opções acima, poderá então configurar o estilo gráfico dos diversos elementos nas fichas. Selecione o Elemento em que deseja trabalhar para poder ver as opções disponíveis:
| ▪ | Visível: o elemento pode ser visível ou invisível. Não fica disponível para Plano de fundo nem Capa. se o elemento Detalhes for selecionado, você poderá especificar se informações tais como Categoria, Disponibilidade e Preço deverão ser exibidas ou não. |
| ▪ | Fonte: especifica a fonte, tamanho e estilo do texo para o Nome do produto, a Descrição, os Detalhes e o Botão. O menu de lista suspensa mostra o comando para aplicar as Fonte padrão (conforme definido pelo estilo do item Texto da Página na janela Estilo de texto), a lista de fontes seguras (aquelas que estão presentes em todos os dispositivos e não precisam ser publicadas) e todas as fontes Google e fontes web adicionadas na janela Adicionar fontes web, que é aberta pelo comando Outros tipos de fonte. |
| ▪ | Cor do texto: especifica a cor a ser usada para o texto do nome do Nome do produto, a Descrição, os Detalhes e o Botão. Se você selecionar o elemento Detalhes, a cor do texto também será usada para a linha sob Descrição. |
| ▪ | Cor do fundo: especifica a cor de fundo de Plano de fundo da ficha e do Botão. |
| ▪ | Espessura: especifica a largura das bordas de Plano de fundo da ficha e do Botão. |
| ▪ | Cor: especifica a cor das bordas de Plano de fundo da ficha e do Botão. |
| ▪ | Cantos: fornece o grau de chanfro dos cantos de Plano de fundo e do Botão. |
| ▪ | Sombra: aplica uma sombra em Plano de fundo da ficha, configurando sua cor, posição, difusão e tamanho. |
| ▪ | Adaptar tamanho à ficha: se selecionado, a imagem de capa ocupará toda a área da ficha, tanto na largura quanto na altura. Se as proporções da imagem não corresponderem, ela será centralizada e recortada. Se esta opção não for selecionada, a imagem de capa será adaptada ou à largura ou à altura do espaço disponível. |
| ▪ | Exibir campo 'Quantidade': exibe um campo de quantidade na ficha do produto para que o consumidor possa indicar quantos itens de um produto ele deseja adicionar ao seu carrinho de compras. |
| ▪ |  Exibir disponbilidade: exibe tanto um ícone para Quantidade aproximada quanto o número que indica a Quantidade disponível na ficha do produto. |
|
Se você habilitar a opção Exibir disponbilidade, e houver pelo menos um produto que tenha este tipo de disponibilidade exibida, então a página que contém o Objeto Lista de Produtos deverá ter uma extensão .PHP: use a opção Extensão do arquivo na janela Propriedades da Página | Avançadas para fazer isto.
|
| ▪ | Exibir preço: exibe o preço do produto, com ou sem impostos, na ficha do produto. |
| ▪ | Tipo: especifique se deseja usar um Texto ou uma Imagem como Botão. No primeiro caso, você pode usar as opções para definir o estilo do texto do link. No segundo caso, você precisa usar o campo apropriado para importar o Arquivo de imagem a ser usado. |
| ▪ | Margens: configura o valor (em pixels) da margem entre o texto e as bordas do Botão. |
Para a edição Pro, você pode adicionar Medalhas:
| ▪ | Tipo de medalha: você pode definir as medalhas que deseja adicionar às fichas dos produtos para destacar um "Novo Produto" ou uma "Produto com desconto". |
| ▪ | Arquivo de imagem: você pode especificar a imagem que será usada como medalha. Clique na seta no campo para selecionar uma imagem da biblioteca ou clique no botão  para importar um arquivo (no formato .JPG, .GIF ou .PNG) com a imagem que deseja usar. |
| ▪ | Alinhamento: você pode especificar o alinhamento da medalha na ficha do produto. |
| ▪ | Largura (%): você pode especificar a largura da medalha como uma porcentagem do tamanho da ficha do produto. |
Finalmente, você pode usar as opções na seção Opções para definir:
| ▪ | Adicionar o produto sem mostrar o carrinho: when a customer clicks on the Buy button, the product is added to the order, without being automatically redirected to the shopping cart. |
| ▪ | Habilitar Link sobre a imagem: esta opção habilita um link para uma versão ampliada das diversas fotos na ficha do produto. Essas imagens ampliadas são exibidas na options Showbox. Se você tiver criado um link na janela Configurações do Produto | Geral, ele substituirá este link. |
|
Você pode customizar o estilo da Showbox: usando as opções no Passo 2, na janela Janela popup Showbox, você pode definir cores, sombras, opacidade, efeitos de entrada, etc.
|
