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

Cómo modificar el estilo de páginas de tienda

Puedes personalizar la forma en que aparecen los productos en tu sitio para que coincida con el diseño y la presentación de tu marca. Utiliza esta guía para encontrar las opciones de estilo de las páginas de la tienda y las páginas de detalles del producto según la versión de tu sitio.

Página de tienda versus páginas de detalles del producto.

Antes de modificar el estilo de tus productos, es bueno entender cómo Squarespace los estructura en todos los sitios. Los productos se organizan en dos partes: páginas de tienda, que crean una página de aterrizaje navegable y, a continuación, páginas de detalles de producto individuales. Estas áreas comparten algunos ajustes de estilo y tienen sus propias opciones de estilo. Para obtener más información, visita Añadir productos a tu tienda.

Abrir las opciones de estilo

Debes cambiar las opciones de estilo de página de la tienda y página de detalles del producto en dos lugares:

  • Páginas de tienda: haz clic en Editar en la vista previa del sitio y, a continuación, haz clic en el ícono del lápiz en la sección de la tienda que deseas editar. Para obtener más información sobre los estilos de apertura de secciones de tiendas, visita las secciones de la página de la colección.
  • Páginas de detalles del producto: abre la página de detalles del producto que quieras editar. Haz clic en Editar diseño y, a continuación, en el ícono de pincel. Esta configuración de estilo se aplica a todas las páginas de detalles del producto de tu sitio web.

Para dar estilo a las páginas de la tienda:

  1. Abre la página de la tienda que quieres editar.
  2. En el Menú de inicio, haz clic en Diseño y, luego, en Estilos del sitio.
  3. Utiliza los ajustes de las secciones Productos para cambiar el estilo de la página de aterrizaje.
  4. Para ajustes específicos de páginas de detalles de productos individuales, sal de Estilos del sitio, abre un producto y, a continuación, vuelve a ingresar a Estilos del sitio.

Consejos:

  • En la vista previa, haz clic en cualquier área de la página para que aparezcan los retoques de estilo disponibles para esa área y ocultar el resto.
  • Si tienes varias páginas de tienda, los cambios de estilo se aplican a todas estas en todo el sitio para crear un aspecto coherente.
  • Es posible que la plantilla tenga funciones, como imágenes de banner o encabezados de página, que afectan el aspecto de la página de tienda.

Página de la tienda

Los visitantes de la página de tu tienda verán todas las imágenes en miniatura de los elementos del producto distribuidas en una cuadrícula. En los estilos de sección de la tienda, puedes personalizar estos detalles y los cambios se aplican a todas las páginas de la tienda en tu sitio:

Formato:

  • Ancho de imagen
  • Espaciado entre columnas
  • Espaciado entre filas
  • Número de columnas (mínimo dos)
  • Relación de aspecto de la imagen
  • Text Alignment (Alineación del texto)
  • Espaciado entre texto e imagen
  • Mostrar u ocultar precio
  • Dónde se muestra la navegación por categorías. No es posible ocultarla.
  • Alineación del texto del encabezado
  • Mostrar título de categoría: oculta o muestra el título de la página en la parte superior de la sección de la tienda.
  • Navegación del producto
    • Miga de pan: muestra la ruta de navegación que tomaron los visitantes antes de aterrizar en su página actual, excluyendo los productos relacionados y las páginas de categorías filtradas. 
    • Ninguna

Colores:

Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Único: Galapagos y Supply siguen diferentes ajustes de estilo. Visita la guía de plantillas para obtener información sobre cómo modificar el estilo de productos.

Diseño

Los visitantes de la página de tu tienda verán todas las imágenes en miniatura de los elementos del producto distribuidas en una cuadrícula. Modifica el estilo de la cuadrícula con estos ajustes.

Sección Estilos del sitio

  • Avanzado; Producto: Diseño
  • Clásico: Productos
