Funciones especiales de la página de tienda

Mejora la experiencia de compra al habilitar la vista rápida del producto, el zoom de imagen, los efectos de desplazar el cursor y las listas de espera.

Última actualización: 3 de enero de 2025

Todos los sitios de Squarespace admiten páginas de tienda donde puedes mostrar y vender productos. Algunos sitios tienen funciones adicionales, como vista rápida, ampliación de imágenes y efectos de desplazamiento, que se muestran cuando los compradores posicionan el cursor sobre las imágenes del producto. En esta guía se explican estas funciones y dónde están disponibles.

Consejo

Regístrate en nuestro seminario web Consejos de diseño para aumentar las ventas de tu tienda, donde presentaremos herramientas y consejos que puedes usar para ayudar a que tus productos se destaquen en tu sitio e impulsar las ventas.

Funciones por versión

Las funciones disponibles dependen de la versión de Squarespace en la que se encuentre tu sitio.

Para la versión 7.0, estas opciones están disponibles en las familias de plantillas de Brine, Farro, Galapagos, Skye, Tremont y York. Para obtener información sobre todas las plantillas, visita Tipos de página de tienda.

En la versión 7.1, la vista rápida, el zoom de imagen y los efectos de desplazar el cursor están disponibles en las páginas de detalles del producto con el Diseño simple.

  Versión 7.1
Versión 7.0
Vista rápida
  • Bloques de productos
  • Bloques de resumen
  • Página de la tienda
  • Bloques de productos
  • Página de la tienda
  • Bloques de resumen
Ampliar imagen
  • Páginas de detalles del producto
  • Lightbox de vista rápida
  • Páginas de detalles del producto
  • Lightbox de vista rápida
Efectos al posicionar el cursor sobre el elemento
  • Imagen alternativa en las páginas de la tienda
Listas de espera
  • Sí 
  • Sí (no disponible en Galapagos)

Ampliar imagen

Con Zoom de imagen, los clientes pueden ampliar las imágenes de los productos para ver más de cerca el material, la textura y los detalles más finos. Puedes configurar el zoom para activarlo al desplazar el cursor o al hacer clic en la imagen.

Zoom de imagen está disponible en:

image-zoom.gif

Activar la Ampliación de imagen

La forma en que habilitas el zoom de imagen depende de la versión de tu sitio.

Para permitir la ampliación de imágenes: 

  1. Mientras estés en una página de detalles del producto, haz clic en Editar y, a continuación, en el ícono de lápiz.
  2. Haz clic en el menú desplegable de acción de desplazamiento
  3. Selecciona Zoom.

Para habilitar Zoom de imagen:

  1. Mientras estés en la página de detalles del producto, regresa al panel Sitio web, haz clic en Diseño y, a continuación, en Estilos del sitio.
  2. Desplázate hacia abajo hasta la sección Productos: Ampliar imagen. (En Galapagos, desplázate hasta la sección Productos).
  3. Marca Habilitar Ampliar imagen.
  4. Para seleccionar el nivel de ampliación, configura el control deslizante del Factor de ampliación entre 1 y 5. (En Galapagos, es el Factor de ampliación de imagen).
  5. Para elegir que la imagen tenga zoom tan pronto como el cursor se mueva sobre ella, establece Zoom se activa en: al hacer clic o desplazar el cursor (en Galapagos, el zoom siempre se activa al desplazar el cursor).

Más ayuda con Ampliar imagen

  • Ampliar imagen muestra una versión más grande de la imagen. Técnicamente no amplía un archivo de imagen.
  • La ampliación de imágenes no está disponible en dispositivos móviles.
  • Para obtener los mejores resultados, da formato a la imagen del producto para que se muestre en la web antes de subirla.
  • Las imágenes con fondos transparentes (.png) mostrarán las imagen original detrás de la versión ampliada.
  • En la versión 7.1, no está disponible la función de Ampliar imagen para las galerías de productos con diseño de carrusel.

Vista rápida

