Personaliza las páginas de la tienda y las páginas de detalles del producto de tu sitio.
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.
Para obtener más información sobre cómo hacer cambios de estilo accesibles, visita Cómo crear un sitio de Commerce accesible.
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 luego haz clic en el ícono del pincel en la sección de la tienda que quieras editar. Para informarte mejor sobre los estilos de secciones de la tienda, visita las secciones de Página de 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:
- Abre la página de la tienda que quieres editar.
- Vuelve al panel del Sitio web, haz clic en Diseño y, a continuación, en Estilos del sitio.
- Utiliza los ajustes de las secciones Productos para cambiar el estilo de la página de aterrizaje.
- 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 que visiten la página de tu tienda verán todas las imágenes destacadas de los elementos del producto distribuidas en una cuadrícula. La página de tienda muestra hasta 200 productos. Si hay más de 200 productos, los clientes pueden hacer clic en Siguiente para ver más productos.
En los estilos de la sección de la tienda, puedes personalizar los detalles que siguen. Ten en cuenta que tus 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
- Botón Agregar al carrito: muestra el botón Agregar al carrito en la página de la tienda, además de las páginas de detalles del producto, si el producto tiene una variante o no tiene ninguna variante. Si el producto tiene más de una variante, aparecerá un botón de Ver opciones en la página de la tienda.
- 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:
- Configura los colores de tu sitio o crea un aspecto único para la sección de tu tienda eligiendo un tema de sección distinto.
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 que visiten la página de tu tienda verán todas las imágenes destacadas de los elementos del producto distribuidas en una cuadrícula. Ajusta el estilo de la cuadrícula con estas opciones.
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 oferta en equipos de escritorio | Color del precio de oferta | n/a |
| Establecer el color del precio de oferta en dispositivos móviles | Color del precio de oferta (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:
- Abre la página de detalles del producto que quieras editar.
- Haz clic en Editar diseño en la esquina superior izquierda. En algunos sitios, es posible que debas pasar el cursor sobre Editar, hacer clic en Editar diseño y luego, clic en el icono de pincel.
Elige entre las siguientes opciones de diseño:
- Simple: la imagen y descripción del producto se muestran una al lado de la otra, rodeadas de espacios en blanco.
- Envolvente: las imágenes del producto se ajustan a la descripción. Las imágenes siempre se alinean a la izquierda.
- Mitad: la imagen del producto divide la página con la descripción. La imagen siempre se alinea a la izquierda.
- Completo: las imágenes del producto se muestran en un carrusel sin bordes encima de la descripción.
Si seleccionas el diseño Simple, también puedes personalizar estas opciones:
- Visualización de variantes
- Ancho de imagen
- Relación de aspecto de imagen (solo diseño de diapositivas y carrusel).
- En el diseño de carrusel, la relación de aspecto establece las proporciones del contenedor de imágenes, pero es posible que la imagen no se recorte para llenarla. Te recomendamos agregar imágenes que tengan la misma relación de aspecto que hayas elegido en la configuración.
- Text Alignment (Alineación del texto)
- Estilo de navegación del producto
- Posición de la descripción: donde se muestra la descripción del producto.
- Botón Agregar al carrito: la opción En línea coloca el botón junto al campo de cantidad.
- 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. La alineación de contenido está disponible para los diseños en diapositivas y carrusel, no en el apilado.
- Diseño (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 imágenes en miniatura en la galería: coloca las imágenes destacadas del producto cuando el diseño es diapositivas.
- Ancho del formulario
- Tamaño y color 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
La frecuencia de la suscripción
Si vendes productos por suscripción, puedes cambiar los colores que se muestran en la sección de frecuencia de suscripción de la página de detalles del producto. Abre la combinación de colores de tu sitio y cambia los colores en la página de detalles del producto: suscripciones.
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.
Botones Agregar al carrito y Finalizar compra
El botón Agregar al carrito puede mostrarse debajo de las miniaturas del producto en la página de tienda y en las páginas de detalles del producto individuales. En las páginas de tienda, los colores de los botones siguen el texto y los colores de fondo del producto. El botón Agregar al carrito en las páginas de detalles del producto y el botón Pagar en la página del carrito de compras siguen los ajustes de estilo de botón principal y la configuración de color del sitio. Ten en cuenta que las opciones de estilo de botón se aplican a la mayoría de los botones de tu sitio para garantizar una apariencia congruente. Estos botones siempre dirigen a los clientes al carrito y página de pago de Squarespace. No es posible usar estos botones para enlazar a sitios externos.
Para conservar el aspecto de las páginas de detalles de productos, los ajustes de relleno horizontal no afectan los botones Agregar al carrito. No es posible ocultar el botón Agregar al carrito en la versión 7.1. Cuando un producto está agotado, el botón Agregar al carrito aparece atenuado.
Visualización de variantes
En el diseño simple, puedes mostrar las variantes como botones o como un menú desplegable. Los botones de las variantes siguen los ajustes de estilo del botón secundario de tu sitio. Todos los demás diseños muestran las variantes en los menús desplegables. El color del menú desplegable de las variantes cambia según el tema cromático de la sección. Sigue la familia de fuentes de los campos de variantes. . Ten en cuenta que la opción de registrarte en una lista de espera de productos solo aparece cuando las variantes se muestran en los menús desplegables.
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 del inventario actual de cada variante en la página de detalles del producto, activa las etiquetas de disponibilidad limitada. Esto impedirá que los clientes intenten agregar más de un producto a su carrito cuando el nivel del inventario sea uno. No es posible cambiar el tamaño del campo de cantidad.
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 de visualización de variantes. 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 de forma predeterminada. Si ocultas el ícono del carrito de compras, aparece en la parte inferior de la página cuando los clientes agregan artículos a su carrito. Para obtener más información, consulta 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. Ten en cuenta que la navegación por categorías siempre se muestra en la parte superior de los dispositivos móviles.
La fuente de navegación por categorías sigue el estilo de párrafo. El color sigue el retoque de Navegación por categorías en Productos: Cuadrícula básica en los Estilos del sitio.
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 oferta, 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 Oferta 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 oferta.
- 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 Oferta 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 oferta | 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; Productos: Ampliación de imagen
- Clásico: n/a
| Descripción | Avanzado | Clásico |
| Activar o desactivar la ampliación de imagen | Activar la Ampliación de imagen | n/a |
| Establecer el factor de zoom de imagen | Factor de zoom de imagen | n/a |
| Establecer la ampliación de la imagen para activarla al hacer clic o desplazar el cursor | La imagen se amplia al | n/a |
| Establecer las imágenes del producto para que se abran en un lightbox |
Habilita lightbox. Si la configuración Habilitar lightbox no aparece, activa ampliación de imagen y configura la ampliación para activarla al desplazar el cursor. Debería aparecer la configuración Habilitar lightbox. Puedes desactivar la ampliación de imagen después de habilitar lightbox. Para habilitar tanto la ampliación de imagen como lightbox, la ampliación debe estar configurada para activarse al desplazar el cursor. |
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.
- En la página de la tienda, haz clic en Editar diseño y, a continuación, abre Estilos del sitio.
- Haz clic en Fuentes.
- 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 usan la misma fuente en todas las páginas de tienda clásicas. 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 estrechos.
- 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.
- El botón Agregar al carrito se muestra antes de la descripción en las páginas del producto con los diseños Completo y Simple .
- La navegación por categorías se muestra horizontalmente para que los compradores deslicen por ella.
- Los productos se muestran en una o dos columnas. En la vista móvil, haz clic en Editar y luego en Editar sección. Haz clic en el icono + o - para cambiar el número de columnas que se muestran.
- En los dispositivos móviles, la ruta de navegación aparece cuando los visitantes hacen clic en las etiquetas de categoría en la página de aterrizaje de una tienda. La ruta de navegación no aparece cuando los visitantes hacen clic en un producto directamente en la página de una tienda.
- Las imágenes en las páginas de detalles del producto se muestran con una relación de aspecto 1:1, independientemente del diseño.
En la versión 7.0:
- Las páginas de tienda avanzadas tienen colores únicos en dispositivos móviles para títulos, precios y precios de 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.