Descripción Avanzado Clásico
Cambiar el número de elementos por fila Elementos por fila Productos por fila
Cambiar el espacio entre cada elemento de la fila Espacio entre elementos n/a
Cambiar la forma de la imagen. Las imágenes se recortan para ajustarse. Relación de aspecto de la imagen n/a
Establecer la forma del contenedor de la imagen n/a Tamaño del elemento del producto
Elegir si la imagen se recorta para rellenar el contenedor n/a Recorte automático de la imagen del producto
Cambiar el color que se muestra detrás de las imágenes que no se recortan al tamaño del contenedor n/a Color de fondo del producto

Información del producto

Para mostrar ajustes móviles en Páginas avanzadas de la tienda, selecciona Posición: Superposición.

Sección Estilos del sitio

  • Avanzado; Productos: detalles
  • Clásico: Productos
Descripción Avanzado Clásico
Establecer el título y el precio para mostrar debajo de la imagen o al posicionar el cursor Posición: Debajo, Superposición Títulos de la lista de productos: abajo, superposición
Alinear texto cuando Títulos de lista de productos: Debajo está habilitado n/a Alineación de la lista de productos: centro, izquierda
Establece el color de la superposición al posicionar el cursor cuando se selecciona Títulos de lista de productos: Superposición. Ajusta el control deslizante para establecer la transparencia. n/a Color de superposición del producto
Elegir dónde se muestra el texto en navegadores móviles Posición (dispositivos móviles): Debajo, Superposición n/a
Elegir cómo se alinea el texto Alineación n/a
Establece el color de la superposición al posicionar el cursor cuando se selecciona Posición: Superposición. Mueve el control deslizante para establecer la transparencia. Color de superposición n/a
Cambiar aún más la alineación del texto cuando esté configurado para que se muestre al posicionar el cursor Relleno de la superposición n/a
Cambiar el espaciado debajo de cada fila Espacios n/a
Desmarca esta opción para ocultar los títulos de los elementos Mostrar el título n/a
Establecer la fuente del título Fuente del título n/a
Establecer el color del título Color del título n/a
Establecer el color del título en dispositivos móviles Color del título (dispositivos móviles) n/a
Establece el espacio entre el texto y la imagen cuando se configura en Posición: Debajo Espaciado del título n/a
Desmarca para ocultar los precios Mostrar precio Mostrar precio del producto
Establecer la fuente del precio Fuente del precio n/a
Establecer el color del precio en equipos de escritorio Color del precio n/a
Establecer el color del precio en dispositivos móviles Color del precio (dispositivos móviles) n/a
Establecer el color del precio de venta en equipos de escritorio Color del Precio de oferta n/a
Establecer el color del precio de venta en dispositivos móviles Color del Precio con descuento (dispositivos móviles) n/a
Establecer el espacio entre el precio y el título Espaciado del precio n/a

Páginas de detalles del producto

Las imágenes que se muestran son las imágenes del producto. Para dar estilo a la página de detalles del producto:

  1. Abre la página de detalles del producto que quieras editar.
  2. Haz clic en Editar diseño en la esquina superior izquierda. En algunos sitios, es posible que tengas que pasar el cursor sobre Editar, hacer clic en Editar diseño y, a continuación, hacer clic en el ícono de lápiz.

Puedes personalizar estas opciones:

  • Ancho de imagen
  • Relación de aspecto de la imagen (solo diseño de galería de diapositivas)
  • Text Alignment (Alineación del texto)
  • Estilo de navegación del producto
  • Espaciado entre imágenes
  • Ancho de galería
  • Alineación de contenido (superior, centro): la alineación superior puede mostrar relleno entre la parte superior de la imagen del producto y el texto.
  • Diseño de galería (Diapositivas, Apilado, Carrusel): si el diseño de la galería es Diapositivas, se muestran las miniaturas de las otras imágenes del producto.
  • Ubicación de la galería
  • Ubicación de miniaturas de la galería: coloca las imágenes en miniatura del producto cuando el diseño de la galería es Diapositivas.
  • Ancho del formulario
  • Tamaño de la flecha del carrusel
  • Acción al hacer clic (zoom o lightbox)
  • Acción de posicionar el cursor (Zoom o ninguno)
  • Factor de zoom de imagen

