Los que visiten la página de tu tienda encontrarán todas tus imágenes destacadas de los productos 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.

Para dar estilo a la sección de la página de tienda:

1. Abre la página de la tienda que quieres editar.
2. Haz clic en Editar.
3. Haz clic en Editar sección en la sección de tienda. Puedes personalizar los detalles a continuación. Los cambios solo se aplican a esta sección de la tienda.

En la pestaña Elementos, puedes personalizar:

• Título de la tienda: muestra el título de la página en la parte superior de la sección.
• Migas 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.
• Etiqueta de categorías: muestra la etiqueta “Categorías” en el menú de categorías.
• Etiqueta de filtros: muestra la etiqueta “Filtros” en el menú de filtros.
• Filtros: agrega filtros para ayudar a los clientes a navegar por tus productos por etiqueta.
• Descripción del producto: muestra u oculta la descripción del producto cuando tienes el diseño de lista.
• Precio: muestra u oculta el precio en la imagen en miniatura del producto.
• Botón Agregar al carrito: se muestra debajo de las imágenes en miniatura del producto en la página de tienda y en las páginas de detalles.

En la pestaña Diseño, puedes personalizar:

• Diseño: muestra las imágenes en miniatura de los productos en una cuadrícula o lista. En el diseño de lista, muestra una vista previa de las descripciones de tus productos.
• Alineación del título: establece la justificación del texto para el título de tu tienda.
• Colocación del menú: muestra la navegación por categorías en la parte superior de la sección o como una barra lateral.
• Estilo de categorías: cambia el estilo del menú de tus categorías como un menú desplegable, subnavegación o botones.
• Número de columnas en el diseño de cuadrícula (dos como mínimo).
• Espaciado entre columnas y filas.
• Fondo: muestra u oculta un fondo que rodee la imagen en miniatura de tu producto, similar a un marco de imagen. Establece el color de fondo, curva las esquinas y elige el tipo, el color y el grosor del trazo.
• Estilo y alineación del botón.
• Relación de aspecto de la imagen y espaciado del texto.
• Esquinas: el fondo de la imagen en miniatura y las imágenes del producto pueden tener esquinas cuadradas o curvas.
• Ancho de la sección y relleno vertical.
• Divisor: muestra un divisor entre la sección de tu tienda y otras secciones de la página. Elige la forma del divisor, el tipo de trazo, el color y el grosor.

En la pestaña Colores:

• Selecciona un tema de sección para la sección de tu tienda.
• Haz clic en el icono del lápiz en un tema para personalizarlo. Los cambios afectan a todas las secciones que usan ese tema.

Filtros de página de tienda

Crea filtros de productos para ayudar a tus clientes a encontrar los productos y los servicios más interesantes para ellos. Los filtros utilizan las etiquetas de producto para mostrar una selección de productos en la página de tu tienda.

Puedes agregar filtros a las páginas de tienda que tengan 200 productos o menos. El botón del filtro usa los mismos estilos que tus botones principales.

Las opciones de estilo disponibles dependen de la familia de plantillas de tu sitio y el tipo de página de tienda.

Nota: Galapagos y Supply siguen diferentes ajustes de estilo. Visita tu guía de plantillas para informarte sobre el estilo de productos.

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

1. Abre la página de la tienda que quieres editar.
2. Vuelve al panel del sitio web.
3. Haz clic en Diseño.
4. Haz clic en Estilos del sitio.
5. Utiliza los ajustes de las secciones Productos para cambiar el estilo de la página de aterrizaje.
6. 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.

Consejo:

• 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 tu plantilla tenga funciones, como imagen de banner o encabezados de página, que afectan el aspecto de la página de tienda.

