DocumentaçãoCommercePage Builder

[Somente PaaS]{class="badge informative" title="Aplica-se somente a projetos do Adobe Commerce na nuvem (infraestrutura do PaaS gerenciada pela Adobe) e a projetos locais."}

Page Builder Apresentação parte 3: conteúdo do catálogo

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Iniciante
  • Intermediário
  • Usuário

Este exercício demonstra como é fácil adicionar uma lista de produtos a uma página, personalizar páginas de produtos e criar um atributo personalizado que adicione o espaço de trabalho Page Builder a um conjunto de atributos de produto.

Lista de produtos {width="600" modal="regular"}

Este exercício supõe que você tenha concluído Parte 1: Página Simples e Parte 2: Blocos, incluindo os pré-requisitos e os arquivos de exemplo baixados. Siga as três partes deste exercício em ordem.

Parte 1: Adicionar uma lista de produtos

O Page Builder facilita a adição de uma lista de produtos ao estágio. Neste exemplo, a lista de produtos é adicionada diretamente a uma página.

Etapa 1: adicionar uma lista de produtos ao estágio

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

  2. Localize a Página Simples que você criou no primeiro exercício e modificou no segundo, e selecione Edit na coluna Action.

  3. Expanda Seletor de expansão a seção Content e clique em Edit with Page Builder ou dentro da área de visualização de conteúdo.

  4. No painel Page Builder, em Layout, arraste uma Row ​para a parte superior do estágio.

  5. No painel Page Builder, expanda Add Content e arraste um espaço reservado Products para a nova linha.

    Arrastando um espaço reservado de produtos para a linha {width="600" modal="regular"}

Etapa 2: compor a condição

  1. Passe o mouse sobre o contêiner de produtos vazio para exibir a caixa de ferramentas e escolha o ícone Configurações ( Configurações {width="20"} ).

    Caixa de ferramentas Produtos {width="600" modal="regular"}

  2. Para Select Products By, escolha Condition.

  3. Adicione uma condição:

    • Clique no ícone Adicionar ( Adicionar ).

    • Em Product Attribute, escolha Category.

      Escolhendo o atributo de categoria para a condição {width="600" modal="regular"}

    • Conclua a parte Category is… da condição clicando no ícone Mais (…) e depois no ícone Seletor ( Seletor ícone ).

      Definindo a condição {width="600" modal="regular"}

    • Na árvore de categorias, vá para a categoria Mulheres > Primeiros e marque a caixa de seleção Árvores.

      Escolhendo a categoria na árvore {width="600" modal="regular"}

    • Clique no ícone Marca de seleção ( Ícone Marca de seleção ).

      A ID de categoria correspondente é exibida no campo para concluir a condição.

Etapa 3: Concluir as configurações

  1. Insira o Number of Products to Display.

    Por padrão, a lista exibe cinco produtos.

  2. Conclua as configurações restantes conforme necessário.

    Se necessário, use as descrições de campo no final da página Adicionar conteúdo - Produtos para referência.

  3. Quando terminar, clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

    Lista de produtos no estágio {width="600" modal="regular"}

  4. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar ícone de tela cheia {width="20"} ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

  5. No canto superior direito, clique na seta Save e escolha Save & Close.

Parte 2: Personalizar a página do produto

NOTE
Um usuário administrador deve ter Content permissões para seu escopo de função para ver os botões Edit with Page Builder e poder usar o Page Builder.