Productos relacionados

La sección de productos relacionados en las páginas de detalles del producto sigue los ajustes de los estilos de la sección de la tienda. Para acceder a esta configuración desde una página de detalles del producto, vuelve a la página de la tienda y haz clic en Editar en la esquina superior izquierda. Las fuentes siguen los ajustes de fuente de tu sitio.

Botón comprar

Este botón sigue los ajustes de estilo de botones de tu sitio web. No es posible ocultar el botón Añadir al carrito en la versión 7.1. Cuando un producto se agota, el botón Añadir al carrito aparece atenuado.

Botón Área de pago

El botón Área de pago que aparece en la página del carrito de compras sigue la configuración de color de tu sitio. No es posible personalizar su forma o fuente.

Menús desplegables de variantes

El color del menú desplegable de variantes cambia según el tema de color de la sección.

El campo de cantidad

El campo de cantidad se muestra en la página de detalles del producto si:

  • El nivel de stock del producto es mayor que uno.
  • Tiene variantes, independientemente de los niveles de stock de variantes individuales.

Para mostrar el nivel de stock actual de cada variante en la página de detalles del producto, habilita las etiquetas de disponibilidad limitada. Esto evitará que los clientes intenten agregar más de un producto a su carrito cuando el nivel de stock sea uno.

Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Único: Galapagos y Supply siguen diferentes ajustes de estilo. Visita la guía de plantillas para obtener información sobre cómo modificar el estilo de productos.

Diseño

Sección Estilos del sitio

  • Avanzada: Productos: Diseño
  • Clásico: Productos
Descripción Avanzado Clásico
Cambiar espaciado entre elementos Espacios n/a
Agregar espacio en blanco a la parte superior de la página Relleno superior n/a

Cambiar visualización de paginación

Pantalla de navegación: Solo en miga de pan, Solo en paginación, Ruta de navegación y Paginación, Ninguna Mostrar navegación del elemento del producto
Cambiar texto de paginación Estilo de paginación: Anterior/Siguiente, Títulos n/a
Cambiar texto de paginación Alineación de la navegación: Izquierda, centro, derecha, dividida n/a
Cambiar fuente de paginación Fuente de la navegación n/a
Cambiar color de paginación Color de la navegación n/a
Cambiar el color de la flecha entre los títulos de página en la navegación Color del separador de la navegación n/a

Sugerencias sobre paginación:

  • El pedido del producto se establece según el lugar en que aparecen en las páginas de la tienda. Se ordenan de izquierda a derecha.
  • No es posible limitar la paginación a una categoría específica. La paginación muestra todos los productos.

Imágenes

Al mirar un elemento individual, los clientes ven las imágenes del producto.

Sección Estilos del sitio

  • Avanzado; Productos: Galería
  • Clásico: Productos
Descripción Avanzado Clásico
Cambiar alineación de imagen Posición: Izquierda, Derecha n/a
Cambiar estilo de galería Diseño: Presentación de diapositivas, Apilado n/a
Cambiar ancho de imagen Ancho n/a
Establecer la forma de la imagen Relación de aspecto Tamaño de la galería de productos
Elige si la imagen del producto se recorta para llenar el contenedor. De lo contrario, se mostrará el color de fondo del producto detrás de la imagen. n/a Recorte automático de la galería de productos
Los ajustes en miniatura afectan las miniaturas de navegación que se muestran debajo de la imagen cuando se selecciona Diseño: Diapositivas. Alineación de las imágenes en miniatura: Izquierda, Centro, Derecha n/a
Cambiar ancho de miniaturas Ancho de la imagen en miniatura n/a
Cambiar espaciado entre miniaturas Espaciado de la imagen en miniatura n/a
Cambia el espacio entre las imágenes cuando se seleccione Diseño: Apilado. Espacios n/a

