Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Funciones especiales de la Página de Productos

Cada plantilla admite Páginas de Productos, y cada familia tiene sus propias opciones de estilo y de diseño. Las Páginas de Productos de algunas plantillas tienen funciones adicionales:

  • Ampliar la imagen del producto: Los clientes pueden agrandar las imágenes de los productos para mirar el material, la textura y los detalles más precisos del producto. Puedes configurar la ampliación para que se active cuando se posicione el cursor sobre la imagen o cuando se haga clic en la imagen.
  • Vista rápida del producto: 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 que los clientes interactúen con tu tienda y examinen más productos.
  • Efectos del posicionamiento del cursor: Muestra información o crea movimientos cuando colocas el cursor sobre una imagen del producto para añadir interacción y animación a tu tienda.
Consejo: Si necesitas más ayuda con tu plantilla, consulta esta guía de la plantilla.

Plantillas admitidas

Puedes agregar un Zoom de imagen y una Vista rápida en estas familias de plantillas:

  • Brine
  • Farro
  • Galapagos
  • Skye
  • Tremont
  • York

Las opciones de posicionamiento del cursor varían según la plantilla

Ampliar imagen

La función Ampliar la imagen del producto está disponible en estos lugares:

image-zoom.gif

Activar la Ampliación de imagen

La forma en la que habilitas la Ampliación de la imagen depende de la versión de Squarespace que emplee tu sitio.

  1. Mientras estás en una página de elemento del producto, ve al Menú de Inicio, presiona Diseño y, luego, 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 si la imagen se amplía tan pronto como el cursor se mueve sobre ella, configura La ampliación de la imagen se activa con: para seleccionar entre Clic o Posicionamiento del cursor. (En Galapagos, la ampliación de la imagen se activa cuando se posiciona el cursor sobre ella).
  1. En el Menú de Inicio, haz clic en Diseño y, a continuación, presiona Elementos del producto.
  2. Haz clic en el menú desplegable acción del Posicionamiento del cursor y selecciona Ampliar.
  3. Configura el Factor de ampliación de imagen.

Más ayuda con Ampliar imagen

  • La función Ampliar la imagen del producto no está disponible en los dispositivos móviles.
  • Para obtener los mejores resultados, ajusta el formato de tu imagen para que aparezca en la web antes de cargarla.
  • Ampliar imagen muestra una versión más grande de la imagen. Técnicamente no amplía un archivo de imagen.
  • Las imágenes con fondos transparentes (.png) mostrarán las imagen original detrás de la versión ampliada.

Vista rápida

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

  • Páginas de Productos
  • Bloques de resumen y Bloques de producto conectados con una Página de Productos

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 vínculo a Ver el artículo completo que dirige a la página de ese artículo.

Product_Block_with_Quick_View.png

Añadir botones de Vista rápida

Puedes habilitar la Vista rápida por Página de Productos y por bloque. Si tienes varias Páginas de Productos o bloques, añade botones a cada uno de ellos.

Para añadir una Vista rápida a una Página de Productos:

  1. Abre la configuración de página de dicha página.
  2. Haz clic en la pestaña Avanzada y marca Habilitar Vista previa.
  3. Si tienes varias Páginas de Productos, repite estos pasos para cada una de ellas.

Para añadir una Vista rápida a un Bloque de productos:

  1. En el Editor de bloque de productos, elige un producto que desees mostrar.
  2. Marca Habilitar Vista rápida.
  3. Click Apply to save your changes.
  4. Guarda tus cambios en la página. 

Para añadir una Vista rápida a un Bloque de resumen:

  1. En el Editor de bloque de resumen, comprueba que se haya seleccionado una Página de Productos en la pestaña Contenido.
  2. Haz clic en la pestaña Mostrar.
  3. Marca Habilitar Vista rápida.
  4. Haz clic en Aplicar para guardar tus cambios. El botón Vista rápida aparecerá sobre todas las miniaturas de los productos que estén en el bloque.
  5. Guarda tus cambios en la página.

Cambia el estilo del botón y de la lightbox

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 Diseño y, luego, 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. Por ejemplo, mueve el botón al centro o a la parte inferior de la imagen con el ajuste Posición.
  3. En la sección Productos: Lightbox de Vista rápida, personaliza el aspecto de la lightbox. Entre los ajustes de estilo más notables se encuentran los siguientes:
  • Selecciona Vista del fragmento: Truncar para que aparezca la descripción del producto.
  • La Superposición de color añade un filtro de color a la Página de Productos detrás de la lightbox.
  • Usa los ajustes de Controles para modificar la navegación y el botón de cerrar que aparece fuera de la lightbox.
  • Para cambiar la fuente del título de la Vista rápida, selecciona la Fuente del título en la sección Productos: Detalles del panel de Estilos del sitio.
Consejo: Si el texto de tu Vista rápida tiene problemas de formato, intenta añadir 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.
  • Las descripciones de los productos aparecen en la Vista rápida sin un formato especial, incluidos los estilos del encabezado, las negritas, las cursivas y las listas con viñeta.

Efectos al posicionar el cursor sobre el elemento

Los efectos del posicionamiento del cursor disponibles para tus Páginas de Productos dependen de la plantilla de tu sitio.

Páginas Clásicas de Productos

Puedes incluir el nombre y el precio de los productos sobre una superposición de color cuando se posiciona el cursor sobre estos en las plantillas que admiten la Página Clásica de Productos. Para informarte mejor, visita Ajustar el estilo en la Página Clásica de Productos.

Páginas Avanzadas de Productos

Las plantillas que admiten la Página Avanzada de Productos tienen opciones avanzadas de posicionamiento del cursor:

  • Imagen alternativaDestaca una característica especial o un detalle clave de cada producto. 
  • Difuminar: Crea un efecto de difuminación.
  • Superposición del producto: Muestra la información del producto.

Para informarte mejor, consulta Ajustar el estilo de la Página Avanzada de Productos.

Nota: Actualmente,   la versión 7.1 siempre tiene activada una imagen alternativa.

Páginas Exclusivas de Productos

Dos plantillas tienen opciones exclusivas de posicionamiento del cursor:

Related products

Si tu sitio pertenece a un plan Commerce Básico o Avanzado, puedes mostrar los productos relacionados en las páginas de detalles de los productos de cualquier plantilla. Cuando está habilitada, esta sección aparece al final de la página de detalles del producto y muestra los productos relacionados por categoría. Si deseas informarte mejor, consulta Mostrar productos relacionados.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 14 de 37
Funciones especiales de la Página de Productos