Secciones para Debut

El contenido del tema se crea usando secciones. Las secciones son bloques de contenido personalizables que determinan el diseño y la apariencia de las diferentes páginas en tu tienda online.

Las secciones estáticas son secciones que aparecen en sucursales predeterminadas en tu tienda online. Estas secciones no se pueden eliminar ni reorganizar. Las secciones estáticas pueden incluir encabezados, pies de página, secciones de navegación o secciones de contenido en páginas como páginas de productos y páginas de colección. Por ejemplo, la sección de producto determina el aspecto de cada página de producto en tu tienda online.

Las secciones dinámicas son secciones opcionales que puedes usar para personalizar el diseño de tu página de inicio. en la página de inicio de tu tienda, puedes Agregar, reorganizary eliminar secciones dinámicas para crear el diseño de la página. Puedes tener hasta 25 secciones dinámicas en tu página de inicio.

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

Secciones estáticas

Debut incluye las siguientes secciones estáticas:

  • Encabezado
  • Pie de página
  • Páginas de productos
  • Recomendaciones 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

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
  • Producto destacado
  • Boletín
  • Mapa
  • Texto enriquecido
  • Testimonios
  • Columnas de texto con imágenes
  • video
  • Contenido personalizado
  • Diapositivas

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.

Agregar un logo personalizado

Puedes agregar un logotipo personalizado al encabezado de tu tienda. El mejor formato es un archivo .png con un fondo transparente. Puedes cambiar el tamaño de la imagen del logo aumentando o reduciendo el ancho.

  1. Haz clic en Encabezado. 5. En el área Imagen del logo, 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 tu computadora, haz clic Biblioteca > Subir. 6. Usa la barra ancho del logo personalizado para personalizar el ancho del logo. 7. Para definir la alineación de tu logo, en el área Alineación de logo, selecciona Izquierda o Centrado. Si no agregas una imagen de logo, se mostrará el nombre de tu tienda como texto. Puedes cambiar el nombre de tu tienda en la página Configuración general en tu panel de control de Shopify. 8. Haz clic en Guardar.

Agregar una barra de anuncios

Puedes agregar una barra de anuncios en el encabezado que puedes usar para mostrar un mensaje a tus clientes. Tu mensaje es completamente personalizable y puede incluir información de contacto, información sobre eventos u ofertas de la tienda, o el eslogan de la tienda.

  1. Haz clic en Encabezado. 5. En el área Barra de anuncio, marca Mostrar anuncio. Selecciona Solo página de inicio para mostrar el mensaje de anuncio solo en la página de inicio. 6. Introduce el texto de tu anuncio. 7. Opcional: introduce una URL para agregar un enlace a tu anuncio. 9. Para cambiar el color del fondo de la barra de anuncios, haz clic en la paleta de color Barra y elige un color. 10. Para cambiar el color del texto del anuncio, haz clic en la paleta de colores Texto y elige un color. 11. Haz clic en Guardar.

Agregar un menú

Puedes agregar un menú a tu encabezado. Esto muestra todos los enlaces del menú en tu encabezado, los cuales pueden usarse para destacar las páginas frecuentes a las que tus clientes desean acceder. Por ejemplo, puedes agregar un menú que contenga enlaces a tus colecciones.

  1. Haz clic en Encabezado.

  2. Para seleccionar un menú, haz clic en Cambiar. Selecciona un menú de la lista o haz clic en Crear menú para crear uno nuevo.

  3. Para editar el menú, haz clic en Editar menú.

  4. 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

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 Pie de página.

  2. Marca Mostrar íconos de pago.

  3. Haz clic en Guardar.

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

  1. Haz clic en Pie de página.

  2. 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 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

Cuando agregas una cuenta de redes sociales a la configuración de tu tema, esta se muestra automáticamente en el pie de página.

Agregar un selector de idioma

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

  1. Haz clic en Secciones.

  2. Haz clic en Pie de página.

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

  4. 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 Pie de página.

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

  3. Haz clic en Guardar.

