Bloques de productos

Presenta un producto de tu tienda en otra página de tu sitio y vincula a los clientes directamente a la compra.

Última actualización: 5 de febrero de 2025

Un bloque de productos muestra un artículo de la tienda de tu sitio en otras páginas o entradas. Es una excelente manera de promocionar productos en tu sitio web o crear un diseño diferente al de la página de aterrizaje integrada de tu tienda.

Consejo

Para obtener información sobre las diferencias entre las páginas de la tienda y los bloques de productos, consulta páginas de la tienda vs. bloques de productos

Antes de comenzar

  • Para usar bloques de productos, necesitas una página de tienda que contenga el producto que quieres mostrar.
  • La página de Tienda que contiene el producto debe estar habilitada. Si la desactivas, el producto no aparecerá en los carritos de compras cuando se añada a través de bloques de productos.
  • El producto debe estar publicado y ser visible.

Añadir el bloque de productos

Para añadir un bloque de producto:

  1. Edita una página o publicación, haz clic en Agregar bloque o un punto de inserción y, luego, en Producto.Para obtener ayuda, consulta Agregar contenido con bloques.
  2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
  3. En el campo Agregar un producto, busca el producto que quieres mostrar. Haz clic en el producto en los resultados de búsqueda para agregarlo. La búsqueda muestra hasta siete productos.
  4. Para ir a tu inventario y realizar cambios en los productos, haz clic en Editar productos y, a continuación, en Guardar y continuar. Ten en cuenta que esto cierra la página actual.
  5. Haz clic en la pestaña Diseño para personalizar qué detalles del producto se muestran.
Product_Block.gif

Consejo

Los bloques de productos muestran un producto a la vez. Para mostrar más de un producto en una página, utiliza varios bloques de productos o muestra una colección de productos mediante bloques de sumario.

Promover productos controlados

Si tienes una suscripción a Sitios para miembros y configuras una tienda online en uno de tus sitios para miembros, quienes visiten el sitio deberán registrarse para obtener una membresía antes de poder comprar productos en esa tienda con acceso restringido. Para permitir que quienes no son miembros compren estos productos, agrega bloques de productos a tu sitio principal y utiliza la barra de búsqueda Agregar un producto para seleccionar productos de tu tienda con acceso restringido.

Añadir detalles del producto

Para personalizar el bloque de productos, haz clic en la pestaña Diseño. Aquí, puedes establecer la alineación del bloque a la izquierda, al centro o a la derecha. También puedes personalizar los detalles del producto que quieres mostrar activando o desactivando los controles:

  • Imagen: muestra la imagen destacada del producto.
  • Título: muestra el título del producto.
  • Precio: muestra el precio del producto.
  • Descripción: muestra la descripción del producto.
  • Botón Agregar al carrito: muestra un botón Agregar al carrito.
  • Vista rápida del producto: habilita la vista rápida.

Para cambiar cualquiera de estos detalles, edita el producto.

Ajustar el estilo del bloque de productos

Puedes aplicar estilo al bloque de productos y personalizar el botón Añadir al carrito.

Texto de botón

Por defecto, el texto del botón del bloque de productos es Añadir al carrito. Puedes cambiar este texto por otro, como Comprar ahora.

  1. Abre la página de tienda que contiene el producto que se muestra en el bloque de productos.
  2. Haz doble clic en el producto para abrir el editor de productos.
  3. En la pestaña Opciones, escribe el nuevo texto del botón.

Diseño de botones

La forma de cambiar el diseño de los botones depende de la versión del sitio web.

  1. Abre una página que contenga un bloque de productos.
  2. Haz clic en Editar, abre Estilos del sitio y, a continuación, haz clic en Botones.

Los botones de bloque de productos siguen las opciones de estilo principales. Para obtener más información, visita Aplicar estilo a botones.

  1. Abre una página que contenga un bloque de productos.
  2. Regresa al panel de Sitio web, haz clic en Diseño y luego haz clic en Estilos del sitio.
  3. Desplázate hacia abajo hasta los retoques de estilo de los botones.

Para más información, visita Modificar el estilo de los botones.

Texto y fuente del bloque de productos

El estilo del título, el precio y la descripción del bloque de productos depende de la versión del sitio

