Solo PaaS

Añadir contenido: productos

Última actualización: 14 de julio de 2024
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Utilice el tipo de contenido Productos para agregar una lista de productos a la Page Builder fase, mediante un diseño de cuadrícula o carrusel. Use la herramienta Agregar contenido: bloquear para colocar el bloque en el escenario Page Builder y, a continuación, colocar una lista de productos dentro del bloque. También puede agregar la lista de productos directamente en una fila de una página.

Directrices para utilizar el carrusel de productos

El carrusel de productos ofrece una forma potente y atractiva de mostrar sus productos. Para sacar el máximo partido a esto, se recomiendan las siguientes directrices:

  • Agregue carruseles de productos directamente a los contenedores de ancho de página, como filas, pestañas o diseños de una columna. El uso de diseños de ancho de página garantiza la mejor visualización adaptable de los productos. Page Builder reduce el número de productos mostrados según la anchura de la página, no la anchura del contenedor.

  • No agregue un carrusel de productos a una columna estrecha. Como se mencionó anteriormente, Page Builder, de manera predeterminada, determina el número de productos que se mostrarán en función del ancho de página, no del ancho de columna.

  • Si desea que el carrusel de productos se desplace continuamente, establezca Autoplay y Infinite Loop en Yes. Si la reproducción automática está establecida en Yes pero el bucle infinito está establecido en No, el desplazamiento automático se detiene al final de la lista de productos.

  • Establezca Carousel Mode en Continuous para resaltar, centrar y desplazar un producto a la vez dentro del carrusel. Los demás productos son visibles en la lista, pero transparentes para resaltar el producto centrado.

    Lista de productos en modo de carrusel continuo

  • Para mostrar y desplazar hasta cinco productos a la vez dentro del carrusel, mantenga Carousel Mode establecido en Default.

    Lista de productos en modo de carrusel predeterminado

Las siguientes instrucciones muestran cómo añadir una lista de productos a un bloque. A continuación, puede usar un widget para colocar el bloque en una ubicación específica de cualquier página de su tienda.

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 Productos

HerramientaIconoDescripción
Mover Icono de mover Mueve el contenedor de productos y su contenido a otra posición en el escenario.
Configuración Icono de configuración Abre la página Editar productos, donde puede elegir la lista de productos y cambiar las propiedades del contenedor.
Hide Ocultar icono Oculta el contenedor de productos actual y su contenido.
Mostrar Mostrar icono Muestra el contenedor de productos ocultos y su contenido.
Duplicar Icono duplicado Realiza una copia del contenedor de productos y de su contenido.
Eliminar Quitar icono Elimina el contenedor de productos 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.

Crear un bloque de lista de productos

  1. En la barra lateral Admin, vaya a Content > Elements>Blocks.

  2. Haga clic en Add New Block.

  3. Escriba Block Title y Identifier.

  4. Elija el Store View en el que el bloque va a estar disponible.

  5. Desplácese hacia abajo 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.

  6. En el panel Page Builder, expanda Add Content y arrastre un marcador de posición Products al escenario.

    Agregar tipo de contenido de productos

Configuración del contenedor de lista de productos

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

Cuadro de herramientas de productos

Complete Configuración según las siguientes secciones:

Aspecto

  1. Para determinar cómo se muestra la lista de productos en la página, elija uno de los tipos de aspecto visual:

    TipoDescripción
    Cuadrícula de productoMuestra los productos dentro de una cuadrícula que muestra cinco productos por fila (de forma predeterminada), con tantas filas como sea necesario para mostrar el número introducido en la configuración Number of Products to Display.
    Carrusel de productosMuestra los productos dentro de un carrusel (también conocido como control deslizante). El carrusel muestra hasta cinco productos por diapositiva.

    Alerta de capacidad de respuesta: al seleccionar esta apariencia, es mejor agregar el tipo de contenido Productos directamente a una fila, pestaña o diseño de una columna donde sea adaptable, mostrando menos productos por lado en pantallas más pequeñas. Si lo agrega a tipos de contenido que son más estrechos que el ancho de la página (como una columna estrecha), el carrusel muestra más productos por diapositiva de los que permite el contenedor, independientemente del tamaño de pantalla.

    Apariencia del producto

    Si elige el carrusel de productos, también debe configurar Configuración de carrusel.

  2. Para Select Products By, elija el método de selección de productos:

    Puede seleccionar sus productos por categoría, SKU o condición. Estas opciones se excluyen mutuamente. Por ejemplo, no puede seleccionar la opción Categoría, utilizar el selector Categoría y, a continuación, cambiar a la opción Condición para agregar algunas condiciones. Los productos se seleccionan según lo que haya establecido para una de estas tres opciones.

    • Category: elija esta opción para mostrar los productos usando una categoría seleccionada.

      Selección de productos por categoría

      Cuando se selecciona, esta opción proporciona un selector Category. Haga clic en la flecha y explore en profundidad la categoría de productos que desea mostrar. Por ejemplo, en los datos de ejemplo de Commerce, si explora y selecciona Mujeres > Tops > Tees, se muestran todos los productos de esa categoría.

      Seleccionar una categoría de catálogo

    • SKU: elija esta opción para mostrar los productos usando uno o más SKU

      Cuando se selecciona, esta opción proporciona un cuadro de texto Product SKUs en el que debe introducir una lista de SKU separados por comas para que se muestren.

      Selección de productos por SKU

    • Condition: elija esta opción para mostrar los productos según una o varias condiciones que haya definido.

      Al seleccionarlo, hay herramientas disponibles para añadir condiciones a la selección de productos. Por ejemplo, puede seleccionar solo productos con un Género establecido en Unisex.

      Selección de productos por condición

      NOTE
      Al seleccionar la opción Categoría o SKU, se proporciona la opción Sort By de Position. Con esta opción de ordenación, los productos aparecen en el mismo orden en que aparecen en el catálogo.
      En la opción Categoría, al ordenar por posición, se muestran los productos en el mismo orden en que aparecen en el catálogo. Para la opción SKU, al ordenar por posición, se muestran los productos en el orden en que se escriben en el cuadro de texto Product SKUs.

  3. Para Sort By, elija el criterio de ordenación para los productos de la lista:

    OpciónDescripción
    Position (solo para opciones de categoría y SKU)Al seleccionar la opción Categoría, la posición muestra los productos en el mismo orden que su posición en el catálogo. Al seleccionar la opción SKU, la posición muestra los productos en el mismo orden que los SKU en el cuadro de texto SKU del producto.
    Newest products firstOrdena los productos por la fecha en que se agregaron al catálogo, mostrando primero los productos con las fechas de entrada más recientes.
    Oldest products firstOrdena los productos por la fecha en que se agregaron al catálogo, mostrando primero los productos con las fechas de entrada más antiguas.
    Name: A - ZOrdena los productos en orden alfabético.
    Name: Z - AOrdena los productos en orden alfabético inverso.
    SKU: ascendingOrdena los productos por SKU en orden alfanumérico.
    SKU: descendingOrdena los productos por SKU en orden alfanumérico inverso.
    Stock: low stock firstOrdena los productos del stock más bajo al más alto disponible.
    Stock: high stock firstOrdena los productos del stock más alto al más bajo disponible.
    Price: high to lowOrdena los productos de mayor a menor precio.
    Price: low to highOrdena los productos del precio más bajo al más alto.

    Opciones de ordenación de productos

  4. Escriba Number of Products to Display en el carrusel o cuadrícula.

    Los valores pueden estar comprendidos entre 1 y 999. El valor predeterminado es 5 para una cuadrícula y 20 para un carrusel.

    NOTE
    Es posible que algunos productos de la configuración de Categoría, SKU o Condición no aparezcan en la cuadrícula o el carrusel de productos. Por ejemplo, los productos desactivados, los productos marcados como no visibles, los productos sin existencias y los productos asignados a otro sitio web no se muestran.
    IMPORTANT
    Los precios de los productos configurables, agrupados y agrupados (precio dinámico) no están definidos en el Administrador. Por lo tanto, estos productos no se muestran en Preview si los productos están filtrados por precio. Estos productos no se pueden pedir correctamente en Preview si se solicitan por precio.

