brooklyn

Brooklyn es un tema hecho a medida para la tienda de ropa moderna. Las características incluyen un diseño adaptable para dispositivos móviles, una tipografía única, una presentación de diapositivas de la página principal de borde a borde, una cuadrícula dinámica de productos y páginas de productos que permiten saber la disponibilidad de los artículos para cada tamaño, a simple vista.

Brooklyn es ideal si tienes lo siguiente:

  • Presentaciones de diapositivas de pantalla completa
  • Menús pequeños
  • Más de 5 productos

Si tienes una mayor oferta de productos o si quieres un tema que muestre imágenes más grandes de productos, prueba Venture, Boundless o Supply.

Si tienes menos de 5 productos, prueba Jumpstart.

Descarga Brooklyn de la Tienda de plantillas de Shopify >

Para ver las secciones exclusivas de Brooklyn, haz clic en el botón Secciones. Para más información sobre ajustes exclusivos de Brooklyn, incluyendo ajustes de color, fuente y favicon, haz clic en el botón Configuración de plantilla. Para consejos y trucos para hacer que tu tienda se vea increíble, haz clic en el botón Consejos.

Puedes usar el editor de temas para crear contenido y organizar el diseño de tu tienda virtual.

Secciones comunes

Brooklyn incluye tres secciones que aparecen en cada página de tu tienda:

  • La sección de menú de barra lateral , que se desliza desde la izquierda y generalmente incluye los enlaces "Buscar", "Quiénes somos" e "Iniciar sesión".
  • La sección Encabezado , que se muestra en la parte superior de la página, y normalmente incluye tu logotipo y menús de navegación.
  • La sección de Pie de página , que se muestra en la parte inferior de la página, y normalmente incluye enlaces para buscar en el sitio, y el enlace Quiénes somos, e información sobre derechos de autor.

Puedes editar las secciones del menú de encabezado y pie de página desde cualquier página en el editor de temas. A diferencia de otros tipos de secciones, el editor de temas muestra las secciones de encabezado y menú de barra lateral, independientemente de la página de la tienda que estés viendo en la vista previa del tema.

Brooklyn incluye varios ajustes exclusivos para el contenido del encabezado y menú de barra lateral.

Menú de la barra lateral

Brooklyn tiene un menú de barra lateral que se aparece al hacer clic en el ícono de menú.

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Menú de barra lateral.

  3. En el menú desplegable Menú superior , selecciona un menú superior para el menú de barra lateral.

  4. En el menú desplegable Menú inferior , selecciona una parte inferior para el menú de barra lateral.

  5. Haz clic en Guardar.

Encabezado

You can add your company's logo to your store's heading. You can use a custom logo image with Brooklyn. The best format is a .png file with a transparent background. Logo images should be 450 x 200px. You can resize the logo image by adjusting the width.

También puedes agregar un menú y un ícono de búsqueda al encabezado de tu tienda.

Para subir un logotipo personalizado:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Encabezado.

  3. En el Menú desplegable, selecciona el menú que quieres mostrar en el encabezado.

  4. En el área Logotipo , haz clic en Seleccionar imagen y luego realiza una de las siguientes acciones:

- Para seleccionar una imagen que ya has subido a tu panel de control de Shopify, haz clic en la pestaña Biblioteca. - Para seleccionar una imagen desde tu computadora, haz clic en la pestaña Biblioteca , y luego haz clic en el botón del signo "más".

Si estás usando una diapositiva en tu página de inicio, es posible que tu logotipo no sea legible si se muestra sobre una diapositiva oscura:

Si esto sucede, puedes cargar otra versión de tu logotipo cuando tengas una diapositiva oscura en tu página de inicio. En el área de Logotipo de página de inicio , carga una versión más clara de tu logotipo. Idealmente, este logotipo debería ser blanco:

Pie de página

El pie de página de tu tienda es el contenido que siempre aparece en la parte inferior de cada página de tu tienda:

Con Brooklyn, puedes cambiar el menú que se muestra.

Para personalizar la sección del pie de página:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en la sección Pie de página.

  3. Desde el Menu de pie de página , selecciona el menú que deseas mostrar. Por defecto, se selecciona el menú de Pie de página , que incluye los enlaces "Buscar", "Quiénes somos" e "Inicio de sesión".

  4. Haz clic en Guardar.

Diapositivas

Brooklyn utiliza un carrusel en pantalla completa o "héroe", así que el mejor tamaño para la imagen del carrusel es de 1200px de ancho. Brooklyn es un tema adaptable, es decir, ajusta automáticamente la talla de la imagen para que calce en las pantallas de computadores y de dispositivos móviles. Cuando uses temas ajustables como Brooklyn te recomendamos que sigas las siguientes indicaciones:

  • Evita insertar texto en la imagen del carrusel porque podría cortarse cuando se reajuste el tamaño de la imagen. Utiliza mejor un texto de encabezado y sub-encabezado en cada diapositiva. Cuando agregas texto a un carrusel puedes escoger texto claro u oscuro para asegurarte de que el texto sea legible sobre la imagen del carrusel. También puedes agregar un botón para vincular la diapositiva a una URL.
  • Algunas imágenes grandes pueden ser recortadas en los temas adaptables. Si tu carrusel de imágenes contiene imágenes grandes, es posible que algunas partes de éstas no se vean en pantallas más pequeñas. Lee más acerca de las mejores prácticas para las imágenes de carruseles en Subir imágenes.

Puedes optar por que las imágenes del carrusel roten automáticamente seleccionando Rotar automáticamente entre diapositivas , y luego seleccionando el intervalo para que las imágenes cambien.

Para modificar la configuración del carrusel para tu página de inicio:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Presentación.

  3. En el área de Contenido , haz clic en Diapositiva.

  4. En el área Imagen , haz clic en Seleccionar imagen y luego realiza una de las siguientes acciones:

- Para seleccionar una imagen que ya has subido a tu panel de control de Shopify, haz clic en la pestaña Biblioteca. - Para seleccionar una imagen de la Colección de imágenes de Burst de Shopify, haz clic en la pestaña Imágenes gratuitas. Desde aquí puede ingresar un término de búsqueda o explorar las categorías de imágenes. - Para seleccionar una imagen desde tu computadora, haz clic en la pestaña Biblioteca , y luego haz clic en el botón del signo "más".

  1. En el área Superposición , selecciona el color para la capa en el campo Superposición , y configura la opacidad para la superposición en el campo Opacidad.

  2. En los campos Texto de encabezado y Texto de sub-encabezado inserta el texto que aparecerá en el carrusel.

  3. Si deseas mostrar un botón que vincule a una URL, inserta el texto que aparecerá en el botón en el campo Texto botón y pega la URL en el campo Enlace diapositiva.

  1. Si deseas que las diapositivas roten automáticamente marca Rotar automáticamnte entre diapositivas , y selecciona la frecuencia a la que quieres que roten a partir del menú desplegable Diapositvas cambian cada.

Texto enriquecido

Usa la sección Texto enriquecido para proponer cualquier contenido escrito que desees que aparezca en tu página de inicio o para incrustar cualquier página creada en tu panel de control de Shopify. Por ejemplo, puedes presentar los próximos eventos incrustando tu página de blog o muestra una página con alguno de los siguientes objetos:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Texto enriquecido.

  3. Si deseas agregar texto, haz clic en Texto enriquecido e inserta tu texto en el campo Texto. Haz clic en los íconos negrita o itálica para formatear el texto seleccionado.

  4. Si deseas mostrar una página de tu tienda, haz clic en Agregar contenido y luego haz clic en Página. Selecciona una página para mostrarla como tu página de inicio a partir del menú desplegable.

Lista de colecciones