Nesta parte do exercício, você aprenderá como é fácil personalizar uma página de produto ao colocar um vídeo abaixo do conjunto de guias na página do produto. O processo para atualizar o conteúdo da página categoria é basicamente o mesmo.

  1. Na barra lateral Admin, vá para Catalog > Products.

  2. Encontre um produto simples que você pode usar para este exemplo e abra-o no modo de edição.

  3. Role para baixo e expanda Seletor de expansão na seção Content.

  4. Ao lado de Description, clique em Edit with Page Builder.

    Conteúdo de descrição do produto {width="600" modal="regular"}

    Se a descrição do produto foi inserida anteriormente sem Page Builder, a descrição atual aparece como HTML em um contêiner de Código HTML. Com o tema Luma, a descrição do produto aparece na guia Detail.

  5. No painel Page Builder, em Layout, arraste um Row ​para o estágio, colocando-o abaixo do contêiner de código de HTML.

    Procure a diretriz vermelha para aparecer quando a linha estiver na posição correta.

    Arrastando uma linha para o estágio {width="600" modal="regular"}

  6. No painel Page Builder, expanda Media e arraste um espaço reservado Video para a nova linha.

    Espaço reservado para vídeo na linha {width="600" modal="regular"}

  7. Passe o mouse sobre o contêiner de vídeo vazio para exibir a caixa de ferramentas e escolha o ícone Configurações ( Configurações {width="20"} ).

    Caixa de ferramentas de vídeo {width="500" modal="regular"}

  8. Insira o Video URL.

    O vídeo pode ser hospedado no YouTube ou no Vimeo. O vídeo deste exemplo pode ser encontrado no YouTube no seguinte URL:

    https://www.youtube.com/watch?v=ZpFrNyD4100

    Editando o vídeo {width="500" modal="regular"}

  9. Insira o Maximum Width em pixels para a exibição do vídeo.

    Se você deixar essa opção em branco, o vídeo preencherá o espaço disponível.

  10. Clique em Save para salvar as configurações e retornar ao espaço de trabalho Page Builder.

    Vídeo no estágio de conteúdo {width="600" modal="regular"}

  11. No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar ícone de tela cheia {width="20"} ).

    Clicar nesse ícone retorna à seção Content ​da página com a visualização exibida.

  12. No canto superior direito, clique na seta Save e escolha Save & Close.

Na loja, o vídeo é exibido abaixo do conjunto de guias. Para ver a aparência da página em um dispositivo móvel, é possível redimensionar a janela.

Vídeo exibido na página do produto {width="600" modal="regular"}

Parabéns! Você concluiu a segunda parte do tutorial Conteúdo do catálogo. Manter o trabalho criado para que você possa consultá-lo posteriormente.

Parte 3: Adicionar atributos personalizados

Use o atributo personalizado Page Builder para adicionar um espaço de trabalho Page Builder totalmente funcional a uma página de produto, que você pode usar para criar conteúdo envolvente. Nesta parte do exercício, você aprenderá a criar um atributo personalizado usando o tipo de entrada Page Builder e aplicá-lo às páginas de produto no catálogo. Para obter mais informações sobre esses atributos, consulte Atributos do produto.

Etapa 1: criar um produto

Para evitar alterações na loja em tempo real, crie um produto usando as propriedades descritas.

  1. Na barra lateral Admin, vá para Catalog > Products.

  2. No canto superior direito, clique em Add Product.

  3. Crie o produto com as seguintes propriedades:

    • ​

      Conjunto de atributos: Default

    • Product Name: Meu produto

    • ​

      SKU: Tutorial

    • ​

      Price: 75.00

    • ​

      Quantity: 100

    • Stock Status: Em Estoque

    • ​

      Weight: 1

    • Categories: Mulheres > Topos > Tees

  4. No canto superior direito, clique na seta Save e escolha Save & Close.

Etapa 2: Criar atributos personalizados

Nesta etapa, você cria dois novos atributos personalizados para mostrar como os tipos de entrada Page Builder e Editor de Texto podem ser usados.

  1. Na barra lateral Admin, vá para Stores > Attributes>Product.

  2. No canto superior direito, clique em Add New Attribute.

  3. Digite um Default Label para o atributo.

    Neste exemplo, use My Page Builder Attribute para o rótulo.

  4. Defina Catalog Input Type for Store Owner como Page Builder.

    Ao criar um atributo personalizado, você pode especificar o editor mais adequado para o aplicativo como Page Builder ou o padrão, WYSIWYG Text Editor.

    Page Builder Tipo de entrada {width="600" modal="regular"}

  5. Expanda Seletor de expansão a seção Advanced Attribute Properties e faça as seguintes configurações:

    • Attribute Code: Insira um código de atributo em caracteres minúsculos, usando hífens em vez de espaços. Neste exemplo, use my_page_builder_attribute.

    • Scope: Aceite o valor padrão, Store View.

    • Default Value: Insira um valor padrão para o atributo.

    • ​

      Unique Value: No

    • ​

      Add to Column Options: No

    • ​

      Use in Filter Options: Yes

  6. No painel Attribute Information ​à esquerda, escolha Storefront Properties ​e defina as seguintes configurações:

    • ​

      Use for Promo Rule Conditions: Yes

    • ​

      Visible on Catalog Pages on Storefront: Yes

    • ​

      Used in Product Listing: Yes

  7. Quando terminar, clique em Save Attribute.

  8. Repita as etapas anteriores para criar um segundo atributo com as mesmas propriedades básicas, mas com o tipo de entrada Editor de texto da seguinte maneira:

    • Default Label: Meu atributo do editor de texto

    • Catalog Input Type for Store Owner: Editor de texto

    • ​

      Código de atributo: my_text_editor_attribute