Páginas de productos

La sección de Páginas de productos es la sección principal personalizable para las páginas de productos. Si has activado el retiro en tienda, esta sección también muestra la disponibilidad de retiro del producto.

Puedes personalizar esta sección usando las siguientes opciones:

  • Mostrar selector de cantidad: permite a los usuarios especificar una cantidad para agregarla a su carrito.
  • Mostrar etiquetas de variantes: muestra etiquetas de variantes, como "Tamaño" y "Color" encima de menús desplegables de variantes. Las etiquetas variantes que aparecen se basan en los nombres de opciones de variantes del producto.
  • Mostrar proveedor: muestra la marca o el proveedor del producto. Para que se muestre una marca o un proveedor, debes agregar un proveedor al producto.
  • Mostrar botón de pago dinámico: permite que los clientes omitan el paso del carrito y vayan directamente a la pantalla de pago desde la sección de productos destacados.
  • Botones de compartir en redes sociales: muestra botones que los clientes pueden usar para compartir productos en redes sociales. Las opciones de compartir que aparecen están controladas por tu configuración de tema.

Elementos multimedia

  • Tamaño: define el tamaño de los medios de productos.
  • Activar zoom de imagen: permite a los clientes hacer zoom pasando el puntero sobre la imagen del producto.
  • Activar video en bucle: selecciona esta opción para mostrar videos de productos en bucle. Si esta opción no está seleccionada, aparece un botón de reproducción en los videos cuando terminan.

Editar configuración de páginas de productos

  1. Selecciona Páginas de productos.
  2. Haz clic en la sección Páginas de productos.
  3. Utiliza la configuración para personalizar tu sección de páginas de producto.
  4. Haz clic en Guardar.

Mostrar disponibilidad de retiro

Debut te permite mostrar a los clientes si un producto de tu tienda online está disponible para el retiro en tienda. En cada página de producto, la sección disponibilidad de retiro muestra si el producto está disponible y el plazo de retiro estimado. Para usar esta función, debes configurar retiro en tienda. Si has activado la función de retiro en tienda, estará siempre visible en tus páginas de producto y no podrá desactivarse.

Después de activar el retiro en tienda, la página de producto muestra si el producto está disponible para retirar en un lugar de retiro. Esta información aparece solo para productos que están en existencia en al menos un lugar de retiro y tienen la opción Este es un producto físico seleccionada en la sección Envío de los detalles de una variante de producto.

  1. Desde tu panel de control de Shopify, ve a Productos > Todos los productos.

  2. Selecciona un producto.

  3. En Variantes, selecciona una variante.

  4. En Envíos, marca la opción Este es un producto físico.

  5. Haz clic en Guardar.

Si has activado el retiro en tienda para una sucursal, se muestra la sucursal y la disponibilidad de retiro para esa sucursal. Para más información sobre el lugar de retiro, los clientes puede hacer clic en Ver información de la tienda.

Si has activado el retiro en tienda para más de una sucursal, la sección de disponibilidad de retiro muestra la sucursal y la disponibilidad de retiro para la sucursal más cercana al cliente, según la dirección IP del cliente. Cuando el cliente hace clic en Verificar disponibilidad en otras tiendas, la lista de lugares de retiro se ordena según la distancia del cliente.

Si no se puede determinar la ubicación del cliente a partir de su dirección IP, la sección disponibilidad de retiro muestra la sucursal y la disponibilidad de retiro alfabéticamente, primero por ciudad y luego por nombre de sucursal. Por ejemplo, supongamos que ves tres lugares de retiro: "Queen Street" en Toronto, "Front Street" en Toronto y "Alberni Street" en Vancouver. La sección disponibilidad de retiro mostraría los detalles de "Front Street" en Toronto.

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.

Activar recomendaciones de productos

  1. Selecciona Páginas de productos.

  2. Haz clic en la sección Recomendaciones de productos.

  3. Marca Mostrar recomendaciones dinámicas para mostrar recomendaciones de productos en las páginas de tus productos.

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

    1. Opcional: Para mostrar u ocultar los proveedores en las descripciones de productos, utiliza la casilla Mostrar proveedor.
  5. Haz clic en Guardar.

Páginas de colección

La sección Páginas de colecciones es la sección personalizable principal para las páginas de colecciones.

La sección Páginas de colecciones incluye las siguiente configuraciones:

  • Diseño: elige la forma en que se organizan los productos en la página de colección.
  • Productos por fila (solo cuadrícula): elige la cantidad de productos que se mostrarán en cada fila en la página de colección. Esta sección solo se aplica si el diseño está en cuadrícula.
  • Filas por página (solo cuadrícula): elige la cantidad de filas de productos que se mostrarán en la página de colección. Esta sección solo se aplica si el diseño está en cuadrícula.
  • Mostrar imagen de colección: muestra la imagen de colección en la parte superior de la página de colección.
  • Mostrar proveedores de producto: muestra el proveedor de cada producto debajo del título del producto.
  • Activar organización: selecciona esta opción para permitir que los clientes ordenen los productos en tus páginas de colecciones.
  • Activar filtrado por etiqueta: selecciona esta opción para permitir que los clientes filtren la colección por etiqueta de producto.

Editar configuración de páginas de colecciones

  1. Selecciona Páginas de colecciones.
  2. Haz clic en la sección Páginas de colección.
  3. Usa la configuración para personalizar la sección de tus páginas de la colección.
  4. Haz clic en Guardar.

Página de lista de colecciones

Tus clientes pueden usar la página de lista de colecciones para encontrar la colección que desean explorar. La página de lista de colecciones puede mostrar todas las colecciones en tu tienda, o puede mostrar un grupo de colecciones que selecciones.

La sección de página de lista de colección incluye las siguiente configuraciones:

  • Colección: define las colecciones que deseas mostrar en la página de lista de colecciones. Esta configuración se usa solo si la opción Seleccionar colecciones para mostrar está en Seleccionadas.
  • Seleccionar colecciones para mostrar: elige cuáles colecciones se mostrarán.
  • Ordenar colecciones por: define cómo se organizan tus colecciones. Esta configuración se usa solo si la opción Seleccionar colecciones para mostrar está configurado en Todas.
  • Colecciones por fila: define la cantidad de colecciones que se mostrarán en cada fila en la página de la lista de colecciones.

Personalizar la sección de la página de lista de colecciones

  1. Selecciona Lista de colecciones.
  2. Haz clic en la sección Página de lista de colecciones.
  3. Opcional: en el área Contenido, haz clic en Agregar colección para agregar colecciones a la página de lista de colecciones.
  4. Usa la configuración para personalizar la sección de tu lista de colecciones.
  5. Haz clic en Guardar.

Páginas de blog

La sección de Páginas del blog es la sección principal personalizable de una página de blog. Las páginas de blog muestran todos los artículos publicados en tu blog. Puedes enumerar los artículos de tu blog o mostrarlos en una cuadrícula. Tanto la vista de lista como la de cuadrícula muestran el título del artículo del blog y un extracto, si está disponible. Si no hay extractos disponibles, aparecen las primeras oraciones del artículo del blog.

La sección de páginas del blog incluye la siguiente configuración:

  • Diseño: elige Lista o Cuadrícula.
  • Mostrar autor: muestra el nombre del autor debajo del título del artículo del blog.
  • Mostrar fecha: muestra la fecha de publicación debajo del título del artículo del blog.

Personalizar tu sección de páginas de blog

  1. Selecciona Blogs. 2. Haz clic en la sección Páginas de blog. 3. Usa la configuración para personalizar tu sección de publicaciones. 4. Haz clic en Guardar.

Publicaciones

Las páginas de artículos de blog muestran artículos de blog individuales. La sección de artículos incluye las siguientes configuraciones:

  • Mostrar autor: muestra el nombre del autor debajo del título del artículo del blog.
  • Mostrar fecha: muestra la fecha de publicación del artículo del blog debajo del título del artículo.
  • Mostrar botones para compartir en redes sociales: selecciona esta opción para mostrar los botones para compartir en redes sociales en los artículos de tu blog. Puedes elegir qué plataformas se pueden usar para compartir en tu configuración de redes sociales.

Personalizar tu sección de publicaciones

  1. Selecciona Artículos de blog.
  2. Haz clic en la sección Publicaciones.
  3. Usa la configuración para personalizar la sección de publicaciones.
  4. Haz clic en Guardar.

Página del carrito de compras

La sección Página del carrito incluye la siguiente configuración:

  • Activar actualizaciones automáticas del carrito: selecciona esta opción para actualizar el carrito tan pronto como el cliente realice cambios. Por ejemplo, el precio del subtotal se puede actualizar cuando el cliente cambia la cantidad de artículos en su carrito.
  • Activar notas de carrito: en algunos temas, esta opción se llama Notas de pedido.

Personaliza la sección de la página de carrito

  1. Selecciona carrito. 2. Haz clic en la sección Página de carrito. 3. Usa la configuración para personalizar la sección Página del carrito. 4. 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.

La sección Colección destacada incluye las siguientes configuraciones:

  • Título: agrega el texto que aparece encima de los productos en la colección. El texto predeterminado es Colección destacada.
  • Colección: elige la colección que deseas mostrar en la sección.
  • Productos por fila: elige el número de productos a mostrar en cada fila en la sección.
  • Filas: elige el número de filas de productos para mostrar en la sección.
  • Mostrar proveedor de producto: muestra el proveedor de cada producto debajo del título del producto.
  • Mostrar botón "Ver todos": selecciona esta opción para agregar un botón de Ver todos debajo de la última fila en la sección. Los clientes pueden hacer clic en este botón para ver toda la colección.

Agregar una colección destacada a tu página de inicio

  1. Haz clic en Agregar sección. 2. Haz clic en Colección destacada, y luego haz clic en Seleccionar. 3. Haz clic en Seleccionar colección, y luego selecciona una colección de la lista Colección. Se mostrará un máximo de 50 productos de la colección que seleccionaste. 4. Usa la configuración para personalizar tu colección destacada. 5. 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 que sirva de enlace a otra página.

Puedes usar una sección de imagen con texto para promocionar un producto o colección específicos.

La sección Imagen con texto incluye las siguientes configuraciones:

  • Imagen: Agrega o selecciona la imagen para incluir en la sección. Puedes subir una imagen, usar una imagen que hayas subido antes o seleccionar una imagen gratis de archivo en Burst.
  • Alineación de imagen: elige si la imagen en la sección aparece a la derecha o a la izquierda.
  • Título: agrega el texto principal que irá con la imagen.
  • Texto: agrega el texto secundario que irá con la imagen. Este texto aparece debajo del texto del título.
  • Etiqueta de botón: agrega el texto que deseas que aparezca en el botón.
  • Enlace de botón: define la URL o página a la que deseas vincular el botón. Pega la URL o selecciona una página del menú. Si no deseas incluir un botón en la sección, deja este campo en blanco.

Agrega una sección de imagen con texto a tu página de inicio

  1. Haz clic en Agregar sección. 3. Haz clic en Imagen con texto y luego haz clic en Seleccionar. 4. En el área Image, 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 archivo de Burst, 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 de tu computadora, haz clic en la pestaña Biblioteca y luego haz clic en Subir imagen.
  2. Usa la configuración para personalizar la sección. 5. 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 Imagen con texto superpuesto incluye las siguientes configuraciones:

  • Imagen: elige la imagen para incluir en la sección. Puedes subir una imagen, usar una imagen que hayas subido antes o seleccionar una imagen gratis de archivo en Burst.
  • Alineación de imagen: elige si la imagen en la sección aparece a la derecha o a la izquierda.
  • 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.
  • Título: agrega un texto primario que acompañe a la imagen. La sección Imagen con texto superpuesto cambia de nombre automáticamente al título que indiques.
  • Texto: agrega el texto secundario que irá con la imagen. Este texto aparece debajo del texto del título.
  • Etiqueta de botón: agrega el texto que deseas que aparezca en el botón.
  • Enlace de botón: define la URL o página a la que deseas vincular el botón. Pega la URL o selecciona una página del menú. Si no deseas incluir un botón en la sección, deja este campo en blanco.

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

  1. Haz clic en Agregar sección. 2. Haz clic en Imagen con texto superpuesto y luego haz clic en Seleccionar. 3. 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 archivo de Burst, 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 de tu computadora, haz clic en la pestaña Biblioteca y luego haz clic en Subir imagen.
  2. Usa la configuración para personalizar tu imagen con texto superpuesto. 5. Haz clic en Guardar.

Producto destacado

Puedes destacar un producto en tu página de inicio. Destacar un producto es una excelente manera de promocionar un producto nuevo o que está en oferta. Los clientes pueden ver más imágenes del producto usando las flechas de izquierda y derecha debajo de la imagen.

La sección de productos destacados incluye la siguiente configuración:

  • Producto: elige el producto que deseas destacar en la página de inicio.
  • Mostrar selector de cantidad: permite a los usuarios especificar una cantidad para agregarla a su carrito.
  • Mostrar etiquetas de variantes: muestra etiquetas de variantes, como "Tamaño" y "Color" encima de menús desplegables de variantes. Las etiquetas variantes que aparecen se basan en los nombres de opciones de variantes del producto.
  • Mostrar proveedor: muestra la marca o el proveedor del producto. Para que se muestre una marca o un proveedor, debes agregar un proveedor al producto.
  • Mostrar botón de pago dinámico: permite que los clientes omitan el paso del carrito y vayan directamente a la pantalla de pago desde la sección de productos destacados.
  • Mostrar botones para compartir en redes sociales: muestra botones que tus clientes pueden usar para compartir tus productos en redes sociales.

Elementos multimedia

  • Tamaño: define el tamaño de los medios de productos.
  • Activar zoom de imagen: permite a los clientes hacer zoom pasando el puntero sobre la imagen del producto.
  • Activar video en bucle: mostrar videos de productos en bucle. Si esta opción no está seleccionada, aparece un botón de reproducción en los videos cuando terminan.

Agregar una sección de productos destacados

<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><li>Haz clic en <strong>Personalizar</strong> junto a <strong>Debut</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><li>Junto a <strong>Debut</strong>, toca <strong>Personalizar</strong>.
</li><li>Pulsa <strong>Editar</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><li>Junto a <strong>Debut</strong>, toca <strong>Personalizar</strong>.
</li><li>Pulsa <strong>Editar</strong>.
</li></ol></div>
</div>
  1. Haz clic en Agregar sección.
  2. Haz clic en Producto destacado, y luego haz clic en Seleccionar.
  3. Usa la configuración para personalizar tu sección de productos destacados.
  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.

Añadir un boletín a tu página de inicio

  1. Haz clic en Agregar sección.

  2. Haz clic en Boletín, y luego haz clic en Seleccionar.

  3. Introduce un título para la suscripción al boletín.

  4. Introduce un subtítulo para la suscripción a tu boletín.

  5. Haz clic en Guardar.

Mapa

Puedes agregar un mapa de Google a tu página de inicio para mostrarles a los clientes dónde se encuentra tu empresa.

Sugerencia: para que se muestre tu mapa, debes registrar una clave API de Google Maps.

La sección del mapa incluye las siguientes configuraciones:

  • Encabezado: agrega un encabezado a tu sección del mapa.
  • Dirección y horarios: agrega la dirección y los horarios de tu tienda a tu sección del mapa.
  • Dirección del mapa: establece el mapa que mostrará la ubicación de tu tienda.
  • Etiqueta de enlace del mapa: agrega un botón que enlaza a tu ubicación en Google Maps.
  • Mostrar pin: agrega un pin que muestre la ubicación específica de tu tienda en el mapa.
  • Clave API de Google Maps: agrega la clave API de tu mapa a la sección de mapas.
  • Imagen: agrega una imagen que se mostrará si el mapa no se carga.
  • Posición de la imagen: establece la ubicación de la imagen.

Agregar un mapa a tu página de inicio

  1. Haz clic en Agregar sección. 2. Haz clic en Mapa y luego haz clic en Seleccionar. 3. Usa la configuración para personalizar la sección de tu mapa. 4. Haz clic en Guardar.

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 mostrando una página con alguno de los siguientes objetos:

La sección de texto enriquecido incluye las siguientes configuraciones:

Pantalla ancha: reduce los márgenes a ambos lados del texto. Título: agrega un título a la sección de texto enriquecido. Texto: agrega y da formato a tu texto personalizado. 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. Tamaño: establece el tamaño de tu texto.

Agregar texto enriquecido a tu página de inicio

  1. Haz clic en Agregar sección.

  2. Haz clic en Texto enriquecido y luego haz clic en Seleccionar.

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

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

  • 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.
  • Enlace de video: Agrega el URL de YouTube a tu 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.
  • Altura del video: Establece la altura de tu video.
  • Encabezado: Agrega un encabezado a 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.

Agregar un video a tu página de inicio

  1. Haz clic en Agregar sección.
  2. Haz clic en Video y luego en Seleccionar.
  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 sección de presentación de diapositivas incluye las siguientes configuraciones:

  • Diapositiva de imagen: selecciona una imagen para incluir en la presentación de diapositivas. Puedes subir una imagen, usar una imagen que ya hayas subido o seleccionar una imagen de archivo gratuita de Burst. Puedes ajustar la siguiente configuración para cada diapositiva: - Posición de la imagen: elige la alineación de la imagen en el marco de la presentación de diapositivas. Puedes ver más información sobre la posición de la imagen en las pautas que se presentan a continuación.

    • Título: agrega el texto principal que irá con la imagen.
    • Subtítulo: agrega el texto secundario que irá con la imagen. Este texto aparece debajo del texto del título.
    • Etiqueta de botón: agrega el texto que deseas que aparezca en el botón.
    • Enlace de botón: define la URL o página a la que deseas vincular el botón. Pega la URL o selecciona una página del menú. Si no deseas incluir un botón en la sección, deja este campo en blanco.
  • Altura de la diapositiva: define la altura de la presentación de diapositivas. Más información sobre cómo la altura afecta tu presentación de diapositivas.

  • Tamaño del texto: define el tamaño de tus títulos en la presentación de diapositivas.

  • Alineación de texto: elige la posición del texto en tus diapositivas.

  • Mostrar sobreposición: agrega 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.

  • Rotación automática de diapositivas: configura la presentación de las diapositivas para que se reproduzca automáticamente.

  • Transición entre diapositivas: elige la frecuencia con la que se cambiarán las diapositivas.

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 de presentación de diapositivas.

Agrega una presentación de diapositivas a tu página de inicio

  1. Haz clic en Agregar sección. 3. Haz clic en Presentación de diapositivas y luego haz clic en Seleccionar. 4. Para agregar una diapositiva, realiza los siguientes pasos:
1. In the **Content** area, click **Add image slide**.

2. Under **Image**, click **Select image**. To upload an image from your computer, click **Upload**. To use a free stock image from [Burst](https://burst.shopify.com/), click **Free images**.

3. To choose how you want to align the image in the slideshow, select a position from the **Image position** drop-down menu. You can learn more about [image position](#control-how-your-images-are-cropped) in the guidelines below.

4. To add text to the image slide, enter text in the **Heading** field, the **Subheading** field, or both.

5. Add a button to your image slide by entering text in the **Button label** field. Select a part of your online store for the button to link to in the **Button link** field.
  1. Usa la configuración para personalizar tu sección de presentación de diapositivas.
  2. 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