Con Brooklyn, puedes mostrar hasta 9 colecciones en tu página de inicio.

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Colección.

  3. Selecciona una colección para mostrar a partir del menú desplegable.

  4. En el área de Configuración , inserta el texto que desees que aparezca encima de las colecciones en el campo Encabezado.

  5. Haz clic en Guardar.

colección destacada

Con Brooklyn puedes mostrar productos de una de tus colecciones en tu página de inicio. Puedes seleccionar una vista en cuadrícula o en collage para la colección destacada en tu página de inicio.

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Colección destacada.

  3. En el campo Encabezado , inserta el texto que desees que aparezca encima de la colección.

  4. Selecciona una colección a partir del menú desplegable Colección. Se mostrarán un máximo de 50 productos de la colección que seleccionaste.

  5. A partir de la lista Estilo cuadrícula , elije si quieres mostrar las imágenes del producto en una cuadrícula o en un collage.

Boletín

Con Brooklyn puedes mostrar un formulario de suscripción al boletín informativo en tu página de inicio. Este tipo de sección no incluye opciones - si deseas mostrar un formulario de boletín, deja la sección tal cual. Si no deseas mostrar un formulario de boletín puedes eliminar la sección en tu página de inicio.

Cuando alguien suscribe al boletín, es agregado como cliente de tu tienda. La sección Boletín incluye un enlace a tu página Clientes en tu panel de control. Puedes hacer clic en este enlace para ver una lista actualizada de tus clientes.

Página de colecciones

Con Brooklyn puedes mostrar los productos en tu página de colección en forma de collage o de cuadrícula.

El estilo collage es exclusivo de Brooklyn. Este estilo combina imágenes de productos más grandes y más pequeñas y resalta productos al azar:

El estilo cuadrícula muestra imágenes de productos en un formato de tabla. Todas las imágenes de productos son del mismo tamaño:

  1. En la vista previa del editor de temas de tu tienda, abre una página de colecciones.

  2. Haz clic en la pestaña Secciones.

  3. Haz clic en Página de colección.

  4. A partir de la lista Estilo cuadrícula , selecciona Collage o Cuadrícula.

  5. Marca Mostrar etiquetas de colección para incluir un enlace en la parte superior de la página que filtre los resultados de producto por etiqueta de colección:

  6. Selecciona Mostrar proveedor de producto para agregar el nombre del proveedor debajo de la imagen del producto:

  7. Haz clic en Guardar.

Páginas de productos

En la sección Páginas de productos , puedes agregar o eliminar los elementos siguientes:

  • Ampliar imagen
  • Íconos de redes sociales
  • La marca del producto o el proveedor
  • Selector de cantidad
  • Botón de pago dinámico

También puedes establecer la forma en que se muestran las imágenes y cambiar el tamaño de los botones Agregar al carrito y de pago dinámico.

Para editar la configuración de las páginas de productos:

  1. En el menú desplegable de la barra superior, selecciona Páginas de productos.

  2. Haz clic en Secciones.

  3. Haz clic en Páginas de productos.

  4. Para dar la opción a tus clientes de ampliar las imágenes de los productos, marca Habilitar zoom de imagen.

  5. Para mostrar los íconos de redes sociales, marca Habilitar compartir productos.

  6. Para mostrar la marca o el proveedor del producto, marca Mostrar proveedor del producto. Para que se muestre una marca o un proveedor, debes agregar un proveedor al producto.

  7. Para establecer la forma en que se muestran las imágenes, en el menú desplegable de Visualización de imagen , selecciona Apiladas o Miniaturas. Al seleccionar Apiladas , se mostrará una columna de imágenes de tamaño completo. Al seleccionar Miniaturas se mostrará una imagen de tamaño completo seguida de miniaturas para cualquier imagen adicional.

  8. Para mostrar un selector de cantidad, realiza las siguientes tareas:

    1. Marca Mostrar selector de cantidad.
    2. En el menú desplegable Tipo de selector , selecciona Botón o Desplegable.
  9. Para mostrar un botón de pago dinámico, marca la casilla Mostrar botón de pago dinámico.

  10. Para configurar el tamaño del botón Agregar al carrito y el botón de pago dinámico, en el menú desplegable Tamaño de botón , selecciona Pequeño o Grande.

  11. Haz clic en Guardar.