Configuración de carrusel

  1. Para determinar cómo se muestran los productos dentro del carrusel, elija Carousel Mode:

    OpciónDescripción
    DefaultEl carrusel muestra cinco productos por diapositiva de forma predeterminada y reduce ese número según sea necesario.
    ContinuousEl carrusel muestra cinco productos por diapositiva de forma predeterminada (con la mitad de un producto a la derecha y a la izquierda), pero centra y desplaza un producto a la vez en un bucle infinito. Los productos a la derecha e izquierda del producto centrado se atenúan para que se resalte el producto central.

    Si cambia entre estos dos modos, se conservarán los demás ajustes del carrusel, excepto el ajuste Infinite Loop, que siempre se establece en Yes en modo continuo y el campo se desactiva.

    Configuración de carrusel

  2. Si es necesario, establezca la opción Autoplay en Yes.

    Cuando la reproducción automática está activada, el carrusel comienza a desplazarse automáticamente cuando se carga la página. Si deja la configuración predeterminada (No), el cliente debe hacer clic en el desplazamiento por diapositivas (puntos o flechas) para mostrar cada diapositiva en secuencia.

    Si habilita esta característica, escriba Autoplay Speed para especificar el retardo en milisegundos entre cada diapositiva. El valor predeterminado es 4000 (4 segundos).

  3. Si es necesario, establezca la opción Infinite Loop en Yes.

    Cuando el bucle infinito está habilitado, la presentación con diapositivas se reproduce indefinidamente mientras la página está abierta. Si deja la configuración predeterminada (No), la presentación con diapositivas se reproducirá solo una vez.

    NOTE
    Si establece Infinite Loop en No y Autoplay en Yes, la reproducción automática se detiene al final del número de productos que se van a mostrar.

  4. Si es necesario, establezca la opción Show Arrows en Yes.

    Cuando esta opción está habilitada, cada diapositiva incluye siguiente y anterior flechas de navegación a la izquierda y a la derecha. Si deja la configuración predeterminada (No), las diapositivas no mostrarán flechas de navegación.

  5. Si es necesario, establezca la opción Show Dots en No.

    Cuando se establece la configuración predeterminada (Yes), aparecen puntos de navegación en la parte inferior del control deslizante del carrusel. Si desactiva esta configuración, el deslizador del carrusel no mostrará puntos de navegación.

Avanzadas

  1. Para controlar el posicionamiento de la lista Productos dentro del contenedor principal, elija Alignment:

    OpciónDescripción
    DefaultAplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
    LeftAlinea la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
    CenterAlinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
    RightAlinea la lista 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 del contenedor Productos:

    OpciónDescripción
    DefaultAplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
    NoneNo proporciona ninguna indicación visible de los bordes del contenedor.
    DottedEl borde del contenedor aparece como una línea de puntos.
    DashedEl borde del contenedor aparece como una línea discontinua.
    SolidEl borde del contenedor aparece como una línea sólida.
    DoubleEl borde del contenedor aparece como una línea doble.
    GrooveEl borde del contenedor aparece como una línea ranurada.
    RidgeEl borde del contenedor aparece como una línea discontinua.
    InsetEl borde del contenedor aparece como una línea de margen.
    OutsetEl borde del contenedor 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:

    OpciónDescripción
    Border ColorEspecifique 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 WidthIntroduzca el número de píxeles de la anchura de la línea del borde.
    Border RadiusIntroduzca 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 al contenedor.

    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 del contenedor de productos.

    Introduzca los valores correspondientes en el diagrama.

    Área del contenedorDescripción
    MarginsCantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left
    PaddingCantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left