Somente PaaS

Adicionar conteúdo - Produtos

Última atualização: 14 de julho de 2024

Criado para:

  • Iniciante
  • Intermediário
  • Usuário

Use o tipo de conteúdo Produtos para adicionar uma lista de produtos ao Page Builder estágio, usando um layout de grade ou carrossel. Use a ferramenta Adicionar Conteúdo - Bloquear para colocar o bloco no estágio Page Builder e, em seguida, colocar uma lista de produtos no bloco. Ou você pode adicionar a lista de produtos diretamente em uma linha em uma página.

Diretrizes para usar o carrossel de produtos

O carrossel de produtos oferece uma maneira avançada e atraente de exibir seus produtos. Para aproveitar ao máximo o, são recomendadas as seguintes diretrizes:

  • Adicione carrosséis de produtos diretamente a contêineres de largura de página, como linhas, guias ou layouts de uma coluna. O uso de layouts de largura de página garante a melhor exibição responsiva de seus produtos. Page Builder reduz o número de produtos exibidos dependendo da largura da página, não da largura do contêiner.

  • Não adicione um carrossel de produtos a uma coluna estreita. Como mencionado, o Page Builder, por padrão, determina o número de produtos a serem exibidos com base na largura da página, não na largura da coluna.

  • Se você quiser que o carrossel de produtos role continuamente, defina Autoplay e Infinite Loop como Yes. Se a Reprodução Automática estiver definida como Yes, mas o Loop Infinito estiver definido como No, a rolagem automática será interrompida no final da lista de produtos.

  • Defina o Carousel Mode como Continuous para realçar, centralizar e rolar um produto de cada vez dentro do carrossel. Os outros produtos são visíveis na lista, mas transparentes para destacar o produto centralizado.

    Lista de produtos no modo de carrossel contínuo

  • Para exibir e rolar até cinco produtos de cada vez no carrossel, mantenha o Carousel Mode definido como Default.

    Lista de produtos no modo de carrossel padrão

As instruções a seguir mostram como adicionar uma lista de produtos a um bloco. Você pode usar um widget para colocar o bloco em um local específico em qualquer página da sua loja.

NOTE
Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Caixa de ferramentas Produtos

FerramentaÍconeDescrição
Mover Ícone Mover Move o contêiner de produtos e seu conteúdo para outra posição no estágio.
Configurações Ícone de configurações Abre a página Editar Produtos, na qual você pode escolher a lista de produtos e alterar as propriedades do contêiner.
Ocultar Ícone Ocultar Oculta o container de produtos atual e seu conteúdo.
Mostrar Mostrar ícone Mostra o contêiner de produtos ocultos e seu conteúdo.
Duplicar Ícone duplicado Faz uma cópia do container de produtos e de seu conteúdo.
Remover Ícone Remover Exclui o contêiner de produtos e seu conteúdo do estágio.
NOTE
Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Criar um bloco de lista de produtos

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

  2. Clique em Add New Block.

  3. Insira o Block Title e Identifier.

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

  5. 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.

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

    Adicionar tipo de conteúdo de Produtos

Configurar o container da lista de produtos

Passe o mouse sobre o contêiner vazio de Produtos para exibir a caixa de ferramentas e clique no ícone Configurações ( Configurações ).

Caixa de Ferramentas de Produtos

Conclua as Configurações de acordo com as seguintes seções:

Aparência

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

    TipoDescrição
    Grade de produtosExibe os produtos em uma grade que mostra cinco produtos por linha (por padrão), com quantas linhas forem necessárias para exibir o número inserido na configuração Number of Products to Display.
    Carrossel de produtosExibe os produtos em um carrossel (também conhecido como controle deslizante). O carrossel mostra até cinco produtos por slide.

    Alerta de capacidade de resposta: ao selecionar essa aparência, é melhor adicionar o tipo de conteúdo Produtos diretamente a um layout de linha, guia ou uma coluna em que ele seja responsivo, mostrando menos produtos por lado em telas menores. Se você adicioná-lo a tipos de conteúdo mais estreitos do que a largura da página (como uma coluna estreita), o carrossel exibirá mais produtos por slide do que o container permite, independentemente do tamanho da tela.

    Aparência do produto

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

  2. 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.

      Seleção de produto por categoria

      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.

      Selecionando uma categoria de catálogo

    • 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.

      Seleção de produto por SKU

    • 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.

      Seleção de produto por condição

      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.

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

    OpçãoDescrição
    Position (somente para opções de Categoria e SKU)Ao selecionar a opção Categoria, a Posição exibe os produtos na mesma ordem de sua posição no catálogo. Quando você seleciona a opção SKU, a Posição exibe os produtos na mesma ordem que os SKUs na caixa de texto SKUs do produto.
    Newest products firstClassifica os produtos pela data em que foram adicionados ao catálogo, exibindo primeiro os produtos com as datas de entrada mais recentes.
    Oldest products firstClassifica os produtos pela data em que foram adicionados ao catálogo, exibindo primeiro os produtos com as datas de entrada mais antigas.
    Name: A - ZClassifica os produtos em ordem alfabética.
    Name: Z - AClassifica produtos em ordem alfabética inversa.
    SKU: ascendingClassifica produtos por SKU em ordem alfanumérica.
    SKU: descendingClassifica produtos por SKU em ordem alfanumérica inversa.
    Stock: low stock firstClassifica produtos do estoque mais baixo para o mais alto disponível.
    Stock: high stock firstClassifica produtos do estoque mais alto para o mais baixo disponível.
    Price: high to lowClassifica os produtos do preço mais alto ao mais baixo.
    Price: low to highClassifica os produtos do preço mais baixo para o mais alto.

    Opções de classificação de produtos

  4. 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.

    NOTE
    Alguns produtos nas configurações Categoria, SKU ou Condição podem não aparecer na grade de produtos ou no carrossel. Por exemplo, os produtos com deficiência, os produtos marcados como não visíveis, os produtos indisponíveis e os produtos atribuídos a outro site não são exibidos.
    IMPORTANT
    Os preços dos produtos configuráveis, agrupados e agrupados (preço dinâmico) não são definidos no Admin. Portanto, esses produtos não serão exibidos no Preview se forem filtrados por preço. Esses produtos não podem ser solicitados corretamente no Preview se forem solicitados pelo preço.

Configurações do carrossel

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

    OpçãoDescrição
    DefaultPor padrão, o carrossel exibe cinco produtos por slide e reduz esse número com agilidade, conforme necessário.
    ContinuousO carrossel exibe cinco produtos por slide por padrão (com metade de um produto à direita e à esquerda), mas centraliza e rola um produto de cada vez em um loop infinito. Os produtos à direita e à esquerda do produto centralizado ficam esmaecidos para que o produto central fique realçado.

    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.

    Configurações do carrossel

  2. 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).

  3. 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.

    NOTE
    Se você definir Infinite Loop como No e Autoplay como Yes, a reprodução automática será interrompida ao final do número de produtos a serem exibidos.

  4. 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.

  5. 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.

Avançado

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

    OpçãoDescrição
    DefaultAplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
    LeftAlinha a lista ao longo da borda esquerda do contêiner principal, com permissão para qualquer preenchimento especificado.
    CenterAlinha a lista no centro do contêiner pai, com permissão para qualquer preenchimento especificado.
    RightAlinha a lista ao longo da borda direita do contêiner principal, com permissão para qualquer preenchimento especificado.

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

    OpçãoDescrição
    DefaultAplica o estilo de borda padrão especificado pela folha de estilos associada.
    NoneNão fornece nenhuma indicação visível das bordas do contêiner.
    DottedA borda do contêiner aparece como uma linha pontilhada.
    DashedA borda do contêiner aparece como uma linha tracejada.
    SolidA borda do contêiner aparece como uma linha sólida.
    DoubleA borda do contêiner aparece como uma linha dupla.
    GrooveA borda do contêiner é exibida como uma linha com ranhura.
    RidgeA borda do contêiner aparece como uma linha estriada.
    InsetA borda do contêiner aparece como uma linha interna.
    OutsetA borda do contêiner aparece como uma linha de saída.

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

    OpçãoDescrição
    Border ColorEspecifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
    Border WidthInsira o número de pixels para a largura da linha de borda.
    Border RadiusInsira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.

  4. (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.

  5. 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.

    Área de contêinerDescrição
    MarginsA quantidade de espaço em branco aplicada à borda externa de todos os lados do container. Opções: Top / Right / Bottom / Left
    PaddingA quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner. Opções: Top / Right / Bottom / Left