Colores

Puedes elegir los colores de las distintas partes de tu tienda online.

  1. Haz clic en Configuración del tema.

  2. Haz clic en Colores.

  3. Para cada tipo de contenido, haz clic en la muestra de color para usar el seleccionador de color:

    El seleccionador de color en el editor de temas

- En el área Seleccionado recientemente se muestran los colores que has seleccionado recientemente para tu tema. - En el área En uso actualmente se muestran los colores que estás usando actualmente en otras partes de tu tema.

Para dejar en color en transparente, haz clic en Ninguno.

  1. Haz clic en Guardar.

Tipografía

Con Brooklyn puedes cambiar la fuente y el tamaño de fuente del texto de tu tienda.

Para configurar las opciones de tipografía:

  1. Haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Tipografía.

  4. En la sección Encabezados , selecciona la fuente, el tamaño y el grosor del subrayado del texto del encabezado a partir de los menús desplegables.

  5. En la sección Resaltar texto , selecciona la fuente para los menús, botones y texto de subtítulo de tu tienda. Si deseas poner el texto en mayúscula, marca Texto en mayúscula. Si deseas aumentar el espacio entre las letras, marca Espaciar letras.

  6. En la sección Cuerpo del texto , selecciona la fuente y el tamaño para el cuerpo del texto de tu tienda. Si deseas formatear el cuerpo del texto, marca Poner en cursiva los títulos, las citas en bloques, el nombre del autor del comentario y las fechas.

  7. Haz clic en Guardar.

Página de carrito

Brooklyn te permite personalizar la pantalla de pago seleccionando el tipo de carrito y activando los comentarios del cliente sobre su pedido.

El tema Brooklyn es compatible con 2 tipos de carritos:

  • Página que redirecciona a los clientes a tu pantalla de pago cuando agregan un artículo al carrito.
  • Cajón que abre un cajón deslizante al lado de la pantalla donde se agregan los artículos al carrito e invita al usuario a que vaya a la pantalla de pago.

Brooklyn incluye también una opción para que tus clienteste envíen instrucciones especiales con su pedido.

Para definir las opciones de carrito en Brooklyn:

  1. En la sección de Brooklyn , haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en la Página de carrito.

  4. Selecciona un tipo de carrito a partir del menú desplegable Tipo de carrito.

  5. Si deseas permitir que los clientes incluyan comentarios a los pedidos en la pantalla de pago, marca Activar comentario sobre pedidos.

Redes sociales

Brooklyn incluye varias opciones para integrar tu tienda online con redes sociales, como Facebook, Twitter y Pinterest.

Para habilitar la configuración de redes sociales para Brooklyn:

  1. En la sección de Brooklyn , haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Redes sociales.

cuentas

Puedes mostrar enlaces a tus cuentas en las redes sociales en el pie de página de tu sitio.

Ingresa las URL de tus sitios de redes sociales en los campos provistos.

Opciones para compartir

También puedes permitir que tus clientes compartan contenido de tu tienda online a sus cuentas en las redes sociales. En la sección Opciones para compartir , selecciona la casilla para cada opción de "compartir" en las redes sociales que desees permitir:

  • Marca Compartir en Facebook para habilitar el botón de compartir en Facebook para productos o publicaciones de blog.

  • Marca Compartir en Twitter para habilitar el botón de compartir en Twitter para productos o publicaciones de blog.

  • Marca Compartir en Pinterest para habilitar el botón Compartir en Pinterest para productos o publicaciones de blog.