Información del producto

Sección Estilos del sitio

  • Avanzado; Productos: detalles
  • Clásico: Productos
Descripción Avanzado Clásico
Cambiar dónde se colocan los detalles en la página Alineación: Izquierda, Centro, Derecha n/a
Cambiar la altura de línea

La altura de las líneas

El ajuste de la altura de línea en la sección Cuerpo: Fuente también afecta la altura de línea aquí.

n/a
Cambiar espaciado entre letras Espacios n/a
Mostrar u ocultar título del producto Mostrar el título n/a
Cambiar fuente de título del producto Fuente del título n/a
Cambiar color de título del producto Color del título n/a
Mostrar u ocultar precio Mostrar precio n/a
Cambiar fuente del precio Fuente del precio n/a
Cambiar color del precio Color del precio n/a
Cambiar el color de los artículos en oferta Color del Precio de oferta n/a
Seleccionar dónde se muestra la descripción del producto Posición del extracto: Arriba del precio, Debajo del precio, Debajo del botón Añadir al carrito n/a
Cambiar fuente de descripción del producto Fuente del fragmento n/a
Cambiar color de descripción del producto Color del fragmento n/a
Cambiar color de enlace de descripción del producto Color del enlace del fragmento n/a
Ocultar o mostrar los botones Compartir Mostrar botones Compartir Compartir productos en redes sociales
Usar los ajustes de la sección de botones Compartir Modificar el estilo de los botones Compartir Modificar el estilo de los botones Compartir

Cantidad y variantes

Sección Estilos del sitio

  • Avanzado; Productos: Opciones
  • Clásico : Contenido principal
Descripción Avanzado Clásico
Mostrar u ocultar variantes Mostrar las variantes n/a
Muestra u oculta la cantidad. La cantidad solo se muestra cuando hay varios artículos disponibles. Mostrar Cantidad n/a
Cambiar la visualización de la cantidad Estilo: Solo texto, Cuadrado, Redondo, Píldora n/a
Añadir un color de borde a la visualización de cantidad Color del borde n/a
Añadir un color de fondo a la visualización de la cantidad Color de Fondo n/a
Cambiar fuente de visualización de la cantidad Fuente de la etiqueta n/a
Cambiar color de visualización de la cantidad Color de la etiqueta n/a
Establecer fuente de la cantidad y las variantes Fuente Sigue los ajustes de Encabezado o Encabezado 1 en todo el sitio.
Establecer color de texto de la cantidad y las variantes Color del texto n/a
Cambia la fuente del menú desplegable de la variante. No es posible cambiar la fuente del elemento del menú. Fuente n/a

El campo de cantidad

El campo de cantidad se muestra en la página de detalles del producto si:

  • El nivel de stock del producto es mayor que uno.
  • Tiene variantes, independientemente de los niveles de stock de variantes individuales.

Para mostrar el nivel de stock actual de cada variante en la página de detalles del producto, habilita las etiquetas de disponibilidad limitada. Esto evitará que los clientes intenten agregar más de un producto a su carrito cuando el nivel de stock sea uno.

Botón comprar

Sección Estilos del sitio

  • Avanzado: Mostrar botones
  • Clásico: Botones
Descripción Avanzado Clásico
Ocultar el botón Desmarcar el botón Mostrar n/a
Cambiar estilo de los botones Estilo: Sólido, Delineado, Elevado Estilo: Predeterminado, Sólido, Delineado, Con relieve
Cambiar forma de los botones Forma: Cuadrada, Redondeada, Píldora Forma: Cuadrada, Redondeada, Píldora
Agregar o quitar relleno de los botones Relleno: Pequeño, Mediano, Grande n/a
Cambiar color de los botones Color Color del botón
Cambiar color de texto de los botones Color del texto Color del texto
Cambiar fuente de los botones Fuente Fuente
Consejo: Cuando un producto se agota, el botón Añadir al carrito aparece atenuado.