Diseño de página de 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. Puedes personalizar la cuadrícula con estos ajustes en la sección estilos del sitio Producto: diseño (páginas de tienda avanzadas) o en la sección estilos del sitio Productos (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Cambiar el número de elementos por fila
  • Avanzada: elementos por fila
  • Clásica: productos por fila
• Cambiar el espacio entre cada elemento de la fila
  • Avanzada: espaciado de elementos
• Cambiar la forma de la imagen. Las imágenes se recortan para ajustarse.
  • Avanzada: espaciado de elementos
• Establecer la forma del contenedor de la imagen
  • Clásica: tamaño del elemento del producto
• Elegir si la imagen se recorta para rellenar el contenedor
  • Clásica: 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
  • Clásica: color de fondo del producto

Información del producto de la página de tienda

Para mostrar ajustes móviles en Páginas de tienda avanzadas, selecciona Posición: Superposición. Puedes diseñar la información del producto con estos ajustes en la sección de Producto: detalles de los estilos del sitio (páginas de tienda avanzadas) o en la sección de Productos de los estilos del sitio (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Establecer el título y el precio para mostrar debajo de la imagen o al posicionar el cursor
  • Avanzada: posición: debajo, superposición
  • Clásica: títulos de la lista de productos: debajo, superposición
• Alinear texto cuando Títulos de lista de productos: debajo está habilitado
  • Clásica: alineación de la lista de productos: centro, izquierda
• Establece el color de la superposición al desplazar el cursor cuando se selecciona Títulos de la lista de productos: superposición. Ajusta el control deslizante para establecer la transparencia.
  • Clásica: color de superposición del producto
• Elegir dónde se muestra el texto en navegadores móviles
  • Avanzada: posición (móvil): debajo, superposición
• Elegir cómo se alinea el texto
  • Avanzada: alineación
• Establece el color de la superposición al desplazar el cursor cuando se selecciona Posición: superposición. Mueve el control deslizante para establecer la transparencia.
  • Avanzada: color de superposición
• Cambiar aún más la alineación del texto cuando esté configurado para que se muestre al posicionar el cursor
  • Avanzada: relleno de la superposición
• Cambiar el espaciado debajo de cada fila
  • Avanzada: espaciado
• Desmarca esta opción para ocultar los títulos de los elementos
  • Avanzada: mostrar el título
• Establecer la fuente del título
  • Avanzada: fuente del título
• Establecer el color del título
  • Avanzada: color del título
• Establecer el color del título en dispositivos móviles
  • Avanzada: color del título (móvil)
• Establece el espacio entre el texto y la imagen cuando se configura en Posición: Debajo
  • Avanzada: espaciado de títulos
• Desmarca para ocultar los precios
  • Avanzada: mostrar precio
  • Clásica: mostrar precio del producto
• Establecer la fuente del precio
  • Avanzada: fuente de precio
• Establecer el color del precio en equipos de escritorio
  • Avanzada: color del precio
• Establecer el color del precio en dispositivos móviles
  • Avanzada: color del precio (dispositivos móviles)
• Establecer el color del precio de oferta en equipos de escritorio
  • Avanzada: color del precio de oferta
• Establecer el color del precio de oferta en dispositivos móviles
  • Avanzada: color del precio con descuento (móvil)
• Establecer el espacio entre el precio y el título
  • Avanzada: espaciado del precio

Los cambios se aplican a todas las páginas de detalles del producto en la misma página de la tienda. Para modificar el estilo de la página de detalles del producto:

1. Abre la página de detalles del producto que quieras editar.
2. Haz clic en Editar y luego en Editar sección.

En la pestaña Formato, 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.
• Ajuste: las imágenes del producto se ajustan a la descripción. Las imágenes siempre están alineadas a la izquierda.
• Mitad: la imagen del producto divide la página con la descripción. La imagen siempre está alineada 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, puedes personalizar estas opciones:

• Ancho del contenido.
• Diseño y espaciado de imágenes: elige entre diseños de diapositivas, apilados o en carrusel cuando tu producto tenga varias imágenes. Si el diseño es en diapositivas, se muestran imágenes en miniatura de las otras imágenes del producto.
• Visualización de variantes.
• Alineación del texto.
• Alineación de contenido: elige entre superior o al centro. La alineación superior puede mostrar un 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.
• Anchura del formulario.
• Estilo de navegación de productos.
• Posición de la descripción: dónde 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.
• Relación de aspecto de la galería (solo diseño de diapositivas y en carrusel): en el diseño en carrusel, la relación de aspecto establece las proporciones del contenedor de imágenes, pero es posible que tu imagen no se recorte para llenarlo. Te recomendamos que agregues imágenes que tengan la misma relación de aspecto que elegiste en tu configuración.
• Ubicación y ancho 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 en diapositivas.
• Tamaño de la flecha del carrusel (solo diseño de diapositivas y en carrusel).
• Acción al hacer clic: elige entre ninguna, zoom o lightbox, dependiendo del diseño.
• Acción desplazar el cursor.

En la pestaña Colores:

• Selecciona un tema de sección para la sección de tu tienda.
• Haz clic en el icono del lápiz en un tema para personalizarlo. Ten en cuenta que esto afecta a todas las secciones que usan ese tema.

Personalizar la visualización de variantes del producto

En el diseño simple, puedes mostrar las variantes como botones o en un menú desplegable. Todos los demás diseños muestran las variantes en los menús desplegables.

• Botones de variante: sigue los estilos de formulario de tu sitio. Abre los estilos del sitio y haz clic en > junto a Formularios. Haz clic en Opciones de selección y luego haz clic en Radio.
• Menú desplegable de variantes: usa la familia de fuentes de los campos de Variante y su color depende de la combinación de colores de la sección.

Nota: La opción para registrarse en una lista de espera de productos solo aparece cuando las variantes se muestran en los menús desplegables.

Modificar el estilo de los botones de Agregar al carrito y área de pago en la página de tienda

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.

Para conservar la apariencia de las páginas de detalles de tu producto, los ajustes de relleno horizontal no afectan los botones Agregar al carrito. Cuando un producto se agota, el botón Agregar al carrito aparece atenuado.

En las páginas de tienda, los colores de los botones usan los colores del texto y de fondo del producto. El botón Agregar al carrito en las páginas de detalles del producto y el botón Área de pago en la página del carrito de compras siguen los ajustes de estilo del botón principal y la configuración de color de tu sitio.

Administra los colores del minicarrito

El minicarrito emplea las combinaciones de colores de tu sección para garantizar su visibilidad. El color del minicarrito contrasta automáticamente con el fondo de tu sección. Para cambiar el color del minicarrito, cambia el color de fondo de la sección o edita las combinaciones de colores de tu sitio.

¿Puedo ocultar el botón de Agregar al carrito en la página de tienda?

No puedes ocultar el botón de Agregar al carrito sin usar código personalizado. Este tema ha aparecido en el Squarespace Forum, pero está fuera del alcance de nuestra asistencia.

Para promocionar tus productos sin la opción de comprarlos, puedes mostrarlos en tu sitio mediante una página de diseño con bloques de imagen y bloques de texto.

¿Cuándo aparece el campo de cantidad en la página de tienda?

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

• El nivel del inventario del producto es mayor que uno.
• Tiene variantes, independientemente de los niveles del inventario de las 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 puedes cambiar el tamaño del campo de cantidad. Puedes ocultar el campo de cantidad para los productos físicos y de servicio en tu configuración del área de pago.

Personaliza los productos relacionados

La sección de productos relacionados en las páginas de detalles del producto sigue los ajustes de los estilos de sección de la tienda y tus ajustes de fuente de todo el sitio.

Si vendes productos por suscripción, puedes cambiar los colores de 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.

Las opciones de estilo disponibles dependen de la familia de plantillas de tu sitio y el tipo de página de tienda.

Nota: Galapagos y Supply siguen diferentes ajustes de estilo. Visita tu guía de plantillas para informarte sobre el estilo de productos.

Diseño de la página de detalles del producto

Personaliza el diseño en la sección de estilos del sitio Producto: diseño (páginas de tienda avanzadas) o en la sección de estilos del sitio Productos (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Cambiar espaciado entre elementos
  • Avanzada: espaciado
• Agregar espacio en blanco a la parte superior de la página
  • Avanzada: relleno superior
• Cambiar visualización de paginación
  • Avanzada: pantalla de navegación: solo en miga de pan, solo en paginación, ruta de navegación y paginación, ninguna
  • Clásica: mostrar navegación del elemento del producto
• Cambiar texto de paginación
  • Avanzada: estilo de paginación: anterior/siguiente, títulos
• Cambiar texto de paginación
  • Avanzada: alineación de la navegación: izquierda, centro, derecha, dividida
• Cambiar fuente de paginación
  • Avanzada: fuente de la navegación
• Cambiar color de paginación
  • Avanzada: color de la navegación
• Cambiar el color de la flecha entre los títulos de página en la navegación
  • Avanzada: color del separador de la navegación

Nota:

• El orden de los productos se establece según su ubicación en las páginas de tienda. Se ordenan de izquierda a derecha.
• La paginación muestra todos los productos. No puedes limitarla a una categoría específica.

Imágenes de la página de detalles del producto

Al ver un elemento individual, los clientes ven las imágenes del producto. Modifica el estilo las imágenes en la sección Productos: galería de estilos del sitio (páginas de tienda avanzadas) o en la sección de estilos del sitio Productos (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Cambiar alineación de imagen
  • Avanzada: posición: izquierda, derecha
• Cambiar estilo de galería
  • Avanzada: diseño: diapositivas, apilado
• Cambiar ancho de imagen
  • Avanzada: ancho
• Establecer la forma de la imagen
  • Avanzada: relación de aspecto
  • Clásica: 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.
  • Clásica: 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.
  • Avanzada: alineación de imagen en miniatura: izquierda, centro, derecha
• Cambiar ancho de miniaturas
  • Avanzada: ancho de la imagen en miniatura
• Cambiar espaciado entre miniaturas
  • Avanzada: espaciado de imagen en miniatura
• Cambia el espacio entre las imágenes cuando se seleccione Diseño: Apilado.
  • Avanzada: espaciado

Página de detalles del producto Información del producto

Personaliza el estilo de la información del producto en la sección de estilos del sitio Productos: detalles (páginas de tienda avanzadas) o en la sección de estilos del sitio Productos (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Cambiar dónde se colocan los detalles en la página
  • Avanzada: alineación: izquierda, centro, derecha
• Cambiar la altura de línea
  • Avanzada: altura de la línea. El ajuste de la altura de línea en la sección Cuerpo: fuente también afecta la altura de línea aquí.
• Cambiar espaciado entre letras
  • Avanzada: espaciado
• Mostrar u ocultar título del producto
  • Avanzada: mostrar el título
• Cambiar fuente de título del producto
  • Avanzada: fuente del título
• Cambiar color de título del producto
  • Avanzada: color del título
• Mostrar u ocultar precio
  • Avanzada: mostrar precio
• Cambiar fuente del precio
  • Avanzada: fuente de precio
• Cambiar color del precio
  • Avanzada: color del precio
• Cambia el color de los artículos en oferta
  • Avanzada: color del precio de oferta
• Selecciona dónde se muestra la descripción del producto
  • Avanzada: posición del extracto: arriba del precio, debajo del precio, debajo del botón Agregar al carrito
• Cambiar fuente de descripción del producto
  • Avanzada: fuente del extracto
• Cambiar color de descripción del producto
  • Avanzada: color del extracto
• Cambiar color de enlace de descripción del producto
  • Avanzada: color del enlace del extracto
• Ocultar o mostrar los botones para compartir
  • Avanzada: mostrar botón para compartir
  • Clásica: compartir productos en redes sociales
• Usar los ajustes de la sección de botones Compartir
  • Avanzada: estilo de los botones para compartir
  • Clásica: estilo de los botones para compartir

Página de detalles del producto: cantidad y variantes

Modifica el estilo de la cantidad y variantes en la sección de estilos del sitio Productos: Opciones (páginas de tienda avanzadas) o en la sección de estilos del sitio Contenido principal (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Mostrar u ocultar variantes
  • Avanzada: mostrar variantes
• Muestra u oculta la cantidad. La cantidad solo se muestra cuando hay varios artículos disponibles.
  • Avanzada: mostrar cantidad
• Cambiar la visualización de la cantidad
  • Avanzada: estilo: solo texto, cuadrado, redondeado, píldora
• Añadir un color de borde a la visualización de cantidad
  • Avanzada: color del borde
• Añadir un color de fondo a la visualización de la cantidad
  • Avanzada: color de fondo
• Cambiar fuente de visualización de la cantidad
  • Avanzada: fuente de la etiqueta
• Cambiar color de visualización de la cantidad
  • Avanzada: color de la etiqueta
• Establecer fuente de la cantidad y las variantes
  • Avanzada: fuente
  • Clásica: sigue los ajustes de encabezado o encabezado 1 en todo el sitio.
• Establecer color de texto de la cantidad y las variantes
  • Avanzada: color del texto
• Cambia la fuente de visualización de variantes. No es posible cambiar la fuente del elemento del menú.
  • Avanzada: fuente

¿Cuándo aparece el campo de cantidad en la página de detalles del producto?

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

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

Consejo: 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.

¿Puedo ocultar el menú desplegable de cantidad?

Puedes ocultar la cantidad de productos en la versión 7.0 si la plantilla de tu sitio pertenece a las familias Brine, Farro, Skye, Tremont o York. En estas plantillas, para ocultar el menú desplegable de cantidad en las páginas de elementos:

1. Ve a la página de tu tienda.
2. Abre el producto en cuestión.
3. Vuelve al panel de Sitio web, haz clic en Diseño y, a continuación, en Estilos del sitio.
4. Desplázate hacia abajo hasta la sección Productos: Opciones.
5. Quita la marca de Mostrar cantidad.

Consejo: la opción de cantidad continuará apareciendo en el área de pago. Puedes desactivarla para los servicios en todas las plantillas.

Botón de Agregar al carrito en la página de detalles

Cantidad y variantes de estilo en la sección mostrar botones de estilos del sitio (páginas de tienda avanzadas) o en la sección de estilos del sitio botones (páginas de tienda clásicas), según corresponda.

Descripción del estilo

• Ocultar el botón
  • Avanzada: desmarca el botón Mostrar
• Cambiar estilo de los botones
  • Avanzada: estilo: sólido, delineado, elevado
  • Clásica: estilo: predeterminado, sólido, delineado, elevado
• Cambiar forma de los botones
  • Avanzada: forma: cuadrada, redondeada, círculo
  • Clásica: forma: cuadrada, redondeada, círculo
• Agregar o quitar relleno de los botones
  • Avanzada: relleno: pequeño, mediano, grande
• Cambiar color de los botones
  • Avanzada: color
  • Clásica: color del botón
• Cambiar color de texto de los botones
  • Avanzada: color del texto
  • Clásica: color del texto
• Cambiar fuente de los botones
  • Avanzada: fuente
  • Clásica: fuente

Nota: Cuando un producto se agota, el botón Agregar al carrito aparece atenuado.

Botón del área de pago de la página de detalles

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 puedes personalizar su forma ni su fuente.

Productos relacionados en la página de detalles del producto

Los productos relacionados se muestran en una cuadrícula en la parte inferior de la página.