Etapa 3: atualizar o conjunto de atributos do produto

  1. Na barra lateral Admin, vá para Stores > Attributes>Attribute Set.

    Neste exemplo, você adiciona temporariamente os novos atributos ao conjunto de atributos default. No final deste exercício, remova os atributos do conjunto de atributos para não afetar seu catálogo.

    note note
    NOTE
    Se você não quiser alterar o armazenamento ao vivo, poderá acompanhar sem atualizar o conjunto de atributos.

  2. Localize o conjunto de atributos Default ​na lista e clique duas vezes nele para abri-lo no modo de edição.

  3. Na lista Atributos Não Atribuídos, encontre os novos atributos criados e arraste cada um para a coluna Groups, em Content.

    O local do atributo na coluna Groups determina onde ele aparece na página.

    Novos atributos adicionados ao grupo de conteúdo {width="600" modal="regular"}

  4. Clique em Save para retornar à lista de conjuntos de atributos.

  5. Quando solicitado, clique no link Cache Management na parte superior da página e atualize qualquer cache inválido.

Etapa 4: atualizar o produto

  1. Na barra lateral Admin, vá para Catalog > Products.

  2. Na grade Produtos, localize Meu Produto e abra-o no modo de edição.

  3. Role para baixo e expanda Seletor de expansão na seção Content.

    Na parte superior da seção, há dois atributos padrão para o conteúdo do produto:

    • Descrição curta, que usa o editor padrão do WYSIWYG.
    • Descrição, que exibe a visualização Page Builder.

    Conteúdo do produto {width="600" modal="regular"}

    À medida que você rolar a tela para a metade inferior da seção, há dois atributos que você criou e atribuiu:

    • Meu Page Builder Atributo, que exibe a visualização de Page Builder.
    • Meu Atributo do Editor de Texto, que usa o editor WYSIWYG padrão.

    Edição de conteúdo do produto {width="600" modal="regular"}

  4. No editor do Atributo do Meu Editor de Texto, digite Text Editor Attribute placeholder text.

    • No canto superior direito, clique na seta Save e escolha Save & Close.

  5. Para o Meu atributo do Page Builder, clique em Edit with Page Builder e adicione o texto da descrição:

    • No painel Page Builder, expanda Elements e arraste um Text object para o estágio.

    • Digite Page Builder attribute placeholder text.

    • No canto superior direito do estágio, clique no ícone Fechar Tela cheia ( Fechar ícone de tela cheia {width="20"} ).

      Atributos personalizados com texto de espaço reservado {width="600" modal="regular"}

  6. Role até Description, clique em Edit with Page Builder e adicione o texto desejado usando o mesmo método da etapa anterior.

  7. No canto superior direito da página do produto, clique na seta Save e escolha Save & Close.

  8. Se solicitado, clique no link Cache Management na mensagem na parte superior da página e atualize qualquer cache inválido.

Etapa 5: visualizar o resultado

  1. Navegue até a página de exemplo do produto na vitrine.

    Neste exemplo, o produto pode ser encontrado na navegação superior em Mulheres > Topos > Árvores.

  2. Role para baixo até as informações do Meu atributo do Page Builder.

    A posição dos atributos na página do produto é determinada pelo tema. No tema Luma, os novos atributos estão localizados logo após a descrição do produto.

    Page Builder e atributos do Editor de Texto na loja ​ {width="600" modal="regular"}

Você concluiu o exercício Conteúdo do Catálogo Page Builder. Manter o trabalho criado para que você possa consultá-lo posteriormente.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d