Para cambiar el texto que se muestra, ve a la página de tienda y edita la información del producto.

Cambia la fuente, el color y el tamaño del texto en Estilos del sitio

  • Fuente: sigue Párrafos
  • Color: sigue Párrafo (Medio)
  • Tamaño: sigue Párrafo 2

El título siempre aparece un poco más grande.

Para cambiar el texto que se muestra, ve a la página de tienda y edita la información del producto.

Las fuentes de detalles del producto toman su estilo de otros estilos de texto del sitio. En la mayoría de las plantillas:

  • Título: sigue la fuente del cuerpo del texto, pero ligeramente más grande. El color sigue el del enlace del cuerpo.
  • Precios: sigue la fuente y el color del cuerpo del texto, pero ligeramente más grande.
  • Descripción: sigue la fuente y el color del cuerpo del texto.

Hay algunas excepciones. En estas familias de plantillas:

Familia de plantillas Notas

Bedford

  • Color del título: sigue el cuerpo del texto.

Brine

  • Color del título: sigue el cuerpo del texto.

Farro

  • Color del título: sigue el cuerpo del texto.

Skye

  • Fuente del título: título de lista (ajústalo mientras estás en una página de blog)
  • Fuente de la descripción: fragmento
  • Color del título: color del título
  • Color de la descripción: color del fragmento
Supply
  • Fuente del precio: sin opciones de estilo
  • Descripción: peso fijo

Etiquetas de productos agotados

El estilo de la etiqueta de productos agotados depende de la versión de tu sitio.

Las etiquetas de productos agotados siempre se muestran como texto blanco sobre un fondo negro rectangular. La fuente de la etiqueta de productos agotados es la misma que la fuente de los párrafos de todo el sitio. Puedes cambiar el texto en el panel Estado del producto.

La etiqueta de productos agotados sigue los ajustes de estilo de Producto: insignias de estado de tu sitio. No es posible cambiar la ubicación de la etiqueta. Puedes cambiar el texto en el panel Estado del producto.

Tamaño y forma del bloque de productos

Cuando agregues el bloque por primera vez, llenará el ancho completo del área de contenido si no hay otros bloques al lado. Para obtener ayuda sobre cómo cambiar el tamaño de los bloques, visita Cambiar el tamaño de bloques y Mover bloques para personalizar los diseños.

Para la forma del bloque, la relación de aspecto de los bloques de productos coincide con la relación de aspecto original de la imagen destacada del producto. Para asegurarte de que un bloque de productos tiene una relación de aspecto específica, recorta la imagen antes de subirla al editor de productos o utiliza el editor de imágenes en el editor de productos.

Consejos de búsqueda de bloques de productos

Al buscar un producto para mostrar en el bloque, los resultados de la búsqueda se basan en la siguiente información:

  • Títulos
  • Descripciones
  • Etiquetas
  • Categorías
  • Bloques de texto en la información adicional del producto

La búsqueda muestra hasta siete coincidencias. Si tus productos tienen nombres similares, busca por el título exacto. Es posible que los nuevos productos no se muestren inmediatamente en la búsqueda.

Personaliza tu tienda online

Aunque debes usar una página de la tienda para agregar productos a tu sitio, puedes usar bloques de productos para crear un diseño de tienda online personalizado en otra página. Después de crear y personalizar tu tienda, puedes ocultar la página de la tienda moviéndola a la sección No vinculada del panel de páginas. Esto elimina la página de la tienda de los menús de navegación y la mantiene activada.

Solución de problemas

Mi Bloque de Productos muestra la imagen incorrecta

Los bloques de productos muestran la imagen destacada del producto. Esta imagen puede ser diferente de la primera imagen establecida en el editor de productos. Para cambiar la imagen en el bloque de producto, cambia la imagen destacada del producto.

El producto no se añadirá al carrito de compras desde el Bloque de Productos

Si al hacer clic en el botón Añadir al carrito de un bloque de productos no se agrega el producto al carrito de compras, es posible que la página de tienda vinculada esté deshabilitada. Los productos de esta página se pueden mostrar en bloques de productos, pero no se pueden agregar al carrito. Para resolver este problema, habilita la página de tienda.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.