Consejos para Brooklyn

Este artículo describe algunos consejos útiles y las prácticas recomendadas que pueden ayudarte a configurar Brooklyn tu tienda online.

Consejos de navegación

Agrega un menú desplegable

Para agregar menús desplegables a tu menú principal, debes crear menús en tu página de Navegación. Para obtener más información, consulta Configurar menús desplegables en tu tienda online.

El menú principal en una tienda online. El ratón se desplaza sobre el enlace

El menú principal se convierte en un menú de barra lateral

Si tu menú principal ocupa mucho espacio, el menú se convierte en el menú de la barra lateral que se abre al hacer clic en un botón en la sección del título:

Un menú de barra lateral, en el lado izquierdo de una tienda online. Los enlaces del menú principal, como

Puedes evitar que tu menú principal cambie al estilo de barra lateral siguiendo estos pasos:

  • No agregues más de cuatro o cinco enlaces a tu menú principal.
  • Utiliza una fuente más estrecha para los enlaces de tu menú principal. Puedes cambiar la fuente de Énfasis de texto en la configuración de tipografía.
  • Crea elementos de menú con un número limitado de caracteres. Por ejemplo, puedes usar "Preguntas frecuentes" en lugar de "Preguntas hechas frecuentemente" o "Contacto" en lugar de "Contáctanos".

Consejos sobre imágenes

Los mejores tipos de imágenes de producto para Brooklyn

  • Dado que las imágenes de alta resolución se ven con buen acabado y profesionales, las imágenes de tu producto deben medir como mínimo 1024 x 1024 px. La mejor forma para las imágenes de tus productos es un cuadrado.

  • Idealmente, tus imágenes deben tener un color de fondo uniforme. Un color uniforme es un color sólido sin sombreado ni resaltado. Todas tus imágenes deben tener el mismo color de fondo.

  • Para eliminar el marco alrededor de las imágenes de tu producto, establece el Color de fondo de tu producto en transparente en la configuración de color:

Dos publicaciones de productos se muestran con fondos blancos. El fondo de la tienda online también es blanco y no hay marcos alrededor de las imágenes de producto.

El tamaño recomendado para imágenes de diapositivas

Las dos diapositivas de imágenes que se muestran en la tienda de demostración de Brooklyn miden 1200 x 800 px. Es aconsejable mantener todas las imágenes de las diapositivas del mismo tamaño.

Recorte de imágenes en pantallas pequeñas

En dispositivos pequeños, las diapositivas de imágenes llenan la pantalla desde el borde superior hasta el borde inferior. Se ajusta el tamaño de las diapositivas para que su altura sea la misma que la pantalla del dispositivo. Para llenar la pantalla sin distorsionar las imágenes, las diapositivas se recortan a la izquierda y la derecha.

En pantallas grandes, se cambia el tamaño de las diapositivas de imágenes para que su ancho se ajuste al ancho de la ventana del navegador. Para llenar la ventana sin distorsionar las imágenes, las diapositivas se recortan en la parte inferior.

El siguiente ejemplo muestra la versión de escritorio y móvil de la misma tienda online:

La versión de escritorio de la presentación de diapositivas muestra una imagen que es más ancha que alta. La versión móvil muestra la misma imagen a la misma altura, pero con ambos tamaños de la imagen recortada para que la imagen se ajuste a la pantalla más estrecha.

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.

Puedes ver cómo se ve una imagen de colección de borde a borde en la tienda de demostración de Brooklyn. La imagen de la colección que se muestra en la parte superior mide 1405 x 800 px.

La versión de escritorio de la presentación de diapositivas muestra una imagen que es más ancha que alta.

La versión móvil muestra la misma imagen a la misma altura, pero con ambos tamaños de la imagen recortados para que se ajuste a la pantalla más estrecha.

Agrega una imagen para publicaciones de blog

La primera imagen de un artículo de blog se utiliza como imagen destacada de la página de blog. Puedes leer más sobre cómo agregar una imagen a un artículo de blog en Escribir artículos para el blog

Sugerencias de productos

Añadir insignias de oferta a los productos.

Puedes agregar una insignia de oferta a un producto, estableciendo un precio de comparación que sea mayor que el precio normal. La insignia se muestra sobre la imagen de ese producto en las páginas de colección.

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

Si configuras las páginas de tu colección para mostrar productos con el estilo collage, algunos de tus productos se mostrarán con imágenes grandes, y otros con imágenes pequeñas. El tamaño de la imagen depende del orden de los productos en tu colección. Puedes cambiar el orden de los productos en la Página colección en el panel de control. Haz clic en la colección que deseas editar y, luego, en el área Productos, selecciona Manualmente en el menú desplegable Ordenar. A continuación, arrastra y suelta los productos en el orden en que deseas que aparezcan en tu tienda online.

La página de Colecciones en el panel de control de Shopify.

Cada seis productos, el primer y el sexto producto presentan imágenes de productos grandes. Por ejemplo, la primera, sexta, séptima, 12ª, 13ª y 18ª imagen de la colección tiene imágenes grandes:

Una página de colección que muestra productos en collage. Los números que aparecen sobre los productos ilustran cómo el orden de los productos se relaciona con el tamaño de la imagen.

Para mostrar una cuadrícula de imágenes de productos del mismo tamaño, configura tus colecciones para que muestren productos en estilo de cuadrícula.

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 ajustarse a la pantalla sin desplazarse, verás una animación de desplazamiento cuando seleccionas una variante que tenga una imagen. Si la descripción es demasiado larga para ajustarse a la pantalla sin desplazarse hacia abajo, entonces la imagen superior simplemente se reemplaza por la imagen de la variante, y no se produce ninguna animación de desplazamiento.

Si deseas mostrar la animación de desplazamiento, asegúrate de que las descripciones de tus productos sean cortas.

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

Pruébala gratis