Adicionar conteúdo - Produtos

Na barra lateral Admin, vá para Content > Elements>Blocks.

Clique em Add New Block.

Insira o Block Title e Identifier.

Escolha o Store View onde o bloco deve estar disponível.

Role para baixo e clique em Edit with Page Builder ou dentro da área de visualização de conteúdo para abrir o espaço de trabalho Page Builder.

No painel Page Builder, expanda Add Content e arraste um espaço reservado Products para o estágio.

{width="600" modal="regular"}

Para determinar como a lista de produtos é exibida na página, escolha um dos tipos de aparência:

{width="300"}

Se você escolher o carrossel do produto, também deverá configurar as Configurações do carrossel.

Para Select Products By, escolha o método de seleção de produto:

Você pode selecionar seus produtos por categoria, SKU ou condição. Essas opções são mutuamente exclusivas. Por exemplo, você não pode selecionar a opção Categoria, usar o seletor Categoria e alternar para a opção Condição para adicionar algumas condições. Seus produtos são selecionados com base apenas no que você definiu para uma dessas três opções.

• Category - Escolha esta opção para exibir produtos usando uma categoria selecionada.

  {width="500"}

  Quando selecionada, esta opção fornece um seletor Category. Clique na seta e faça drill-down para escolher a categoria de produtos a serem exibidos. Por exemplo, nos dados de amostra Commerce, o detalhamento e a seleção de Mulheres > Topos > Árvores exibem todos os produtos dessa categoria.

  {width="500"}

• SKU - Escolha esta opção para exibir produtos usando uma ou mais SKUs

  Quando selecionada, essa opção fornece uma caixa de texto Product SKUs, onde você deve inserir uma lista separada por vírgulas de SKUs para exibição.

  {width="500"}

• Condition - Escolha esta opção para exibir produtos de acordo com uma ou mais condições definidas.

  Quando selecionada, há ferramentas disponíveis para adicionar condições à seleção de produtos. Por exemplo, você pode selecionar apenas produtos com um Sexo definido como Unisex.

  {width="500"}

  note note
  NOTE
  Selecionar a opção Categoria ou SKU fornece a opção Sort By de Position. Com essa opção de classificação, os produtos aparecem na mesma ordem em que aparecem no catálogo.
  Para a opção Categoria, a classificação por posição exibe os produtos na mesma ordem em que aparecem no catálogo. Para a opção SKU, a classificação por posição exibe os produtos na ordem em que você os insere na caixa de texto Product SKUs.

Para Sort By, escolha a ordem de classificação dos produtos na lista:

{width="300"}

Insira o Number of Products to Display no carrossel ou na grade.

Os valores podem ser de 1 a 999. O padrão é 5 para uma grade e 20 para um carrossel.

Para determinar como os produtos são exibidos no carrossel, escolha a Carousel Mode:

Se você alternar entre esses dois modos, as outras configurações do carrossel serão mantidas, exceto a configuração Infinite Loop, que é sempre definida como Yes no modo Contínuo e o campo é desativado.

{width="600" modal="regular"}

Se necessário, defina a opção Autoplay como Yes.

Quando a reprodução automática está ativada, o carrossel começa a rolar automaticamente quando a página é carregada. Se você deixar a configuração padrão (No), o cliente deverá clicar na navegação do slide (pontos ou setas) para exibir cada slide em sequência.

Se você habilitar este recurso, digite Autoplay Speed para especificar o atraso em milissegundos entre cada slide. O valor padrão é 4000 (4 segundos).

Se necessário, defina a opção Infinite Loop como Yes.

Quando o loop infinito é ativado, a apresentação de slides é reproduzida indefinidamente enquanto a página está aberta. Se você sair da configuração padrão (No), a apresentação de slides será reproduzida apenas uma vez.

Se necessário, defina a opção Show Arrows como Yes.

Quando esta opção está habilitada, cada slide inclui as setas de navegação próximo e anterior nos lados esquerdo e direito. Se você deixar a configuração padrão (No), os slides não exibirão setas de navegação.

Se necessário, defina a opção Show Dots como No.

Quando definido para a configuração padrão (Yes), os pontos de navegação são exibidos na parte inferior do controle deslizante do carrossel. Se você desativar essa configuração, o controle deslizante do carrossel não exibirá pontos de navegação.

Para controlar o posicionamento da lista Produtos no contêiner pai, escolha a Alignment:

Defina o estilo Border que é aplicado a todos os quatro lados do contêiner Produtos:

Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner.

Separe vários nomes de classe com um espaço.

Insira valores, em pixels, para que Margins and Padding determine as margens externas e o preenchimento interno do contêiner Produtos.

Insira os valores correspondentes no diagrama.