El widget Catálogo de productos en el creador de sitios web
Con el creador de sitios web de SendPulse, puedes agregar un widget de Catálogo de productos que extrae los productos directamente de tu catálogo de CRM y los muestra en una página web.
Por ejemplo, puedes convertir una landing page en una tienda o en un catálogo de productos sin necesidad de configurar una tienda en línea completa.
Veamos cómo agregar el widget Catálogo de productos y personalizar el catálogo.
Añade el widget
Antes de añadir el widget, conecta una tienda en línea a tu sitio web. Este muestra los productos y las categorías de tu catálogo de CRM. Puedes añadirlos o administrarlos manualmente o a través de la API.
Coloca el widget Catálogo de productos en tu sitio web.
Este widget ocupa todo el ancho de la sección, por lo que no puedes colocar otras columnas a su lado.
Elige los productos que quieres mostrar
Elige las categorías de productos que quieres mostrar en tu widget. En la lista desplegable Productos, selecciona Todas las categorías para mostrar todo el catálogo, o elige una sola categoría.
Para agregar o editar los productos y las categorías de esta lista, haz clic en Gestionar productos. El enlace abre el catálogo de productos de tu CRM.
El menú de categorías refleja la estructura de tu catálogo de CRM, incluidas las categorías anidadas. Si una categoría no tiene productos activos, o si ningún producto coincide con la búsqueda actual o con el filtro de precio, el catálogo muestra un marcador de posición en blanco en lugar de tarjetas.
Personaliza el estilo del catálogo
Decide dónde se ubicará el menú de categorías y filtros de precio con respecto a las tarjetas de productos. En Estilo del catálogo, selecciona un diseño:
| Diseño lateral | Coloca el menú en una barra lateral junto a las tarjetas. |
| Diseño superior | Coloca el menú en una barra encima de las tarjetas. |
Para personalizar el estilo de las tarjetas de productos, en Estilo del catálogo, haz clic en Personalizar.
En la sección General, configura el Espaciado entre tarjetas: la distancia entre las tarjetas en píxeles.
En la sección Tarjeta, configura el color de fondo, el relleno interior, el contorno y el redondeo de la tarjeta.
En la sección Galería, decide cómo deben aparecer las imágenes de los productos:
| Escalado de imágenes | Elige cómo se ajusta una imagen a su marco: Cubrir o Contener. |
| Relación de aspecto | Elige una relación de aspecto, como 1:1, 16:9 o 4:3. |
| Color de fondo | Establece un color de relleno que se muestre detrás de la imagen. |
| Redondeo | Establece un valor de redondeo de la imagen en píxeles. |
| Margen | Establece un espacio alrededor de la imagen en píxeles. |
En la sección Tipografía, configura el tamaño de la fuente, el formato y el color para cada elemento de texto:
| Nombre del producto | Configura la fuente del nombre del producto. |
| Descripción del producto | Configura la fuente de la descripción breve. |
| Precio | Activa o desactiva el precio y configura su fuente. |
| Precio anterior | Activa o desactiva el precio anterior, que aparece junto al precio actual, y configura su fuente. |
Establece la cantidad de productos
Controla cuántos productos muestra el catálogo y cuántos aparecen en cada fila.
En la sección Número de tarjetas por fila, establece el número de tarjetas por fila para la Vista de escritorio y la Vista móvil.
El número máximo de tarjetas por fila depende del diseño. En la vista de Escritorio, puedes mostrar hasta 4 tarjetas con el diseño Lateral y hasta 5 tarjetas con el diseño Superior. En la vista para Móviles, puedes mostrar hasta 2 tarjetas por fila.
En la sección Número máximo de productos mostrados, configura cuántos productos carga el catálogo de una sola vez. Puedes elegir entre 6 y 24.
Cuando el catálogo tiene más productos que el número seleccionado, los visitantes navegan por ellos mediante la paginación.
Configura la paginación
La paginación divide tu catálogo en páginas cuando contiene más productos que el máximo que hayas establecido.
Para personalizarla, haz clic en Configuración de paginación. Las opciones se agrupan en tres secciones.
En la sección Botones de página, personaliza los botones de página:
| Color del texto | Establece el color del texto de los botones. |
| Color de fondo | Establece el color de relleno de los botones. |
| Color del contorno | Establece el color del contorno de los botones. |
| Redondeo | Establece un valor de redondeo en píxeles. |
| Tamaño | Elige un tamaño de botón: S, M o L. |
Para ayudar a los visitantes a saber en qué página se encuentran, en la sección Botón de página actual, configura el estilo del botón de página actual:
| Color del texto | Establece el color del texto del botón. |
| Color de fondo | Establece el color de fondo del botón. |
| Color del contorno | Establece un color para el contorno del botón. |
Para agregar un botón que cargue la página siguiente, activa la opción Botón Página siguiente. Ingresa su Texto, luego elige su Estilo y tamaño. Si lo deseas, puedes activar la opción Añadir ícono para mostrar un ícono y usar Efecto adicional para agregar un efecto al pasar el cursor.
Personaliza el panel de filtros
El panel de filtros incluye un menú de categorías y un filtro de precio. Los visitantes pueden explorar los productos por categoría y filtrarlos por precio utilizando los campos Desde y Hasta o el control deslizante de precio. Los campos solo admiten números enteros.
Para personalizar el panel, haz clic en Configuración de filtros. Las opciones disponibles reutilizan la configuración estándar de color, contorno y fuente, y están agrupadas en tres secciones.
En la sección General, configura el color de fondo del panel, el redondeo, el contorno y el relleno interior.
En la sección Categorías, personaliza el menú de categorías:
| Título | Edita el texto del encabezado y configura su tipo de letra. |
| Lista de categorías | Configura la fuente del nombre de la categoría. |
| Categoría destacada |
Configura el estilo y el color de la categoría que está viendo el visitante. Esta categoría aparece resaltada en el menú. |
En la sección Precio, configura el filtro de precios:
| Título | Edita el texto del encabezado y configura su tipo de letra. |
| Apariencia | Elige entre un campo relleno o con contorno. |
| Color del texto del campo de entrada | Establece un color para los campos de entrada. |
| Color de fondo | Establece un color de fondo para los campos de entrada. |
| Color del borde | Establece un color de borde para los campos de entrada. |
| Redondeo | Establece un valor de redondeo en píxeles. |
| Tamaño | Elige un tamaño de campo: S, M o L. |
| Control deslizante | Activa el control deslizante y luego establece el color de la Línea, el color de la Línea rellena y el color del Botón. El control deslizante solo está disponible con el diseño Lateral. |
Configura el orden y la búsqueda
La búsqueda y la ordenación ayudan a los visitantes a encontrar productos y a navegar por el catálogo de manera más eficiente. Para configurarlas, haz clic en Configuración de ordenación.
Configura la búsqueda de productos
El campo de búsqueda ayuda a los visitantes a encontrar productos por nombre.
Activa la opción Búsqueda e ingresa el Texto de marcador de posición para el campo de búsqueda.
Cuando está habilitado, el campo de búsqueda aparece encima de las tarjetas de productos y filtra el catálogo a medida que los visitantes escriben.
La búsqueda solo admite nombres de productos.
Configura la ordenación de productos
El menú de ordenación permite a los visitantes navegar por el catálogo por fecha de adición, precio o nombre, en orden ascendente o descendente.
Activa la opción Habilitar ordenación y, a continuación, personaliza el campo de ordenación:
| Apariencia | Elige entre un campo relleno o con contorno. |
| Color del texto del campo de entrada | Establece un color para los campos de entrada. |
| Color de fondo | Establece un color de fondo para los campos de entrada. |
| Color del borde | Establece un color de borde para los campos de entrada. |
| Redondeo | Establece un valor de redondeo en píxeles. |
| Tamaño | Elige un tamaño de campo: S, M o L. |
Configura el botón Añadir al carrito
El botón Añadir al carrito permite a los visitantes agregar un producto al carrito directamente desde su tarjeta.
Para mostrar u ocultar este botón, usa la casilla de selección junto a su nombre en el panel de widgets.
Para editar el botón, marca la casilla de selección y haz clic en el ícono del lápiz. Ingresa el Texto del botón y elige su Estilo y tamaño.
Para mostrar un ícono en el botón, activa la opción Añadir ícono. Elige un ícono, como el de un carrito o el de una aplicación, y configura su posición.
Los visitantes pueden hacer clic en una tarjeta para abrir la página del producto. Cuando habilitas el botón Añadir al carrito, también pueden hacer clic en él para agregar un producto a su carrito.
El widget del Catálogo de productos utiliza la misma configuración general que el resto de elementos del sitio web.
Última actualización: 03.07.2026
o