Botón Área de pago

El botón Área de pago que aparece en la página del carrito de compras sigue la configuración de color de tu sitio. No es posible personalizar su forma o fuente.

Productos relacionados

Los productos relacionados se muestran en una cuadrícula en la parte inferior de la página. Puedes usar estos ajustes para cambiar su apariencia.

Sección Estilos del sitio

  • Avanzado; Productos: Productos relacionados
  • Clásica: Productos
Descripción Avanzado Clásico
Cambiar elementos por fila Elementos por fila Elementos por fila
Agregar o quitar espaciado entre elementos Espacio entre elementos Espacio entre elementos
Establecer relación de aspecto entre imágenes Relación de aspecto de la imagen Relación de aspecto de la imagen
Cambiar alineación del texto Alineación de los detalles: Centro, Izquierda Alineación de los detalles: Centro, Izquierda
Cambiar espaciado entre títulos Espaciado del título Espaciado del título

Carrito de compras

El ícono se muestra como un carrito en el encabezado del sitio. Para obtener más información, visita Visualización del ícono del carrito de compras.

Todas las plantillas admiten un botón Carrito de compras que muestra el número de artículos en el carrito de un cliente y lleva a la página del área de pago. Si tu carrito no aparece, consulta nuestras sugerencias para solucionar problemas. Para obtener más información sobre cómo aplicar estilo al ícono del carrito de compras de la plantilla, visita Visualización del ícono del carrito de compras.

Navegación por categorías

Después de añadir categorías a tus productos, crearán un menú de navegación en la parte superior de la página de aterrizaje. Los clientes pueden utilizar estos enlaces para filtrar los productos que les interesan. Ten en cuenta que, en ambas versiones, la navegación por categorías:

  • Solo se muestra después de haber agregado al menos una categoría.
  • No se muestra en las páginas de detalles.
  • Muestra todas las categorías, incluso las vinculadas a productos ocultos.

La navegación por categorías se puede mostrar en la parte superior de la página de tu tienda o en una barra lateral.

La fuente de navegación por categorías sigue el estilo de párrafo.

Dependiendo de la posición, las subcategorías se muestran en un menú anidado. Para cambiar la posición, abre los estilos de sección y haz clic en Barra lateral o Superior en Tipo de categorías. Para cambiar el orden de la navegación, haz clic y arrastra las categorías en el administrador de categorías.

  • Barra lateral: las subcategorías se mostrarán en un menú anidado en la página de tienda y en las páginas de categorías filtradas.
  • Arriba: las subcategorías se mostrarán en la página principal de categorías filtradas, pero no en las páginas de subcategorías filtradas.

Para ocultar la navegación por categorías, abre la configuración de categorías y desactiva el botón junto a Visibilidad del filtro. Repite esto para cada categoría. Para obtener más información, visita Cómo organizar productos.

La navegación por categorías se muestra en orden alfabético. Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Único: Galapagos y Supply siguen diferentes ajustes de estilo. No es posible ocultar la navegación por categorías en estas plantillas. Visita la guía de plantillas para obtener información sobre cómo modificar el estilo de la navegación por categorías.

Sección Estilos del sitio

  • Avanzado; Productos: Ordenar + Filtro
  • Clásica: Productos
Descripción Avanzado Clásico
Ocultar navegación por categorías Pantalla: ocultar Desmarcar Mostrar navegación por categorías
Habilitar, deshabilitar y alinear la navegación por categorías Pantalla: superior, lado izquierdo, lado derecho, ocultar n/a
Establece el ancho si la navegación por categorías está a la izquierda o a la derecha. Ancho n/a
Cambia el espacio debajo de la navegación. Margen n/a
Cambiar el espacio entre cada elemento de la fila Espacio entre elementos n/a
Establecer alineación del texto Alineación: Izquierda, Centro, Derecha n/a
Establecer fuente de la navegación Fuente

