Secciones para Debut

Las secciones son bloques de contenido personalizables que determinan el diseño de las diferentes páginas en tu tienda online.

  • Las secciones de inicio incluyen funciones, como una presentación de diapositivas o la suscripción a un boletín, que puedes agregar, reorganizar o eliminar. Puedes tener hasta 25 secciones en tu página de inicio.

  • Cada tipo de página tiene sus propias secciones. Por ejemplo, la sección de página de producto determina el diseño de cada página de producto de tu tienda online.

  • Las secciones de página están siempre en lugares específicos en tu tienda online. Puedes personalizarlas, pero no puede reorganizarlas o eliminarlas.

  • Cada tema incluye secciones fijas, tales como el encabezado y pie de página que se muestran en cada página de tu tienda online.

Puedes aprender sobre la selección única de secciones de Debut y cómo personalizarlas para que se adapten a tu negocio.

Debut incluye las siguientes secciones estáticas:

  • Encabezado
  • Pie de página
  • Páginas de productos
  • Páginas de colección
  • Página de lista de colecciones
  • Páginas de blog
  • Publicaciones
  • Página del carrito de compras

Secciones dinámicas

Puedes agregar, reorganizar y eliminar secciones dinámicas para personalizar el diseño de tu página de inicio. Cada tema tiene un conjunto exclusivo de secciones dinámicas para elegir.

Debut incluye las siguientes secciones dinámicas:

  • Entradas del blog
  • Lista de colecciones
  • colección destacada
  • galería
  • Imagen con texto
  • Imagen con superposición de texto
  • Lista de logos
  • Diapositivas
  • Producto destacado
  • Boletín
  • Mapa
  • Texto enriquecido
  • Testimonios
  • Columnas de texto con imágenes
  • video
  • Contenido personalizado

Encabezado

En la sección de encabezado, puedes editar el contenido que aparece en la parte superior de cada página en tu tienda. Puedes agregar una imagen de logo, elegir qué menú mostrar y crear un mensaje de anuncio.

La barra de encabezado en el sitio web llamado Vestimenta Juan que muestra las opciones del menú principal, un ícono de búsqueda y un ícono de carrito de compras

Para personalizar la sección del encabezado:

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Encabezado.

  4. Para establecer la alineación de tu logo, en el área de Alineación de logo, selecciona Izquierda o Centrado. Si no agregas una imagen de logo, se mostrará el nombre de tu tienda en el texto. Puedes cambiar el nombre de tu tienda en la página de Configuración general en el panel de control.

  5. Para agregar un logo, en el área Imagen del logo, haz clic en Seleccionar imagen. Para cargar una imagen desde tu computador, haz clic en Subir. Para usar una imagen de archivo gratuita de Burst, haz clic en Imágenes gratuitas.

  6. Para cambiar el tamaño de tu logo, ajusta el control deslizante de Ancho de logo personalizado al ancho que desees. Ajustar el ancho del logo no distorsionará la imagen de tu logo.

  7. Para elegir qué menú mostrar en el encabezado, en el área Menú, haz clic en Cambiar. Elige un menú existente o crea uno nuevo haciendo clic en Crear menú. Si no deseas mostrar un menú en tu encabezado, haz clic en Eliminar.

  8. Para mostrar un mensaje de anuncio en la parte superior de la página, sigue los siguientes pasos:

  9. En el área de Barra de anuncios, marca Mostrar anuncio.

  10. Para mostrar el anuncio solo en la página de inicio, marca Solo página de inicio. De lo contrario, el anuncio aparecerá en cada página de tu tienda.

  11. Introduce el texto de tu anuncio en el campo Texto.

  12. Para agregar un enlace a tu anuncio, introduce el URL en el campo Enlace.

  13. Para cambiar el color del fondo de la barra de anuncios, haz clic en la muestra de color de la Barra y selecciona un color.

  14. Para cambiar el color del texto del anuncio, haz clic en la muestra de color de Texto y selecciona un color.

  15. Haz clic en Guardar.

Pie de página

El pie de página de tu tema es la sección que aparece en la parte inferior de cada página de tu tienda. Puedes agregar lo siguiente al pie de página:

  • íconos de pago
  • enlaces rápidos
  • suscripción a un boletín
  • Una sección de texto que contiene información sobre tu negocio
  • iconos de redes sociales
  • Un selector de idioma
  • Un selector de moneda

La sección del pie de página de un sitio web que muestra un menú, la suscripción a un boletín y texto de copyright.

Agregar íconos de pago