favicon

Puedes cargar un icono de favoritos, o "favicon", que puede ayudar con el branding de tu tienda virtual mostrando tu logotipo en las siguientes ubicaciones:

  • la pestaña de tu navegador web
  • el historial de tu navegador web
  • íconos en tu escritorio
  • al lado del nombre de tu tienda online cuando esté marcado como favorito.

También puedes agregar texto alternativo a tu favicon. El texto aparece si la imagen no puede cargarse, y es utilizado por el lector de pantalla para describir la imagen a los usuarios con discapacidad visual. Incluir texto alternativo mejora además el SEO de tu página web.

Para cargar un favicon:

  1. En la sección de Brooklyn , haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Favicon.

  4. En el área de la imagen de Favicon , haz clic en Seleccionar imagen y luego realiza una de las siguientes acciones:

- Para seleccionar una imagen que ya has subido a tu panel de control de Shopify, haz clic en la pestaña Biblioteca. - Para seleccionar una imagen desde tu computadora, haz clic en la pestaña Biblioteca , y luego haz clic en el botón del signo "más".

Sugerencia: El tamaño que se recomienda para Brooklyn es 32 x 32px. Las imágenes más grandes serán disminuidas a dicha dimensión.

  1. Si deseas agregar texto alternativo a la imagen de tu favicon, haz clic en Actualizar. En la ventana Editar imagen , inserta el texto alternativo en el campo Texto alternativo de imagen.

  2. Haz clic en Guardar.

Cambiar el estilo del tema

Brooklyn propone dos estilos de tema:

  • Classic:— una plantilla de tema moderno, gris y blanco.
  • Playful — Un estilo de tema alegre y en tonos pasteles.

Para seleccionar un estilo de tema:

  1. Haz clic en la pestaña Configuración del tema.

  2. Haz clic en el botón Cambiar estilo de tema.

  3. Haz clic en el estilo de tema que deseas usar.

  4. Haz clic en Cambiar estilo.

Consejos de navegación

Agrega un menú desplegable

Para agregar menús desplegables a tu Menú principal, deberás crear menús en tu Página de navegación. Este artículo te guiará a través de ese proceso.

El menú principal se contrae y se convierte en botón

Una parte limitada de tu encabezado está reservada para tu navegación. Si tus enlaces sobrepasan el ancho asignado, tu navegación se convertirá automáticamente en un botón que abre un menú deslizante.

La cantidad de enlaces en tu Menú Principal no controla necesariamente este comportamiento, aunque mantener cuatro o cinco enlaces ayudará. Para incluir más enlaces, puedes:

  • Utiliza una fuente más estrecha. Para esto, utiliza el editor de temas, haz clic en Configuración de temas y luego haz clic en Tipografía. Cambia la fuente para el texto de Accent.
  • Usa menos caracteres para cada enlace. Por ejemplo, puedes cambiar 'Preguntas más frecuentes' a 'Preguntas frecuentes', 'Contáctenos' a 'Contacto', 'Catálogo' a 'Comprar', y todas las apariciones de 'y' a '&'.

Si debes usar muchos enlaces en tu Menú principal y deseas desactivar el comportamiento de menú deslizante, consulta esta guía de personalización. Shopify no permite desactivar esa función.

Cambiar el color del enlace de navegación

El color del enlace de navegación en la parte superior de tu página está vinculado a la configuración de Colores en la pestaña Configuración de temas en el editor de temas:

Puedes elegir cualquier color; no es necesario que sea blanco o negro.

Si usas el carrusel en pantalla completa los enlaces de navegación y el texto del encabezado del carrusel serán blancos o negros dependiendo de si el Color de texto de la diapositiva mostrada actualmente está configurada en Claro u Oscuro. Usar blanco y negro aumenta el contraste entre la foto de la diapositiva y el texto para garantizar que el texto sea fácil de leer. Haz clic aquí para leer más sobre cómo seleccionar el Color de texto.