Fuente de navegación por Categorías

(No disponible en Bedford, Five, Ishimoto, Montauk y Native)

Establecer color de la navegación Color

Color de la navegación por categorías

(No disponible en Bedford, Five, Ishimoto, Montauk y Native)

Elegir los enlaces de color que se muestran al desplazarse Color del Área Activa

Color activo de la navegación por Categorías

(No disponible en Bedford, Five, Ishimoto, Montauk y Native)

Etiquetas de artículos en venta, agotados y con disponibilidad limitada

Los artículos agotados siempre muestran una etiqueta de agotado personalizable. En ambas versiones, puedes cambiar el texto de la etiqueta y su fuente y color. En la versión 7.0, puedes cambiar la forma y la ubicación de la etiqueta.

Las etiquetas de En venta y Disponibilidad limitada también se muestran si las has habilitado. La forma en que puedes modificar su estilo depende de la versión del sitio. Puedes cambiar el texto de la etiqueta de disponibilidad limitada en el panel Disponibilidad limitada, pero no es posible cambiar el texto de la etiqueta de en venta.

  • Los artículos agotados siempre muestran su rótulo de estado debajo de la imagen del producto en la página de la tienda y en la página de detalles del producto.
  • Las etiquetas En venta y Disponibilidad limitada siguen el color de tu sitio y los diversos ajustes de fuente.

Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Único: Galapagos y Supply siguen diferentes ajustes de estilo. Visita la guía de plantillas para obtener información sobre cómo modificar el estilo de productos.

Para acceder a estos ajustes de estilo, ve a la página de tienda que quieras editar antes de abrir Estilos del sitio.

Sección Estilos del sitio

  • Avanzado; Productos: rótulos de estado
  • Clásica: Productos
Descripción Avanzado Clásico
Ocultar el rótulo Estilo: Ninguno n/a
Establecer estilo del rótulo Estilo: Rectángulo, Cuadrado, Círculo, Ninguno n/a
Establecer color del rótulo de oferta Color de Venta n/a
Establecer color del rótulo de agotado Color de agotado n/a
Establecer fuente del rótulo Fuente n/a
Agregar o quitar relleno Relleno n/a
Establecer posición del rótulo Posición: Arriba a la izquierda, Arriba al centro, Arriba a la derecha, Centro a la izquierda, Centro al centro, Centro a la derecha, Abajo a la izquierda, Abajo al centro, Abajo a la derecha n/a
Superponer rótulo con la imagen del producto Recuadro: Flotante, Descarga, Anclar verticalmente, Anclar horizontalmente n/a
Cambiar tamaño del rótulo Tamaño del recuadro n/a
Color del Precio de oferta Utiliza Color de precio de oferta en la sección Productos: Detalles. n/a
Color de rótulo de estado Solo puede ser blanco o negro, según el color de fondo del rótulo. n/a
Color de la etiqueta de disponibilidad limitada Color de la etiqueta de disponibilidad limitada Color de la etiqueta de disponibilidad limitada
Fuente de la etiqueta de disponibilidad limitada Fuente de la etiqueta de disponibilidad limitada Fuente de la etiqueta de disponibilidad limitada

Zoom de imagen, vista rápida y efectos de desplazamiento

Siempre se muestra una imagen de producto al desplazarse en las páginas de la tienda cuando un producto tiene más de una imagen. Los detalles del producto siempre se muestran debajo de su imagen. Puedes habilitar la vista rápida en la configuración de la página o bloque. El color de fondo de lightbox de vista rápida sigue el color de sección de la tienda.

