Showcase

Um Showcase é uma secção de layout dividido concebida para apresentar produtos de uma forma mais refinada e editorial. Em vez de apresentar produtos numa grelha tradicional, divide o ecrã em duas áreas distintas: um lado dedicado ao conteúdo (Media) — como um título, subtítulo, descrição e imagem ou conteúdo multimédia — e o outro a uma seleção curada de produtos que os utilizadores podem explorar através de um carrossel.

Outra característica chave deste componente é que pode escolher a posição de ambas as colunas disponíveis nele, simplesmente arrastando e soltando-as, o que lhe permite criar composições atrativas se por exemplo optar por adicionar vários componentes um após o outro.

Este layout é ideal para destacar uma coleção específica, uma campanha sazonal ou um grupo de produtos em destaque que merecem maior presença visual. A combinação de imagens, texto e navegação de produtos cria uma experiência mais imersiva, encorajando os clientes a interagir com o que está a mostrar em vez de simplesmente percorrer uma lista.

Funciona de forma muito semelhante ao componente Product collection, uma vez que ambos partilham várias opções e definições. A diferença chave reside na forma como o conteúdo é estruturado e apresentado: em vez de empilhar tudo verticalmente, o Showcase coloca a sua mensagem e os seus produtos lado a lado, dando a cada um o espaço e a atenção que merecem.

---

Configurações do componente

Ao clicar no nome do componente encontrará o mesmo conjunto de opções gerais que no componente Product collection:

• Coleção
• Limite
• Largura
• Apresentação
• Configurações do carrossel
• Opções de cabeçalho
• Aparência
• Animações

Para além das opções da lista acima, este componente inclui duas adicionais, que são explicadas de seguida:

Espaço esquerdo e direito

Permite adicionar ou remover o espaço esquerdo e direito entre a secção e as extremidades do browser.

Cantos arredondados

Permite definir se os cantos da secção serão arredondados e o tamanho dos mesmos.

Esta opção apenas será visível e estará disponível se a opção Cantos arredondados estiver ativada no painel Definições do tema do Editor Visual.

---

Coluna de Media

O bloco Media é um dos subcomponentes utilizados para apresentar o conteúdo da coleção — como o título, descrição, ligação/botão —, bem como o tipo de conteúdo multimédia que pretende utilizar, que funcionará como fundo decorativo para a coluna.

Tipo

Aqui pode escolher que tipo de elemento multimédia pretende utilizar como fundo da coluna de Media. Dependendo do que selecionar, as opções ficarão disponíveis para que as possa personalizar.

Imagem

Encontrará duas opções para carregar imagens para dispositivos desktop e móveis.

Se apenas carregar a primeira e não utilizar a de dispositivos móveis, esta será utilizada para todos os dispositivos.

Ao utilizar esta opção, outras também ficarão disponíveis para personalizar ainda mais:

• Recortar automaticamente: permite adaptar automaticamente as imagens que carregar às dimensões ideais definidas no código do tema.
• Transição: permite definir uma transição que será aplicada à imagem de fundo quando os utilizadores passarem o cursor dentro da área da coluna.

Incorporar vídeo

Aqui pode copiar e colar o código de incorporação que plataformas como o YouTube e o Vimeo disponibilizam para partilha, comummente conhecido como iframe.

URL de vídeo

Esta opção permite-lhe copiar e colar URLs de plataformas como as mencionadas anteriormente, bem como vídeos alojados em fontes externas como um website ou CDN.

Ao escolher esta opção, as seguintes ficarão disponíveis para personalizar como o vídeo se comportará:

• Controlos: se os controlos do vídeo devem ser apresentados.
• Reprodução automática: se o vídeo deve começar a reproduzir automaticamente.
• Sem som: se o vídeo deve iniciar sem áudio.
• Ciclo: se o vídeo deve reproduzir em ciclo.

Apresentação

Esta opção permite definir como o elemento multimédia se adaptará ao espaço disponível dentro da coluna, e está apenas disponível para Imagem e URL de vídeo.

Ao escolher Cobrir, preencherá toda a área com a maior parte do elemento multimédia. É muito provável que alguns lados do elemento multimédia não sejam visíveis se por exemplo:

• O elemento multimédia tem uma dimensão horizontal e a Proporção é quadrada, portanto, os lados esquerdo e direito não serão visíveis.
• O elemento multimédia tem uma dimensão vertical e a Proporção é horizontal, portanto, os lados superior e inferior não serão visíveis.

Ao utilizar esta opção, encontrará opções para desktop e móvel para escolher a posição vertical e horizontal do elemento multimédia, dando-lhe maior controlo sobre como é apresentado dentro do espaço.

Para o caso de Conter, o elemento multimédia adaptar-se-á tanto vertical como horizontalmente e será visível na sua totalidade.

Proporção

Encontrará duas opções para definir a dimensão da coluna Media em dispositivos desktop e móveis. A altura desta coluna afetará a altura de todo o componente e, portanto, definirá a altura da coluna onde os produtos são apresentados.

Se a altura da coluna Media for inferior à dos produtos, essa coluna terá precedência e definirá a altura de todo o componente.

Opções de conteúdo

Este grupo de opções permite-lhe personalizar o aspeto dos blocos de conteúdo, como título, subtítulo, texto, etc.

Sobreposição

Permite definir a opacidade ou transparência deste elemento, que se posiciona entre o elemento multimédia (ex. imagem) e o conteúdo (ex. título), para criar contraste e melhorar a legibilidade destes últimos.

Cores do conteúdo

Permite escolher o Pacote de cores para a coluna Media, que afetará todos os elementos dentro dela.

Alinhamento e posição

Encontrará opções para dispositivos desktop e móveis para controlar o alinhamento horizontal do conteúdo, bem como a posição vertical, sempre de acordo com a largura e altura da coluna.

---

Blocos de Media

Referir-nos-emos como blocos aos subcomponentes que podem ser adicionados dentro da coluna Media.

Pode encontrar detalhes sobre o que são, como funcionam e o que pode alcançar com eles em este artigo.

---

Produtos

O subcomponente Produtos é simples nas suas definições, oferecendo apenas uma opção para definir o Pacote de cores para a coluna em que os produtos serão apresentados.

Independentemente disso, há algumas considerações sobre o componente Showcase que precisa de ter em conta ao utilizá-lo:

• Os produtos serão sempre apresentados dentro de um Carrossel e as opções para controlar o seu comportamento podem ser encontradas dentro das Configurações do componente.
• Será sempre apresentado um produto de cada vez, principalmente para preservar o design dado o espaço disponível dentro da coluna. Isto também significa que o carrossel estará centrado tanto vertical como horizontalmente dentro dela.