Con la vista rápida, los clientes pueden presionar un botón para ver los detalles del producto en una lightbox sin salir de la página actual. La Vista rápida alienta a los clientes a interactuar con tu tienda y a examinar más productos.

El Botón de Vista rápida puede aparecer en estos lugares:

  • Bloques de resumen
  • Bloques de productos
  • Páginas de la tienda

El botón aparece cuando se posiciona el cursor sobre el producto. La lightbox de Vista rápida incluye los detalles del producto, las imágenes y un enlace a Ver el artículo completo que dirige a la página de ese artículo.

Product_Block_with_Quick_View.png

Si se muestra código no deseado en la vista rápida, es probable que se deba a que hay un formato de texto externo en la descripción del producto. Para eliminar el formato, vuelve a escribir la descripción del producto manualmente o pégala como texto sin formato

Añadir botones de Vista rápida

Puedes habilitar Vista rápida por página de tienda y por bloque. Si tienes varias páginas de tienda o bloques, agrega los botones a cada una.

Para agregar una vista rápida a un bloque de producto:

  1. En el editor de bloques de producto, elige el producto que quieres mostrar.
  2. En la pestaña Diseño, activa la opción Vista rápida del producto.
  3. Guarda tus cambios en la página. 

Para agregar una vista rápida a un bloque de sumario:

  1. En el editor de bloques de sumario, asegúrate de seleccionar una página de tienda en la pestaña Contenido.
  2. Haz clic en la pestaña Diseño .
  3. Activa la opción Habilitar vista rápida de producto. El botón de vista rápida aparecerá sobre todas las imágenes de productos destacadas que estén en el bloque.
  4. Guarda tus cambios en la página.

Para agregar Vista rápida a una página de tienda:

  1. Abre la configuración de la página.
  2. Haz clic en Avanzadas y en Vista rápida y, a continuación, activa la opción Habilitar vista rápida.
  3. Si tienes varias páginas de tienda, repite estos pasos para cada página.

Modificar el estilo de botones y lightbox (solo versión 7.0)

Después de habilitar la Vista rápida, aparecen nuevas secciones en el Panel de estilos del sitio. Las configuraciones de Estilo se aplican a todo el sitio para crear un aspecto uniforme.

  1. En el menú de Inicio, haz clic en Sitio web, en Diseño y, a continuación, en Estilos del sitio.
  2. En la sección Productos: Botón de vista rápida, personaliza el estilo, el color, la fuente, el relleno, la posición y el tamaño del botón de Vista rápida. 
  3. En la sección Productos: Lightbox de Vista rápida, personaliza el aspecto de la lightbox. 

Consejo

si el texto de la vista rápida tiene problemas de formato, prueba agregando los detalles del producto como texto sin formato.

Más ayuda para la Vista rápida

  • La Vista rápida no está disponible en los dispositivos móviles.
  • El texto del botón de "Vista rápida" no puede personalizarse en este momento.
  • Las imágenes del producto aparecen como un cuadro recortado en Vista rápida.
  • En la versión 7.0, las descripciones de productos aparecen en Vista rápida sin formato especial, como estilo de encabezado, negrita, cursiva, listas con viñetas o saltos de línea.

Efectos al posicionar el cursor sobre el elemento

Los efectos de desplazamiento muestran información o crean movimiento al mover el cursor sobre una imagen de producto, lo cual añade interacción y animación a tu tienda. Las opciones de desplazamiento disponibles en el sitio dependen de la versión del sitio.

Todas las páginas de tienda muestran la segunda imagen alternativa del producto al desplazarse cuando un producto tiene más de una imagen.

Las familias de plantillas Brine, Farro, Skye, Tremont y York (con páginas de tienda avanzadas) tienen tres opciones:

  • Imagen alternativa
  • Difuminar
  • Superposición de información del producto

Puedes mostrar los nombres de productos y los precios sobre una superposición de color al posicionar el cursor en estas familias de plantillas (con páginas de tienda clásicas):

  • Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Dos plantillas tienen opciones exclusivas de posicionamiento del cursor:

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.

Funciones especiales de la página de tienda