El zoom de imagen no está disponible en las páginas de tienda. Sin embargo, puedes activar lightbox y el zoom de imagen al hacer clic y desplazarte sobre la página de detalles del producto. Habilita estos efectos en el panel Elementos del producto:

  • Lightbox: abre la imagen en una ventana de lightbox al hacer clic.
  • Zoom: aumenta los detalles de la imagen al hacer clic o desplazarse.

Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
  • Galapagos admite las opciones alternativas de superposición de imágenes e información de productos.
  • Supply admite opciones únicas de superposición de información de productos.

Efectos al posicionar el cursor sobre el elemento

Para mostrar el ajuste de comportamiento en cuanto a cómo se desplaza un elemento en páginas avanzadas de la tienda, ve a la sección Producto: Detalles y selecciona Posición: Debajo.

Sección Estilos del sitio

  • Avanzada: Productos: Diseño
  • Clásica: Productos
Descripción Avanzado Clásico
Establecer la acción de desplazamiento

Comportamiento en cuanto a cómo se desplaza un elemento (se muestra cuando la posición Producto: Detalles está establecida en Debajo )

n/a
Muestra la segunda imagen en el editor de productos que aparece al desplazar el cursor Comportamiento en cuanto a cómo se desplaza un elemento: Mostrar imagen alternativa n/a
Difumina los detalles visibles del producto al desplazar el cursor

Comportamiento en cuanto a cómo se desplaza un elemento: Difuminar

n/a
Sin efecto de desplazamiento

En la sección Producto: Detalles , selecciona Posición: Debajo y, en la sección Producto: Diseño, elige Comportamiento en cuanto a cómo se desplaza un elemento: Ninguno

Títulos de lista de productos: Debajo
Muestra los detalles del producto al desplazarse en lugar de una imagen alternativa o un difuminado

En la sección Producto: Detalles, selecciona Posición: Superposición

Títulos de lista de productos: Superposición
Mostrar títulos de productos debajo de la imagen del producto n/a Títulos de lista de productos: Debajo
Cambiar color de superposición al desplazarse n/a Color de superposición del producto
Mostrar u ocultar precio del producto al desplazarse n/a Mostrar precio del producto

Sugerencias de imágenes alternativas:

  • Si la segunda imagen del producto tiene áreas transparentes, la primera imagen será visible en ellas al desplazarse.

Zoom de imagen

Sección Estilos del sitio

  • Avanzado: Elementos del producto
  • Clásico: n/a
Descripción Avanzado Clásico
Habilitar vista rápida de producto Acción de desplazamiento: Zoom n/a
Establecer el factor de zoom de imagen Factor de zoom de imagen n/a

Sugerencias de zoom de imagen:

  • Las imágenes con fondos transparentes (.png) mostrarán las imagen original detrás de la versión ampliada.

Vista rápida

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.

Los visitantes utilizan la vista rápida del producto para ver los detalles del artículo en lightbox sin salir de la página de la tienda. Esta función no está disponible en las páginas clásicas de la tienda, aunque las imágenes del producto se abren en lightbox desde las páginas de detalles del producto de estas plantillas.

Sección Estilos del sitio

  • Avanzado; Productos: Botón Vista rápida
  • Clásico: n/a
Descripción Avanzado Clásico
Personalizar el estilo, el color, la fuente, el relleno, la posición y el tamaño del botón de vista rápida Posición n/a
Personalizar el aspecto de lightbox Productos: Lightbox de vista rápida n/a
Mostrar descripción del producto Visualización de extracto: Truncar n/a
Agregar un filtro de color a la página de tienda detrás de lightbox Color de superposición n/a
Cambiar el botón de navegación y cerrar que aparece fuera de lightbox Controles n/a
Cambiar la fuente del título de vista rápida En la sección Productos: Detalles, selecciona Fuente del título. n/a

