Base de conocimiento

Obtén hosting web experto

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

Inicio / Ecommerce / Cómo mostrar categorías en una página

Cómo mostrar categorías en una página

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

Tienes dos opciones para mostrar una categoría de producto en una página:

  • Usar una sección de Categorías predefinida
  • Usar un componente para mostrar categorías y crear un diseño de sección personalizado

Cómo mostrar categorías usando una sección predefinida

Para mostrar categorías con una sección, sigue estos pasos:

  1. Haz clic en Editar sitio web en Site Admin > Website Builder.
    Edit Website button in Site Admin of Ecommerce
  2. Abre la pestaña Páginas en la barra de herramientas del menú izquierdo y selecciona la página donde se mostrarán las categorías.
    Pages section in the website builder of Ecommerce where a page is selected
  3. Elige una posición para la sección de categorías y presiona el botón Añadir sección.
    Selected page in the website builder of Ecommerce where an Add Section button is selected
  4. En la ventana emergente, abre Categorías y selecciona un diseño adecuado con el botón Agregar sección.
    A pop-up window in Ecommerce website builder with a selected Category section layout
  5. Una vez añadida la sección, haz clic en el componente de categoría y selecciona el icono Editar en la barra de herramientas superior.
  6. En la ventana emergente de la derecha, abre la pestaña General, donde podrás modificar la configuración de visualización de las categorías: el número de filas y columnas, y el espacio entre columnas.
    A selected category component in a section that displays the General appearance settings window
  7. En la misma ventana de configuración, abre la pestaña Fuente de datos, donde la Categoría ya está preseleccionada en el menú desplegable Fuente de datos. Para especificar qué categorías se muestran o cambiar su orden, abre el menú Seleccionar categoría, que incluye las siguientes opciones:
    • Último: muestra las categorías creadas más recientemente. El número de categorías depende del número de columnas que muestre el componente.
    • Selección manual: abre un menú desplegable Seleccionar elementos donde puedes elegir categorías específicas de las categorías existentes en tu tienda.
      A category component in a section that displays a settings window where you can choose which categories are displayed
  8. Para cambiar la apariencia general de la sección, coloca el cursor sobre ella y selecciona Editar sección en la barra de herramientas de la derecha.
    A section in Ecommerce website builder with a selected Edit Section button from the section's toolbar
  9. Puedes modificar el espacio entre filas y columnas, así como el relleno, en la pestaña General. Para cambiar el color de fondo o añadir una imagen de fondo, abre la pestaña Diseño.
    A section in Ecommerce website builder that displays the Design settings

Cómo mostrar categorías con un componente

Además de usar una sección de categorías predefinida, puedes agregar un componente de Categorías a una sección nueva o existente y configurarlo según tus necesidades. Sigue estos pasos:

  1. Haz clic en una sección existente o agrega una nueva con el botón Añadir sección.
  2. Pasa el cursor sobre la sección elegida y presiona el botón Añadir en la esquina superior izquierda.
    A selected section in Ecommerce website builder that displays the Add button for adding a component to the section
  3. En la ventana Añadir componente, abre la pestaña Tienda y selecciona Múltiples artículos.
    Add Component menu where a Multiple Items component is selected
  4. Haz clic en el componente agregado y presiona el icono Editar en la barra de herramientas superior.
  5. En la ventana Editar varios artículos de la tienda, abre la pestaña Fuente de datos.
  6. Selecciona Categoría en el menú desplegable Fuente de datos.
    Multiple Items component displaying the Data Source menu where Category is selected
  7. En el menú desplegable Seleccionar categorías, puedes elegir entre:
    • Último: muestra las categorías creadas más recientemente. El número de categorías depende del número de columnas que muestre el componente.
    • Selección manual: abre un menú desplegable Seleccionar artículos donde puedes elegir categorías específicas de las categorías existentes de tu tienda.
      Multiple Items component displaying the Select Category menu where you can select which categories are displayed
  8. Desde la pestaña General en la ventana Editar varios artículos de la tienda, puedes configurar el número de columnas y filas para controlar cómo se muestran tus categorías.
    General settings for a component that displays categories

Comparte este artículo