Base de conocimiento

Obtén hosting web experto

Elija la fiabilidad del sitio web y el conocimiento con SiteGround!

Inicio / Ecommerce / Cómo mostrar productos en una página

Cómo mostrar productos en una página

Lee y resume el articulo:
Última actualización: May 26, 2026 2 min de lectura

Puedes mostrar productos en una página de las siguientes maneras:

  • Utilizando una sección de productos prediseñada.
  • Utilizando un componente para mostrar productos y creando un diseño de sección personalizado.

Cómo mostrar productos utilizando una sección prediseñada

Para mostrar productos en una sección:

  1. Haz clic en Editar sitio web en Site Admin > Website Builder.
    Edit Website button in Site Admin of an Ecommerce website
  2. Abre la pestaña Páginas en la barra de herramientas del menú izquierdo y selecciona una página existente o crea una nueva para mostrar los productos.
  3. Haz clic en Agregar sección para insertar la sección relacionada con los productos.
    Pages section in Ecommerce website builder with a selected page that displays the Add Section button
  4. Elige una plantilla de la categoría Artículo único de la tienda para mostrar un solo producto, o de Varios artículos de la tienda para mostrar varios productos. Pasa el cursor sobre el diseño seleccionado y pulsa el botón Agregar sección.
    A pop-up window for adding sections with a highlighted Multiple Store Items layout for displaying products
  5. Haz clic en el componente de producto dentro de la sección agregada y luego presiona el icono Editar en la barra de herramientas superior.
    Edit icon from the toolbar of a selected component that displays products in a section of an Ecommerce page
  6. En la ventana emergente de la derecha, abre la pestaña Fuente de datos para ajustar qué productos se mostrarán. Puedes mostrar productos de una marca o categoría, o seleccionar manualmente productos específicos. Además, puedes elegir mostrar detalles como precios, etiquetas de marca, calificaciones y más.
    Data Source tab in the settings of a Multiple Store Items component in Ecommerce where you can select which products are displayed
  7. En la misma ventana de configuración, abre la pestaña General para ajustar la configuración de apariencia general.
    General settings of a Multiple Store Items component in a section on an Ecommerce page
  8. Para cambiar la apariencia de la sección, coloca el cursor sobre ella y selecciona Editar sección en la barra de herramientas de la derecha.
    Edit Section button in the toolbar of a section in Ecommerce
  9. En la siguiente ventana emergente, abre la pestaña General para cambiar el relleno de la sección o los espacios entre columnas y filas.
  10. Abre la pestaña Diseño para cambiar la paleta de colores y el color de fondo, o selecciona una imagen de fondo.
    Design tab in the settings window of a section in Ecommerce

Cómo mostrar productos usando un componente

También puedes mostrar productos en un componente de tienda agregado a una sección nueva o existente.

  1. Navega a la sección donde deseas agregar un componente y haz clic en el botón Agregar en la esquina superior izquierda.
    Add button in a section on an Ecommerce page for adding components
  2. En la ventana Agregar componente, abre la pestaña Tienda y selecciona una de las siguientes opciones:
    • Múltiples artículos: muestra varios productos
    • Artículo único: muestra un solo producto
    • Carrusel de productos: muestra los productos en un carrusel
      Add Component menu where you can select a component to display products
  3. Una vez agregado el componente, haz clic en él y pulsa el icono Editar de la barra de herramientas superior. En la ventana emergente de configuración de la derecha, abre la pestaña Origen de datos y asegúrate de que esté seleccionada la opción Producto en el menú desplegable. Desde aquí, puedes elegir mostrar productos de una categoría o marca específica, mostrar los productos más recientes o seleccionar productos individuales. También puedes optar por mostrar precios, etiquetas y configurar otras opciones.
    Data Source tab in the settings of a component in Ecommerce where you can select which products are displayed
  4. En la pestaña General, puedes ajustar la apariencia general del componente. Para los componentes Múltiples artículos y Carrusel de productos, también puedes establecer la cantidad de productos que se muestran.

Comparte este artículo