Sugerencias de Vista rápida:

  • Si el texto de Vista rápida tiene problemas de formato, intenta agregar los detalles del producto como texto sin formato.
  • La Vista rápida no está disponible en los dispositivos móviles.
  • El texto del botón Vista rápida no se puede personalizar.
  • 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.

Fuentes y colores

Los colores y fuentes de la página de la tienda y la página de detalles del producto siguen los ajustes de fuente y color de todo el sitio. También puedes cambiar el color de secciones de la tienda específicas en el editor de estilos de sección. Las páginas de detalles del producto siguen el tema de color de sección de la tienda.

  1. En la página de la tienda, haz clic en Editar diseño y, a continuación, abre Estilos del sitio.
  2. Haz clic en Fuentes.
  3. Elige una fuente y haz clic en para aplicar la fuente a partes específicas del sitio.

Utiliza estos ajustes para cambiar las fuentes de la página de tu tienda y de las páginas de detalles del producto:

Sección Elementos de la página de la tienda
Títulos Títulos de página, título de la sección Productos relacionados y títulos de productos
Párrafos Descripción del producto, precio y navegación por página
Botones Botones
Metadatos Estilos diversos, como etiquetas y precios
Avanzado: productos: lista Título de lista, precio de lista, estado de la lista
Avanzado: Página de detalles del producto Título del artículo, precio del artículo, descripción del artículo, campos de variantes

Utiliza la tabla siguiente para buscar las opciones de estilo de estas familias de plantillas:

  • Avanzado: Brine, Farro, Skye, Tremont, York
  • Clásico: Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Páginas de la tienda clásicas

El texto de la página clásica de tienda sigue los mismos ajustes de estilo que el texto del resto del sitio. Por ejemplo, para cambiar la fuente o el color del título del elemento, utiliza el ajuste Encabezado o Encabezado 1. Algunos elementos, como Navegación por categorías, tienen sus propios ajustes de fuente que se enumeran en esta guía en función del elemento al cual estás modificando el estilo.

Los menús desplegables de variantes son una excepción, ya que utilizan la misma fuente en todas las páginas clásicas de tienda. Esta fuente no se puede cambiar en Estilos del sitio.

Páginas de tienda avanzadas

Las fuentes de las páginas avanzadas de tienda siguen los ajustes de estilo del resto de tu sitio, pero tienen ajustes adicionales para elementos específicos de la página de tienda. Estos se enumeran a lo largo de esta guía en función del elemento al cual estás modificando el estilo.

Móvil

Los elementos del producto y la información se apilan verticalmente en smartphones, tabletas y navegadores angostos.

  • Actualmente, Vista rápida y Zoom de imagen no están disponibles en dispositivos móviles.
  • Los títulos y precios siempre se muestran debajo de las imágenes de productos en las páginas de tienda.
  • El color de superposición, la imagen alternativa y los efectos de difuminado no se muestran.
  • Cuando la navegación por categorías no puede caber en una línea, se muestra como una lista horizontal por la que los visitantes pueden desplazarse.

En la versión 7.1:

  • Las imágenes de la página de detalles del producto siempre se muestran en una presentación de diapositivas para que los clientes puedan desplazarse por ellas. Las imágenes en miniatura no se muestran debajo de la presentación.
  • La navegación por categorías se muestra horizontalmente para que los compradores deslicen por ella.
  • Los productos se muestran en una sola columna.
  • La ruta de navegación no se muestra.

En la versión 7.0:

  • Las páginas avanzadas de tienda tienen colores únicos en dispositivos móviles para títulos, precios y ofertas de artículos.
  • Los productos se muestran en dos o más columnas.

Visita los estilos avanzados para dispositivos móviles de la versión 7.0 para obtener información sobre las otras opciones para dispositivos móviles de tu plantilla. La versión 7.1 no tiene estilos para dispositivos móviles distintos.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 34 de 124
Cómo modificar el estilo de páginas de tienda