Agregar una sub-navegación a una página de colección

Para enumerar subcategorías debajo del encabezado de tu página de colección, como en la página Mujeres de la tienda de demostración de Brooklyn, tu colección debe contener productos con pestañas. Utilizamos las pestañas de productos para crear subcategorías de productos en tu tienda.

Asegúrate de que la función no esté desactivada en el editor de temas. Navega a una página de colección en la previsualización del editor de temas y haz clic en Secciones. Haz clic en Páginas de colección y marca Mostrar pestañas de colección :

Consejos de imagen

Los mejores tipos de imágenes de producto para Brooklyn

Las fotos con mayor resolución tendrán un mejor acabado y se verán más profesionales en el tema Brooklyn. En consecuencia, tus imágenes deberían mínimo medir 1024 x 1024px y máximo 2048 x 2048px. Cuando sea necesario, las imágenes se reducirán automáticamente. Es decir que mientras mayor sea la calidad, mejor.

La relación óptima entre ancho y alto para las fotos de tus productos es un cuadrado.

Lo ideal es que tus fotos tengan un color de fondo uniforme en los bordes. Uniforme significa un color sin matices, sin sombras o brillo. Todas las fotos deberían tener el mismo color uniforme en sus bordes.

Para hacer coincidir el color del borde de la foto del producto con su color de fondo, dirígete al editor de temas y haz clic en la pestaña Configurar tema. Haz clic en Colores y edita el color de Fondo del producto. Configura el color de Fondo del producto en transparente para que el color de fondo dentro de tu foto de producto se confunda con el borde.

Sugerencia: si el fondo de tus fotos es blanco, puedes definir el color de Fondo en cualquier otro color y definir el color de Fondo del producto en blanco:

Tamaño óptimo para imágenes de diapositivas

Ambas diapositivas utilizadas la tienda de demostración de Brooklyn tienen exactamente 1200px de ancho por 800px de alto. Es una buena idea que todas tus diapositivas sean del mismo tamaño.

Puede esperarse algo de recorte en los lados de las diapositivas en los teléfonos móviles, mientras que en las pantallas de los ordenadores portátiles puede ocurrir que se recorten en la parte inferior. Encontrarás más información sobre por qué eso ocurre aquí.

Por qué las imágenes de diapositivas se recortan en los teléfonos móviles

En los teléfonos móviles las diapositivas se representan de manera que llenen por completo la pantalla del dispositivo, desde el borde superior hasta el borde inferior. Las diapositivas se cambian de tamaño para que su altura sea la misma que la altura del teléfono móvil. Tus diapositivas se convierten en una imagen de fondo que cubre la pantalla del móvil, y para que eso suceda, las diapositivas se recortarán a la izquierda y a la derecha.

En pantallas grandes este comportamiento se invierte un poco debido a una relación diferente entre la anchura y la altura. Las diapositivas se redimensionan para que su ancho, y no su altura, se ajuste al ancho del navegador. De esta manera las diapositivas se recortan en la parte inferior.

Ambos comportamientos son claros en la captura de pantalla que mostramos a continuación, que muestra las vistas de escritorio y de teléfono móvil una al lado de la otra.

Cómo mostrar una imagen de borde a borde de una colección

Para poder mostrar una imagen de borde a borde, tu colección debe tener una Imagen destacada.

Después de que hayas agregado una imagen destacada, en tu página de colección en el panel de control, desplázate hacia abajo hasta la sección de Plantilla y selecciona collection.image como plantilla para tu colección.

Puedes ver una demostración de cómo funciona esto en la página de Hombres de la tienda Brooklyn de demostración. La imagen de la colección que aparece en la parte superior es la misma imagen que se ve aquí. Mide 1405px por 800px.

Agrega una imagen para entradas en el blog

