Outros Estilos e Configurações

No Editor do Tema, em Geral >> Personalização Rápida >> Outros Estilos e Configurações, você encontrará opções diversas, que alteram tanto o visual do tema quanto algumas funcionalidades.

Preços sem cache

A opção “Habilitar preços sem cache” serve para habilitar a funcionalidade de “preços sem cache” da Tray, que permitirá a atualização mais rápida de preços após mudança no cadastro de produtos.

Obs: atualmente não recomendamos o uso desta funcionalidade por estar apresentando efeitos colaterais no carregamento de imagens dos produtos com variações na página de detalhes de produto. Tudo funciona, mas as imagens “piscam” por algum momento na troca de variação.

Microdados

Nossos temas contam com microdados de produtos, estruturados de acordo com as especificações Schema.org. Em resumo, microdados são dados estruturados para dar mais informações sobre determinados conteúdos.

No caso de produtos, eles são utilizados para ferramentas de busca, como o Google, mostrarem ofertas de forma especial, os chamados rich snippets (no Google, na aba do Google Shopping). O Google disponibiliza inclusive uma ferramenta para validação de microdados.

Se você entende de microdados, pode utilizar as configurações abaixo para ajeitá-las a seu gosto. Do contrário, recomendamos deixá-las conforme o padrão de fábrica do tema.

• Expor microdados de produto nas listagens: marque para expor os microdados de produtos no formato do Schema.org nas listagens de produtos (padrão: desmarcado).
• Expor microdados de produtos sob-consulta: marque para expor os microdados de produtos sob-consulta (padrão: desmarcado).
• Expor microdados de produtos indisponíveis ou esgotados: marque para expor os microdados de produtos indisponíveis ou esgotados (padrão: desmarcado).
• Expor microdados de cada variação: marque para expor os dados de oferta de cada variação de produto individualmente (padrão: marcado).

Palavras Mais Buscadas e Histórico de Navegação

Os recursos de “Palavras Mais Buscadas” (também chamado de “Nuvem de Tags” em alguns contextos) e de “Histórico de Navegação” são recursos ativáveis pelo painel de “Configurações de Produto” do Painel Administrativo Tray. É lá em que eles são ativados ou desativados, e sua posição é escolhida.

As duas posições disponíveis para esses itens são: “Acima do Rodapé” e “Abaixo do rodapé“.

No Editor do Tema, a única configuração existente é para mostrar ou esconder esses itens. Essa configuração foi criada para o caso de haver alguma falha na desabilitação dos recursos pelo painel da Tray. Assim, o editor permitirá esconder provisoriamente.

Para fazê-lo, acesse: Geral >> Personalização Rápida >> Outros Estilos e Configurações e encontre os campos “Mostrar as Palavras mais Buscadas” e “Mostrar o Histórico de Navegação“.

Tamanho das Imagens

A opção “Tamanhos das Imagens” permite selecionar o tamanho das imagens na listagem de produtos.

Observação: o tamanho “Grande” usará os maiores arquivos de imagens disponíveis, aumentando o peso do site. Por isso, nossa recomendação é que você mantenha selecionada a opção “Imagens Médias” e abra um chamado na Central de Atendimento Tray conforme o padrão abaixo:

Título do Chamado:
Alteração de tamanhos padrão de imagens para a loja [NOME DA LOJA] – [ID DA LOJA]

Texto do Chamado:
Gostaria de solicitar alteração de tamanhos padrão de imagens para a loja [NOME DA LOJA] – [ID DA LOJA]. Os thumbnails “large” (180×180) deverão ficar com 285×285.

---

Para aumentar o tamanho das imagens do “Compre Junto”, pedimos para que você faça a alteração recomendada no outro chamado, e depois abra um novo chamado com o seguinte texto (ou faça os dois pedidos no mesmo chamado):

Título do Chamado:
Alteração de tamanhos das imagens do aplicativo de “Compre Junto” para a loja [NOME DA LOJA] – [ID DA LOJA]

Texto do Chamado:
Gostaria de solicitar alteração de tamanhos das imagens do aplicativo de “Compre Junto” para a loja [NOME DA LOJA] – [ID DA LOJA]. Os thumbnails utilizados deverão ser os thumbnails “large”.

Imagens Retangulares

Para nossos temas, recomendamos que as imagens cadastradas nos produtos sejam quadradas. A plataforma aceita as dimensões máximas de 2.000 por 2.000 pixels e o peso máximo recomendado de 350kb. Com esses requisitos, você estará disponibilizando imagens de tamanho suficiente para as funções de zoom do produto.

Porém, algumas lojas têm preferência pelo uso de imagens retangulares, como lojas de roupas, em que é interessante mostrar o corpo inteiro.

Para isso, disponibilizamos um trecho de código para você colocar no campo de CSS Personalizado, onde a [porcentagem-calculada] é obtido dividindo a altura da imagem original pela largura da imagem original e multiplicando por 100.

.product__image-container {
	padding-top: [porcentagem-calculada]%;
}

Exemplo: se suas imagens de produtos tem 900 x 1600px, você fará o seguinte cálculo:

(1600/900)*100 = 177,77777777777...

O valor que você vai usar deve ser separado por ponto em vez de vírgula, e usar no máximo até 5 casas após a vírgula, arredondando para baixo, ou seja 177.77778

Por fim, o código ficará assim:

.product__image-container {
	padding-top: 177.77778%;
}

Observação: isso também funcionará com imagens horizontais.

Observação: se você usar imagens horizontais ou verticais, em vez de quadradas, será interessante também fazer o procedimento de abertura de chamado mostrado mais acima para solicitar um novo redimensionamento das imagens, mas, em vez de passar as medidas recomendadas, você precisará passar as novas medidas, conforme a nova proporção das imagens.

Para isso, faça uma regra de três, onde:

Imagem Original	Dimensões finais
Largura da imagem Original	285px
Altura da Imagem Original	X

Usando o exemplo anterior, ficaria assim o cálculo:

900x = 285 * 1600
x = 456000 / 900
x = 506.666666...

Nesse caso, você não deve usar casas após a vírgula, e deve arredondar para cima.

Ou seja, no chamado, você vai solicitar o redimensionamento para 285 x 507.

Imagens da Página de Produto

Para saber mais sobre as imagens na página de Detalhes de produto, acesse as informações de Galeria de Imagens e Vídeo aqui na documentação.