Usar uma imagem diferente na listagem e no conteúdo de categorias

Certamente já se questionou como usar uma imagem do tamanho diferente na listagem da categoria e no próprio conteúdos. Ou aplicar acabamentos diferentes. Para evitar possíveis erros na construção da sua loja, nunca use imagens diferentes na listagem do conteúdo e na sua própria página, uma vez que a imagem ajuda ao utilizador verificar se chegou à página pretendida.

Vejamos um exemplo:

No imagem ao lado esquerdo, a foto na listagem do conteúdo normalmente seria do mesmo tamanho  no conteúdo da categoria(ecrã ao lado direito). Mas isso não acontece. Em certas circunstâncias, pretendemos uma imagem diferente, por exemplo do tamanho superior para mostrar algo mais detalhado.

Neste caso, a imagem da categoria não é inserida no campo normalmente previsto para este efeito  - Imagem (Ficheiro ou hiperligação). Deverá inserir a imagem no campo "Descrição" (no caso de um conteúdo tipo "Categoria") ou "Resumo" (no caso de um conteúdo tipo "Página de conteúdo").

Assim, proceda de seguinte forma:

Imagem para a listagem de categorias

1. Abra o edior de texto para o campo "Descrição" ou "Resumo";
2. Insira a imagem através do botão para inserir uma imagem. Não se esqueça preencher os campos para a descrição da imagem;
3. Clique no separador Appearance;
4. Alinhe a imagem à esquerda;
5. Insere a imagem;
6. Depois insira o link, posicionando o cursor na imagem e clicar no botão da hiperligação;
7. Edite o restante do conteúdo;
8. Para definir uma margem entre imagem e texto, edite o estilo, nomeadamente a definição "margin-right"
   style="margin-right: 5px; float: left; width: 150px; height: 100px; border-width: 0px"
9. Guarde o conteúdo;

Imagem para o conteúdo da categoria