Debut

Debut es un tema flexible apropiado para todas las tiendas, independientemente del tamaño del inventario. Con Debut puedes configurar rápidamente una tienda y comenzar a vender; Debut tiene una apariencia pulida sin personalizaciones de tema.

Ejemplo de tienda online que usa Debut

El tema Debut es ideal si quieres:

  • Comenzar a vender de inmediato, sin tener que personalizar mucho la plantilla.
  • Asegurarte de que tu tienda se vea bien en tabletas y teléfonos inteligentes.
  • Reorganizar fácilmente el diseño de tu tienda y ver tus cambios en tiempo real.

Editor de temas

Utiliza el editor de tema para personalizar tu tema. La barra de herramientas del editor de temas está dividida en Secciones y Configuraciones de tema.

La barra de herramientas del editor de temas muestra las Secciones y la Configuración de temas

Puedes usar secciones para modificar el contenido y el diseño de las diferentes páginas en tu tienda. Puedes usar la configuración del tema para personalizar las fuentes y colores de tu tienda y hacer cambios en tus enlaces a redes sociales y configuraciones de pago.

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 el registro 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 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 de carrito

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 de blog

  • Lista de colecciones
  • colección destacada
  • Galería
  • Imagen con texto
  • Imagen con superposición de texto
  • Lista de logotipos
  • Diapositivas
  • Producto destacado
  • Boletín
  • Mapa
  • Texto enriquecido
  • Testimonios
  • Columnas de texto con imágenes
  • 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 logotipo, elegir qué menú mostrar y crear un mensaje de anuncio.

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

Para personalizar la sección del encabezado:

  1. Ubica Debut y haz clic en Personalizar.

  2. Haz clic en Secciones.

  3. Haz clic en Encabezado.

  4. Para establecer la alineación de tu logotipo, en el área de Alineación de logotipo, selecciona Izquierda o Centrado. Si no agregas una imagen de logotipo, 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 logotipo, en el área Imagen del logotipo, 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 logotipo, ajusta el control deslizante de Ancho de logotipo personalizado al ancho que desees. Ajustar el ancho del logotipo no distorsionará la imagen de tu logotipo.

  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:

    1. En el área de Barra de anuncios, marca Mostrar anuncio.
    2. 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.
    3. Inserta el texto de tu anuncio en el campo Texto.
    4. Para agregar un enlace a tu anuncio, introduce el URL en el campo Enlace.
    5. Para cambiar el color del fondo de la barra de anuncios, haz clic en la muestra del color de la Barra y elige un color.
    6. Para cambiar el color del texto del anuncio, haz clic en la muestra de color de Texto y elige un color.
  9. Haz clic en Guardar.

Pie de página

En la sección del pie de página, puedes editar el contenido que aparece en la parte inferior de cada página de la tienda. Puedes agregar lo siguiente al pie de página:

  • hasta dos menús
  • suscripción a un boletín
  • iconos de pago

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.

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

  1. Ubica Debut y haz clic en Personalizar.

  2. Haz clic en Secciones.

  3. Haz clic en Pie de página.

  4. Personaliza el menú del pie de página principal desde el área Menú principal. Para editar el menú predeterminado, haz clic en Editar menú. Para cambiar a un menú diferente, haz clic en Cambiar y, luego, selecciona un menú existente o haz clic en Crear menú.

  5. Agrega un menú adicional al pie de página desde el área Menú adicional.

  6. Para agregar la opción de suscripción a un boletín al pie de página, realiza los siguientes pasos:

    1. Marca Mostrar suscripción al boletín.
    2. Introduce un subtítulo para la suscripción al boletín en el campo Subtítulo.
  7. Puedes agregar iconos de pago, como el de Mastercard o PayPal, al pie de página si marcas Mostrar iconos de pago.

  8. Haz clic en Guardar.

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

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

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

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 colección es un enlace de nivel superior en el menú del encabezado:

Página de inicio de Debut con el enlace de Catálogo resaltado en el menú superior

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 el elemento 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 de carrito

Con Debut, puedes dejar que tus clientes agreguen notas a sus pedidos en la página del carrito:

  1. Navega a tu página de carrito en el editor de temas, agregando un producto al carrito.

  2. Haz clic en la pestaña Secciones.

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

  4. Marca Habilitar notas de 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. De la lista Productos por fila, selecciona cuántos productos mostrar en cada fila.

  6. 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 promocionar 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:

- 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 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 del botón, inserta el texto que deseas 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

Con Debut, la página de inicio de tu tienda puede mostrar una imagen grande con texto superpuesto, que proporciona una primera impresión de tu marca:

Puedes agregar un botón en la imagen para dirigir a tus clientes hacia cualquier página en tu tienda. También puedes cambiar la alineación de la imagen dentro de la sección, ajustar la altura de la sección y elegir texto más grande o más pequeño.

Para crear una imagen con superposición de texto:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Imagen con superposición de texto.

  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 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. Escoge la manera como quieres alinear la imagen en la sección, seleccionando Superior, Medio o Bajo de la lista de Alineación de imagen.

  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. De la lista de Altura de la sección, selecciona una altura de la imagen.

  1. A partir de la lista Tamaño de texto, selecciona un tamaño para el texto del carrusel de diapositivas.

  2. En el campo Etiqueta del botón, inserta el texto que deseas que aparezca en el botón.

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

  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 marketing por correo electrónico. Puedes obtener más información sobre el marketing por correo electrónico 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. Ubica Debut y haz clic en Personalizar.

  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.

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 del carrusel y el tamaño de imágenes recomendado, consulta las siguientes pautas.

Para crear tu carrusel de diapositivas:

  1. Ubica Debut y haz clic en Personalizar.

  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 superposición. Una superposición de imagen es una capa de color entre una imagen y cualquier texto que se coloca sobre la imagen. Las superposiciones pueden ayudar con el contraste de color y la legibilidad. Puedes configurar el color y la opacidad de la superposició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 imagen introduciendo texto en el campo Etiqueta del botón texto. Selecciona una parte de tu tienda online para vincular el botón en el campo Enlace de botón:

    El campo Enlace de botón en el editor de temas. Al hacer clic en el enlace, se muestra un menú que incluye colecciones, productos, páginas, blogs y publicaciones de blog. Puedes usar este menú para vincular a una colección, producto, etc. en particular.

  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 diapositiva:

Los ajustes de altura de diapositiva en el editor de temas. Un menú desplegable de altura de diapositiva muestra las siguientes opciones: Adaptarse a la primera imagen, Pequeña, Mediana y Grande.

Usa las siguientes pautas:

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:

Los ajustes de Posición de imagen en el editor de temas. Un menú desplegable muestra nueve opciones diferentes, como por ejemplo

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 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 altura de la diapositiva, 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 impactar en los 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.

Configuración del tema Puedes usar la configuración del tema para personalizar los colores y la tipografía en tu tienda online. También puedes configurar enlaces a tus cuentas de redes sociales, editar la configuración de tu carrito y agregar un favicon.

Debut incluye la siguiente configuración de tema: 


  • Colores
  • Tipografía
  • Redes sociales
  • favicon
  • Caja

Colores

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

Personalizar tu configuración de color

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

  2. Haz clic en Configuración del tema.

  3. Haz clic en Colores.

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

Puedes configurar el estilo y tamaño de la fuente para el texto de tu tienda online.

Personalizar tu configuración de tipografía

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

  2. Haz clic en Configuración del tema.

  3. Haz clic en Tipografía.

  4. Para cada tipo de texto, haz clic Cambiar para usar el selector de fuente:

    El botón 'Cambiar' en el selector de fuente

  5. Explora las fuentes utilizando el campo de búsqueda o haciendo clic en Cargar más.

    Para ver todas las fuentes disponibles, consulta la biblioteca de fuentes de Shopify.

  6. Haz clic en el nombre de la fuente que deseas actualizar.

  7. Para cambiar la fuente a un estilo diferente, como negrita o cursiva, haz clic en Regular. A continuación, haz clic en el estilo que deseas usar y luego haz clic en Seleccionar:

    Una selección de grosores de fuente disponible en el selector de fuente

  8. Haz clic en Guardar.

Redes sociales

Puedes agregar botones de redes sociales para tus productos y publicaciones de blog, y enlaces a tus redes sociales.

Para personalizar la configuración de redes sociales:

  1. Ubica Debut y haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Redes sociales.

  4. Para cargar una imagen para compartir en redes sociales, en el área Imagen para compartir en redes sociales, haz clic en Seleccionar imagen o Explorar imágenes gratuitas.

  5. Para agregar botones de redes sociales a tus productos y entradas de blog, en el área Opciones de compartir, marca cualquiera o todas las casillas.

    Puedes agregar los siguientes botones para compartir:

- Compartir en Facebook - Tuitear en Twitter - Publicar en Pinterest (no disponible para blogs)

  1. Para agregar enlaces a tus redes sociales, en el área Cuentas, introduce los enlaces a tus cuentas en los campos correspondientes. Introduce enlaces completos, como https://instagram.com/shopify, o https://twitter.com/shopify.

    Los enlaces a tus cuentas de redes sociales aparecen en el pie de página de tu tienda online.

  2. Haz clic en Guardar.

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 sucursales:

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

El mejor tamaño de imagen para el ícono de favorito para Debut es 32 x 32 px.

Para cargar un favicon:

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

  2. Haz clic en la pestaña 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".

  1. Haz clic en Guardar.

Caja

Puedes personalizar tu pantalla de pago para incluir lo siguiente:

  • un banner con imagen personalizado en la parte superior de la página
  • el logotipo de tu tienda
  • una imagen de fondo o color en el área de contenido principal
  • fuentes de texto y colores personalizados.

Para ver los cambios a medida que los aplicas, ve a tu pantalla de pagos en el editor de temas.

Para acceder a la configuración de la pantalla de pagos:

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

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

  3. Haz clic en Pantalla de pagos.

Para agregar una imagen de banner:

  1. En el área Banner, selecciona la casilla Usar fondo personalizado.

  2. Haz clic en Seleccionar archivo para subir una archivo de imagen.

Para agregar un logotipo:

  1. En el área Logo, selecciona Personalizado en el menú desplegable Imagen.

  2. Haz clic en el enlace Seleccionar archivo para subir una archivo de imagen.

  3. En el menú desplegable Posición, selecciona dónde quieres que aparezca la imagen, ya sea a la derecha, a la izquierda o en el centro.

  4. En la lista Tamaño del logotipo, selecciona un tamaño de logotipo.

Para personalizar el área de contenido principal:

  1. En el Área de contenido principal, selecciona la casilla Usar fondo personalizado.

  2. Realiza algunas de las siguientes acciones:

- Haz clic en Seleccionar archivo para subir una archivo de imagen. - Haz clic en la muestra de Color de fondo para seleccionar un color nuevo a partir de una paleta.

  1. En el menú desplegable Campos de formulario, selecciona si los campos serán blancos o transparentes.

Para personalizar la página de Resumen del Pedido:

  1. En el Área de Resumen de Pedido, selecciona la casilla Usar fondo personalizado.

  2. Realiza algunas de las siguientes acciones:

  3. Haz clic en Seleccionar archivo para subir una archivo de imagen.

  • Haz clic en la muestra de Color de fondo para seleccionar un color nuevo a partir de una paleta.

Para configurar las opciones de fuente:

  • En el área de Tipografía, selecciona la fuente que se usarás para el encabezado y el cuerpo de texto de los menús desplegables.

Para establecer las opciones de color:

  • En el área de Colores, haz clic en la muestra de color Acentos, Botones o Errores para elegir un nuevo color a partir de una paleta.

Cambiar el estilo del tema

Puedes restablecer la configuración general de tu tema a sus valores predeterminados. Si restableces el estilo de tu tema, se perderán los cambios que hayas realizado en la pestaña Configuración general, pero no se perderá el contenido como texto e imágenes.

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

  2. Haz clic en Cambiar el estilo del tema.

  3. Haz clic en el siguiente botón Cambiar el estilo del tema. El nombre de este botón es generalmente el nombre del tema.

  4. Haz clic en Cambiar estilo.

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

Pruébala gratis