Puedes mostrar los íconos de las formas de pago que aceptas en el pie de página. En esta área se muestran los íconos asociados con el proveedor de pago que has activado en la sección de configuración de pago de tu panel de control.

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Pie de página.

  4. Marca Mostrar íconos de pago.

  5. Haz clic en Guardar.

Agregar un menú, una suscripción al boletín o un texto

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Escritorio</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Desde tu panel de control de Shopify, ve a <strong>Tienda online</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Desde la <a href="https://www.shopify.com/install/detect">app de Shopify</a>, pulsa <strong>Tienda</strong>.
</li><li>En la sección <strong>Canales de ventas</strong>, selecciona <strong>Tienda online</strong>.
</li><li>Pulsa <strong>Administrar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>Desde la <a href="https://www.shopify.com/install/detect">app de Shopify</a>, pulsa <strong>Tienda</strong>.
</li><li>En la sección <strong>Canales de ventas</strong>, selecciona <strong>Tienda online</strong>.
</li><li>Pulsa <strong>Administrar temas</strong>.
</li></ol></div>
</div>



1. Haz clic en **Personalizar** junto a **Debut**.
  1. Haz clic en Secciones.

  2. Haz clic en Pie de página.

  3. Para agregar un bloque de contenido, en el área Contenido, haz clic en Agregar contenido. Selecciona el tipo de bloque de entre las siguientes opciones:

- Menú - Boletín - Texto

Puedes agregar hasta 4 bloques de contenido.

Para mover un bloque de contenido, haz clic en el ícono de ⋮⋮ y arrastra el bloque a otro lugar.

Para eliminar un bloque de contenido, haz clic en el bloque y luego haz clic en Eliminar contenido.

Para personalizar un bloque de contenido, haz clic en el bloque y edita la configuración.

  1. Haz clic en Guardar.

Agregar íconos de redes sociales

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Pie de página.

  4. Haz clic en la sección Configuración de tema.

  5. En el campo correspondiente de redes sociales, introduce la URL de tu perfil.

  6. Haz clic en Guardar.

Agregar un selector de idioma

Solo debes agregar un selector de idioma si has activado varios idiomas en la tienda.

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Pie de página.

  4. En Selector de idioma, selecciona Mostrar selector de idioma.

  5. Haz clic en Guardar.

Agregar un selector de moneda

Debes agregar un selector de moneda solo si has activado varias monedas.

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Pie de página.

  4. En Selector de moneda, selecciona Mostrar selector de moneda.

Páginas de productos

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

  • Selector de cantidad
  • Etiquetas de variantes
  • La marca del producto o el proveedor
  • Ampliar imagen
  • Botón de pago dinámico
  • Botones de redes sociales
  • Recomendaciones de productos

También puedes establecer el tamaño de tus imágenes.

Editar la configuración de la página del producto

  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 configurar el tamaño de tus imágenes, selecciónalo en el menú desplegable Tamaño de imagen.

  5. Para mostrar un selector de cantidad, marca Mostrar selector de cantidad.

  6. Para mostrar etiquetas de variantes, como "Tamaño" y "Color", marca Mostrar etiquetas de variantes. Las etiquetas variantes que se muestran se basan en los nombres de opciones de variantes del producto.

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

  8. Para dar la opción a tus clientes de ampliar las imágenes de los productos pasando el puntero por encima, marca Habilitar zoom de imagen.

  9. Para mostrar un botón de pago dinámico, marca la casilla Mostrar botón de pago dinámico.

  10. Para mostrar los botones de redes sociales, marca la casilla Mostrar botones de redes sociales.

  11. Haz clic en Guardar.

Agregar o eliminar recomendaciones de productos

Puedes mostrar los productos recomendados en las páginas de productos para que los clientes puedan descubrir otros productos que podrían interesarles.

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

  2. Haz clic en Recomendaciones de productos.

  3. Usa la casilla Mostrar recomendaciones dinámicas para mostrar u ocultar recomendaciones de productos en tus páginas de productos.

  4. Opcional: para cambiar el título que aparece encima de los productos recomendados, introduce uno nuevo en el campo Encabezado.

  5. Opcional: para mostrar u ocultar los proveedores en las descripciones de productos, utiliza la casilla Mostrar proveedor.

  6. Haz clic en Guardar.

Páginas de colección

Puedes configurar tus páginas de colección para permitir que tus clientes filtren y clasifiquen los productos de la colección. Asimismo, puedes elegir un diseño para la colección, bien sea en formato de cuadrícula o lista, y escoger cuántos productos mostrar.

Para establecer el diseño de tus páginas de colección:

  1. Navega a una página de colección en el editor de temas.

  2. Haz clic en la pestaña Secciones.

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

  4. En la lista Diseño, selecciona Cuadrícula o Lista.

  5. En las listas, selecciona la cantidad de productos por fila y el número de filas por página (si optaste por el estilo en cuadrícula)

  6. Si quieres mostrar una imagen de la colección en la parte superior de la página, marca Mostrar imagen de colección.

  7. Si deseas mostrar el nombre de la marca o el proveedor del producto, selecciona Mostrar proveedor del producto.

  8. Marca Habilitar clasificación para mostrar un menú de clasificación.

  9. Marca Habilitar filtro de etiquetas para permitir que tus clientes filtren la colección por etiqueta de producto.

  10. Haz clic en Guardar.

Página de lista de colecciones

La página de lista de colecciones muestra una cuadrícula de todas tus colecciones de productos. Tus clientes pueden usar la página de la lista de colecciones para examinar rápidamente tus colecciones y encontrar la colección que desean visitar. En Debut, la página de la lista de colecciones es un enlace de nivel superior en el menú del encabezado.

Puedes mostrar miniaturas de todas tus colecciones en un patrón de cuadrícula, o puedes elegir mostrar una colección seleccionada. También puedes elegir cómo filtrar las colecciones en la página.

Para establecer el diseño de tus páginas de colección:

  1. Navega a la página de la lista de colección haciendo clic en la opción del menú de la colección de nivel superior.

  2. Haz clic en la pestaña Secciones.

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

  4. Realiza algunas de las siguientes acciones:

    1. Para mostrar miniaturas de todas tus colecciones en un patrón de cuadrícula, selecciona Todo.
    2. Para mostrar una colección en la página de la lista de colecciones, selecciona Selección.
  5. Si seleccionaste Todo en el paso anterior, entonces haz lo siguiente:

    1. Selecciona una opción de filtrado de la lista Ordenar colecciones por.
    2. Selecciona el número de colecciones por fila de la lista Colecciones por fila.
  6. Haz clic en Guardar.

Páginas de blog

Con Debut, puedes enumerar las publicaciones de tu blog o mostrarlas en una cuadrícula. Si las publicaciones de tu blog cuentan con más de un autor, puedes mostrar el nombre del autor para cada entrada del blog. También puedes mostrar la fecha en que se publicó cada entrada del blog.

  1. Ve a la página de tu blog, en el área de vista previa del editor de temas.

  2. Haz clic en Secciones.

  3. Haz clic en las Páginas del blog.

  4. A partir de la lista Diseño, elije si quieres mostrar las publicaciones del blog en una lista o en una cuadrícula.

  5. Selecciona Mostrar autor para mostrar el nombre del autor.

  6. Selecciona Mostrar fecha para mostrar la fecha en la que se publicó la entrada del blog.

  7. Haz clic en Guardar.

Página del carrito de compras

En la sección de la Página del carrito de compras, puedes habilitar las siguientes configuraciones:

  • Notas del carrito de compra
  • Actualizaciones automáticas del carrito

Agregar notas del carrito de compra

Puedes permitir que tus clientes agreguen notas a sus pedidos en la página del carrito.

  1. En el menú desplegable de la barra superior, selecciona Carrito.

  2. Haz clic en la pestaña Secciones.

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

  4. Marca Habilitar notas del carrito de compra.

  5. Haz clic en Guardar.

Habilitar las actualizaciones automáticas del carrito de compra

Puedes hacer que la información del carrito aparezca actualizada tan pronto como un cliente haga cambios en su pedido. Por ejemplo, el precio del subtotal se puede actualizar cuando el cliente cambia la cantidad de artículos en su carrito. Para habilitar las actualizaciones automáticas del carrito:

  1. En el menú desplegable de la barra superior, selecciona Carrito.

  2. Haz clic en la pestaña Secciones.

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

  4. Marca Habilitar actualizaciones automáticas del carrito.

  5. Haz clic en Guardar.

colección destacada

Puedes exhibir una colección en tu página de inicio: Destacar colecciones puede ayudarte a promover ventas y nuevas colecciones.

Con Debut, puedes agregar un botón "Ver todo" para que los clientes vean toda la colección, y puedes mostrar el nombre del proveedor debajo de cada imagen del producto.

Para exhibir una colección en tu página de inicio:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en la sección Colecciones destacadas.

  3. Si deseas cambiar el texto que se muestra sobre la colección, introduce el texto en el campo Encabezado.

  4. A partir de la lista Colección, selecciona la colección que deseas mostrar. Para agregar o eliminar productos de la colección seleccionada, haz clic en el enlace Editar colección para abrir la página Colecciones en una pestaña nueva.

  5. A partir de la lista Productos por fila, selecciona cuántos productos mostrar en cada fila.

  6. A partir de la lista Filas, selecciona cuántas líneas de productos mostrar.

  7. Si deseas mostrar el proveedor o la marca debajo de la foto de cada producto, marca Mostrar proveedores de productos.

  8. Si deseas que los clientes vean todos los productos de la colección, marca Mostrar botón "Ver todo".

  9. Haz clic en Guardar.

Imagen con texto

Con Debut, puedes agregar una imagen con texto que se muestra a la derecha o a la izquierda de la imagen. También puedes agregar un botón vinculado a una página en tu tienda:

Por lo general, utilizarías una sección de Imagen con texto para publicitar un producto o colección, o dirigir el tráfico del sitio web hacia la página de tu blog.

Para agregar una sección de imagen con texto a tu página de inicio:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Imagen con texto.

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

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. En la lista Diseño, selecciona si quieres que la imagen aparezca la imagen a la derecha o a la izquierda del texto.

  2. Inserta un nuevo título para esta sección en el campo Encabezado.

  3. Introduce el texto que deseas mostrar debajo del encabezado en el campo Texto.

  4. En el campo Etiqueta de botón, inserta el texto que desees que aparezca en el botón.

  5. En el campo Enlace del botón, selecciona una página en tu tienda que desees vincular con el botón.

  6. Haz clic en Guardar.

Imagen con superposición de texto

Puedes presentar una imagen grande con una superposición de texto personalizado en tu página de inicio.

La sección de imagen con texto incluye las siguientes configuraciones:

  • Imagen: selecciona una imagen para agregarla a la sección.
  • Alineación de imagen: establece el lado de la página en el que deseas que se muestre la imagen.
  • Diseño: establece el ancho de la sección.
  • Altura de la sección: establece la altura de la sección. Para evitar el recorte de imágenes, selecciona Adaptarse a la imagen, que establece la altura de la sección según la altura de la imagen.
  • Tamaño del texto: establece el tamaño del texto.
  • Encabezado: agrega un encabezado a la sección.
  • Texto: agrega texto a la sección. La sección Imagen con texto superpuesto se retitula automáticamente en el encabezado que propongas.
  • Etiqueta de botón: agrega un botón con una etiqueta de texto a la sección.
  • Enlace de botón: enlaza tu botón a otra página o sitio web.

Agregar una imagen con texto a tu página de inicio

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Agregar sección> Imagen con texto > Agregar.

  3. Usa la configuración para personalizar tu imagen con la sección de superposición de texto.

  4. Haz clic en Guardar.

Boletín

Puedes agregar la suscripción a un boletín a la página de inicio. Esto te permite recopilar direcciones para las campañas de email marketing. Puedes obtener más información sobre el email marketing en el blog de Shopify.

La sección del boletín en un sitio web. Hay un campo para que los clientes introduzcan una dirección de correo electrónico y un botón que dice

Para agregar la opción de suscripción al boletín a la página de inicio:

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Agregar sección > Boletín.

  4. Introduce un título para la suscripción al boletín en el campo Título. El título predeterminado es "Suscríbete a nuestro boletín".

  5. Introduce un subtítulo para la suscripción al boletín en el campo Subtítulo.

  6. Haz clic en Guardar.

video

Puedes agregar un video alojado en YouTube o Vimeo a tu página de inicio. Los videos pueden atraer clientes y generar interés por tu negocio.

La sección de video incluye las siguientes configuraciones:

  • Altura del video: Establece la altura de tu video.
  • Tamaño del texto: Agrega texto a tu video. Si configuras el estilo de video en Imagen con el botón de reproducción, entonces el texto se elimina mientras se reproduce el video.
  • Mostrar superposición: Agrega una capa de color sobre tu video para hacer que texto sea más fácil de leer. Si configuras el estilo de video en Imagen con el botón de reproducción, entonces la superposición se elimina mientras se reproduce el video.
  • Estilo: Establece el estilo del video. El estilo de Video de fondo solo está disponible en el escritorio. Si los clientes visitan tu tienda usando una tableta o dispositivo móvil, entonces siempre ven el estilo de Imagen con el botón de reproducción.
  • Encabezado: Agrega un encabezado a tu video.
  • Enlace de video: Agrega el URL de YouTube a tu video.
  • Imagen de portada: Agrega una imagen de portada a tu video La imagen de la portada está oculta mientras se reproduce el video.
  • Alineación de la imagen: Alinea la imagen de la portada para que la parte más importante esté siempre visible.

Agregar un video a tu página de inicio

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Agregar sección > Video.

  3. Usa la configuración para personalizar tu sección de video.

  4. Haz clic en Guardar.

Diapositivas

Puedes agregar una presentación de diapositivas de imágenes en tu página de inicio. En la sección de presentación de diapositivas, puedes establecer la altura de las diapositivas, agregar texto y botones, y elegir si tu presentación de diapositivas se reproduce automáticamente.

La página de inicio de una tienda en línea llamada Pure Tea que presenta una presentación de diapositivas. Una diapositiva de una taza de té sobre un mostrador se muestra con el título

Para más información sobre el recorte de imágenes de presentación de diapositivas y el tamaño de imágenes recomendado, consulta las siguientes pautas.

Para crear tu carrusel de diapositivas:

  1. Haz clic en Personalizar junto a Debut.

  2. Haz clic en Secciones.

  3. Haz clic en Presentación.

  4. Establece la altura de tus diapositivas en el menú desplegable Altura de diapositiva.

    Lee más sobre cómo la altura de la diapositiva afecta tu presentación de diapositivas.

  5. Establece el tamaño de tus títulos y subtítulos en el menú desplegable Tamaño del texto.

  6. Establece la posición del texto en tus diapositivas desde el menú desplegable Alineación de texto.

  7. Opcional: marca Mostrar sobreposición. Una sobreposición de imagen es una capa de color entre una imagen y cualquier texto que se coloca sobre la imagen. Las sobreposiciones pueden ayudar con el contraste de color y la legibilidad. Puedes configurar el color y la opacidad de la sobreposición en la configuración de color.

  8. Opcional: marca Girar automáticamente las diapositivas para reproducir la presentación automáticamente. Selecciona cuánto de tiempo debe permanecer cada diapositiva utilizando el menú Cambiar diapositivas cada.

  9. Para agregar una diapositiva, sigue los siguientes pasos:

    1. En el área de Contenido, haz clic en Agregar diapositiva de imagen.
    2. En Imagen, haz clic en Seleccionar imagen. Para cargar una imagen desde tu computadora, haz clic en Cargar. Para usar una imagen de archivo gratuita de Burst, haz clic en Imágenes gratuitas.
    3. Para elegir cómo quieres alinear la imagen en la presentación, selecciona una posición del menú desplegable Posición de la imagen. Puede obtener más información sobre la posición de la imagen en las pautas que encontrarás más abajo.
    4. Para agregar texto a la imagen de la diapositiva, introduce un texto en el campo Título, Subtítulo, o ambos.
    5. Agrega un botón a tu diapositiva de imágenes introduciendo texto en el campo Etiqueta del botón de texto. Selecciona una parte de tu tienda online para vincular el botón en el campo Enlace del botón.
  10. Haz clic en Guardar.

Pautas para la presentación de diapositivas

Puedes usar la configuración y las recomendaciones de imágenes a continuación para controlar la apariencia de la presentación de tu tienda en línea. La forma en que aparecen tus diapositivas está determinada por los siguientes factores:

  • Las dimensiones de tus imágenes.
  • Los ajustes de posición de tu imagen.
  • Los ajustes de altura de tu diapositiva.
  • La relación ancho-alto de tus imágenes.

Debido a las diferencias en el tamaño y la forma de la pantalla, tus diapositivas pueden verse diferentes en dispositivos móviles y de escritorio.

Recomendaciones para el tamaño de la imagen

Las dimensiones recomendadas para las imágenes de presentación de diapositivas dependen de la configuración de altura de tu diapositiva. Usa las siguientes pautas:

Recomendaciones para el tamaño de la imagen según la configuración
Ajustes de altura de la diapositiva Ancho recomendado Altura recomendada
Adaptar a la primera imagen 1200 px 600 px
Pequeña 1200 px 475 px
Mediana 1200 px 489 px
Larga 1200 px 775 px

Para ver o cambiar tu configuración de altura de diapositiva, consulta el paso 5 de las instrucciones para crear una presentación de diapositivas.

Imágenes recortadas

Puedes tomar algunas medidas para controlar cómo se recortan tus imágenes o para evitar por completo que la imagen se recorte.

Controla cómo se recortan tus imágenes

Las imágenes podrían recortarse en las pantallas de algunos tamaños en las siguientes situaciones:

  • Tus imágenes no tienen la misma relación ancho-alto.
  • La altura de la diapositiva se establece en Pequeña, Mediana o Grande.
  • La altura de la diapositiva se configuró con la opción Adaptarse a la primera imagen y tus imágenes son más altas que la pantalla del dispositivo o la ventana del navegador.

Puedes controlar cómo se recortan tus imágenes utilizando la configuración de Posición de la imagen.

Para cada imagen, puedes elegir qué parte deseas mantener a la vista después de que se recorte. En el siguiente ejemplo, puedes ver cómo la misma imagen puede recortarse para pantallas de distintos tamaños. La posición de la imagen de la diapositiva de la izquierda se estableció Al medio y al centro. La posición de la imagen de la diapositiva de la derecha es Superior izquierda.

Una diapositiva de ejemplo que se recorta de manera diferente según la configuración de la posición de la imagen.

Para ver o cambiar la configuración de la posición de tu imagen, consulta el paso 10 de las instrucciones para crear una presentación de diapositivas.

Evita las imágenes recortadas

Para evitar que las imágenes de tus diapositivas queden recortadas, intenta poner en práctica lo siguiente:

  • Ajusta la altura de tu diapositiva para Adaptarse a la primera imagen.
  • Usa imágenes que sean dos veces más anchas que altas. Estas imágenes tienen una relación de ancho a altura de 2:1. Las dimensiones recomendadas son 1200 px por 600 px.
  • Asegúrate de que todas tus diapositivas tengan la misma relación de anchura-altura. La proporción de las diapositivas es más importante que sus dimensiones en píxeles.

En el siguiente ejemplo, una imagen de presentación de diapositivas con una proporción de 2:1 se muestra en un computador de escritorio y un dispositivo móvil:

Se muestra una diapositiva en un computador de escritorio y en un dispositivo móvil sin ningún recorte.

Altura de diapositiva

El ancho de la sección de presentación de diapositivas siempre es el 100% de la ventana del navegador. La altura de las diapositivas es relativa al ancho. Debido a las diferencias en el tamaño de la pantalla, la altura y ancho de tus diapositivas pueden variar en diferentes en dispositivos. La configuración de altura de la diapositiva influye en la altura de las diapositivas.

Puedes usar la configuración de altura Adaptarse a la primera imagen para basar la altura de la presentación de diapositivas según la altura de la primera imagen. Esta configuración funciona mejor cuando todas tus imágenes tienen el mismo tamaño o tienen la misma relación ancho-alto. Si tus imágenes tienen tamaños diferentes o proporciones diferentes, entonces puedes cambiar el orden de las diapositivas para ver cómo se ven en diferentes alturas.

En el siguiente ejemplo, la diapositiva con menor altura se coloca primero:

Una diapositiva más baja determina la altura de las otras dos diapositivas. Debido a que las otras diapositivas son más altas, se recortan en la parte superior e inferior.

En el siguiente ejemplo, la diapositiva más alta se coloca primero:

Una diapositiva con una altura mediana determina la altura de las otras dos diapositivas. La diapositiva que es más alta se recorta en la parte superior e inferior. La diapositiva que es más baja se recorta en los lados.

Si utilizas los ajustes de altura Pequeña, Mediana o Grande, consulta las recomendaciones de tamaño de imagen para las diapositivas.

Relación de aspecto de las imágenes

Si deseas evitar el recorte de imagen en tu presentación de diapositivas, entonces la relación de anchura-altura recomendada para tus imágenes es 2:1.

Si no te preocupa que tus imágenes se recorten en las pantallas de escritorio y deseas que sean más vistosas en dispositivos móviles, utiliza imágenes cuadradas o imágenes más altas que anchas. La siguiente diapositiva de ejemplo muestra una imagen cuadrada, que tiene una relación de ancho a altura de 1:1.

Una diapositiva cuadrada vista en un escritorio y dispositivo móvil. La imagen se recorta en el dispositivo de escritorio, pero no se recorta en el dispositivo móvil.

La siguiente diapositiva de ejemplo muestra una imagen retrato, que tiene una relación de ancho a altura de 2:3.

Una diapositiva alta vista en un escritorio y en un dispositivo móvil. La imagen se recorta en el dispositivo de escritorio, pero no se recorta en el dispositivo móvil.

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

Pruébala gratis