DocumentaciónCommercePage Builder

[Solo PaaS]{class="badge informative" title="Se aplica solo a proyectos de Adobe Commerce en la nube (infraestructura PaaS administrada por Adobe) y a proyectos locales."}

Añadir contenido: recomendaciones de productos

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Use el tipo de contenido Product Recommendations para agregar una unidad de recomendación activa y existente a la Page Builder fase para una página de CMS, un bloque o un bloque dinámico.

NOTE
El tipo de contenido Page Builder Product Recommendations se admite en Adobe Commerce 2.4.4 y versiones posteriores y está disponible en Product Recommendations metapackage versiones 3.0.x o posteriores. Para agregar compatibilidad con Page Builder para Product Recommendations, consulte la información de instalación. Este tipo de contenido no está disponible para Magento Open Source.
NOTE
Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Cuadro de herramientas Recomendaciones de productos

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Mueve el contenedor de recomendación de producto y su contenido a otra posición del escenario.
Configuración
Icono de configuración {width="25"}
Abre la página Editar recomendación de producto, donde puede elegir la unidad de recomendación y cambiar las propiedades del contenedor.
Hide
Ocultar icono {width="25"}
Oculta el contenedor de recomendación de producto actual y su contenido.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de recomendación de producto oculto y su contenido.
Duplicar
Icono duplicado {width="25"}
Crea una copia duplicada del contenedor de recomendación de productos y su contenido.
Eliminar
Quitar icono {width="25"}
Elimina el contenedor de recomendación de producto y su contenido de la fase.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Agregar una unidad de recomendación existente

  1. Asegúrese de que ya ha creado una unidad de recomendación para el tipo de página Page Builder.
NOTE
Solo puede crear unidades de recomendación para el tipo de página Page Builder en la vista de tienda predeterminada.

  1. Abra la página, el bloque o el bloque dinámico en modo de edición.

  2. Expanda la sección Content ​y haga clic en Edit with Page Builder ​o dentro del área de vista previa de contenido para abrir el área de trabajo Page Builder.

  3. En el panel Page Builder bajo Layout, arrastre un marcador de posición Row ​al escenario.

  4. En el panel Page Builder bajo Add Content, arrastre un marcador de posición Product Recommendation ​a la fila.

    Agregando el tipo de contenido de recomendación de producto {width="600" modal="regular"}

  5. Realice una de las siguientes acciones:

    • Haga clic en Edit Product Recommendation.
    • Pase el ratón sobre el contenedor vacío para ver la caja de herramientas y haga clic en el icono Configuración ( icono Configuración ).

    Editar recomendación de producto {width="600" modal="regular"}

  6. En la sección Selection, haga clic en Select.

  7. En la lista de recomendaciones de productos activas, busque la fila con la unidad de recomendación que desee agregar y haga clic en Select en la última columna.

    Recomendación de producto seleccionada {width="600" modal="regular"}

  8. En la esquina superior derecha, haga clic en Add Selected.

    El nombre de la recomendación de producto seleccionada aparece en la sección Selection ​de la página​ Edit Product Recommendation.

  9. Realice los cambios necesarios en la configuración avanzada.

    Editar recomendación de producto {width="600" modal="regular"}

  10. Cuando termine, haga lo siguiente:

    • Si trabaja con una ventana del explorador totalmente maximizada, haga clic en el icono Cerrar pantalla completa ( Icono de cerrar pantalla completa ) en la esquina superior derecha del área de trabajo.

    • Haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

    Cuando vuelva al escenario, las imágenes de marcador de posición del producto aparecerán en el contenedor.

Editar configuración de unidad de recomendación

  1. Pase el ratón sobre el contenedor de la unidad de recomendación para ver la caja de herramientas y haga clic en el icono Configuración ( icono Configuración ).

    Cuadro de herramientas de recomendaciones {width="600" modal="regular"}

  2. Realice los cambios necesarios en la configuración avanzada.

  3. Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Duplicación de una unidad de recomendación

  1. Pase el ratón sobre el contenedor de unidades de recomendación para ver la caja de herramientas y haga clic en el icono Duplicar ( Icono de duplicado ) de la caja de herramientas.

    El duplicado aparece justo debajo del original.

  2. Para mover la unidad de recomendación duplicada a una nueva posición, pase el ratón sobre el contenedor y haga clic en el icono Mover ( Icono Mover ) de la caja de herramientas.

  3. Seleccione y arrastre la unidad de recomendación hasta que aparezca la guía roja en la nueva posición.

    Los bordes superior e inferior de cada contenedor aparecen como líneas discontinuas mientras se mueve la unidad de recomendación.

Quitar una unidad de recomendación de la fase

  1. Pase el ratón sobre el contenedor de la unidad de recomendación y haga clic en el icono Quitar ( Quitar icono ) de la caja de herramientas.

  2. Cuando se le pida que confirme, haga clic en OK.

Configuración avanzada

  1. Para controlar la colocación de la unidad de Product Recommendations en el contenedor principal, elija Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opción Descripción
    Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
    Left Alinea la unidad a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
    Center Alinea la unidad en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
    Right Alinea la unidad a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique.

  2. Establezca el estilo Border que se aplica a los cuatro lados de la unidad Recomendaciones de productos:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opción Descripción
    Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
    None No proporciona ninguna indicación visible de los bordes de la unidad.
    Dotted El borde de la unidad aparece como una línea de puntos.
    Dashed El borde de la unidad aparece como una línea discontinua.
    Solid El borde de la unidad aparece como una línea sólida.
    Double El borde de la unidad aparece como una línea doble.
    Groove El borde de la unidad aparece como una línea ranurada.
    Ridge El borde de la unidad aparece como una línea discontinua.
    Inset El borde de la unidad aparece como una línea de margen.
    Outset El borde de la unidad aparece como una línea de inicio.

  3. Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
    Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
    Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.

  4. (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos a la unidad.

    Separe los distintos nombres de clase con un espacio.

  5. Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el relleno interno de la unidad.

    Introduzca los valores correspondientes en el diagrama.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área del contenedor Descripción
    Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados de la unidad. Opciones: Top / Right / Bottom / Left
    Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados de la unidad. Opciones: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d