La primera imagen del artículo de tu blog se seleccionará como la imagen destacada de la página de destino del blog. Haz clic aquí para saber cómo puedes agregar una imagen a un artículo del blog.

Cómo cambiar los íconos de tarjeta de crédito en la parte inferior de las páginas

Este artículo te mostrará cómo agregar tarjetas de crédito y eliminar algunas o todas.

Muestra las miniaturas para videos en las publicaciones de blog

Si tu artículo de blog tiene un video, puedes agregar una miniatura de ese video al extracto del artículo para que aparezca en la página de destino del blog.

Sugerencias de productos

Retira el borde gris alrededor de las imágenes del producto

Ve al editor de tema, y en Colores , ajusta el color de fondo del producto en transparente:

Si las imágenes de tu producto son demasiado pequeñas, lee la guía avanzada de personalización. La aplicación de esta personalización a tu tema de Brooklyn no es compatible con Shopify. Si necesitas ayuda para personalizar tu tema de Brooklyn, puedes probar con el foro de la comunidad de diseño.

Agrega una insignia de "Ahorra" a los productos

Coloca una Precio de comparación que sea mayor que el precio en las variantes de tu producto. Si un producto se pone en oferta de manera correcta, la insignia aparecerá de manera automática sobre la imagen de ese producto en las páginas de la colección.

Selecciona qué productos aparecen más grandes en las páginas de la colección

El tamaño de los productos en la cuadrícula de collage se basa en el orden en que aparecen en la colección. Puedes reorganizar tus productos de forma manual en el administrador si deseas ajustar el tamaño.

Por cada seis productos, el primero y el sexto aparecerán en una forma más grande. Por ejemplo, las imágenes primera, sexta, séptima, duodécima, decimotercera y decimoctava de tu colección serán más grandes.

Para mostrar una cuadrícula de imágenes de producto que sean todas del mismo tamaño, ve a editor de temas. En la pestaña de la página de la colección cambia el estilo de cuadrícula de collage a cuadrícula.

Oculta las etiquetas de los productos en las páginas de las colecciones

Ve al editor de temas, haz clic en la sección de Página de colección y luego borra la casilla de verificación en mostrar etiquetas de colección :

Tacha las opciones de productos cuando se agoten

Las opciones agotadas se tachan automáticamente para productos que tienen una sola opción.

Si un producto tiene múltiples opciones, por ejemplo color y tamaño, el producto estará disponible para la compra solamente si el color y el tamaño están disponibles. Al seleccionar una combinación de color y tamaño que resulte en una variante no disponible o agotada, se desactivará el botón agregar al carrito y se re-etiquetará como "no disponible" o "agotado".

Para el siguiente producto, la combinación Marrón - Mediano está agotada:

Animación de desplazamiento al seleccionar una variante

En la página del producto, si la descripción del producto es lo suficientemente corta como para caber por completo en el área de visualización, la selección de una variante con una imagen producirá una animación de desplazamiento para revelar la imagen. Si la descripción es muy larga para caber en la pantalla, la imagen superior será reemplazada por la imagen de la variante y no habrá animación de desplazamiento.

La descripción del producto se fija en la pantalla solo cuando es lo suficientemente corta como para caber dentro del área de visualización. La animación de desplazamiento que muestra la imagen de una variante seleccionada aparecerá solo si la descripción es fija. Cuando la descripción no sea fija porque es muy larga, el tema no se podrá desplazar y, en su lugar, aparecerá una nueva imagen de la variante con un cambio en la imagen superior.

Si prefieres la animación con desplazamiento, asegúrate de que las descripciones de tus productos sean cortas. Si prefieres tener un intercambio de imágenes, usa descripciones de productos más largas.

Independientemente de la extensión de las descripciones de tus productos, la selección de una variante con una imagen variante siempre mostrará los botones de opciones del producto. Los clientes podrán ver todos los colores de un producto sin desplazarse hacia arriba y hacia abajo.

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis