Boundless

Boundless es un tema centrado en fotografías con una interfaz de usuario mínima que presenta fotografías de borde a borde. Boundless está creado principalmente para dispositivos móviles y es adecuado para tiendas con inventarios medianos a grandes.

Ejemplo de tienda online que usa Boundless

Editor de temas Usa el editor de temas 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 que muestra las Secciones y la Configuración de tema
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.

Secciones Las secciones son bloques de contenido personalizables que determinan el diseño de tu tienda online. Cada tema incluye secciones estáticas y secciones dinámicas. ### Secciones estáticas Las secciones estáticas están siempre en lugares específicos en tu tienda online. Puedes editar secciones estáticas, pero no puedes reorganizarlas ni eliminarlas. Cada tipo de página de tu tienda online tiene diferentes secciones estáticas.

Boundless incluye las siguientes secciones estáticas:

  • Encabezado
  • Menú de la barra lateral
  • Barra de anuncios
  • Diapositivas
  • Barra de acciones
  • Pie de página
  • Producto
  • colección
  • Página de lista de colecciones
  • Artículo

Secciones dinámicas Puedes agregar, reorganizar, and 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.

Boundless incluye las siguientes secciones dinámicas:

  • Entradas del blog
  • Lista de colecciones
  • colección destacada
  • Imagen con texto
  • Producto destacado
  • Boletín
  • Mapa
  • Texto enriquecido
  • Video
  • HTML personalizado

Encabezado

La mayoría de los temas incluyen una sección de encabezado y una sección de pie de página que se muestran en cada página de la tienda. Boundless es diferente de otros temas porque no incluye una sección de encabezado en la página de inicio. En su lugar, en la página de inicio aparece un menú de barra lateral y una barra de acción en la parte superior de la página. Para ver y editar la sección de encabezado, selecciona cualquier tipo de página aparte de la Página de inicio en el menú desplegable de la barra superior.

La sección de encabezado incluye la opción de subir una imagen de logotipo y establecer un ancho de logotipo personalizado.

Menú de la barra lateral

El menú de barra lateral es como una tabla de contenidos de tu tienda. No importa dónde esté el cliente, el botón de menú mostrará el menú principal y el menú de pie de página de tu tienda:

El menú de barra lateral muestra dos menús: el Menú primario se muestra en la parte superior en letra más grande, y el Menú adicional se muestra debajo del Menú primario en letra más pequeña.

Para personalizar el menú de barra lateral:

  1. Haz clic en Secciones.

  2. Haz clic en Menú de barra lateral.

  3. En la lista del Menú principal , selecciona el menú que deseas mostrar como menú principal. Éste será el menú principal de tu tienda.

  4. En la lista del Menú adicional , selecciona el menú que deseas mostrar debajo del menú principal. Éste será el menú inferior de tu tienda.

  5. Haz clic en Guardar.

Diapositivas

Boundless usa una presentación de diapositivas de pantalla completa o "hero", por lo que es mejor usar imágenes de gran tamaño. Por ejemplo, usa imágenes de 3840 x 2160 px o más grandes, siempre y cuando no exceda los límites de carga de Shopify. Con Boundless, puedes mostrar hasta 6 diapositivas en el carrusel de la página de inicio.

Boundless incluye varias características de carrusel que no están disponibles para todos los temas. Puedes cargar un logotipo de imagen o el nombre de tu tienda en el medio de la imagen de carrusel. También puedes aplicar una superposición de color en las imágenes del carrusel.

Para personalizar la presentación del carrusel de tu tienda:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Presentación.

Para agregar una imagen de diapositiva:

  1. En el área de Contenido , haz clic en Imagen.

  2. Para agregar una imagen al carrusel de diapositiva, 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".

Para mostrar el nombre de tu tienda en diapositivas de imagen:

  1. En el área Logotipo , haz clic en la muestra de color de texto para seleccionar un color de texto de una paleta.

  2. En la lista Tipo de logotipo , selecciona Texto del nombre de la tienda. El nombre de tu tienda se muestra automáticamente.

Para mostrar el logotipo de tu tienda en las diapositivas de imagen:

  1. En el área Logotipo , en la lista Tipo de logotipo , selecciona Personalizar logotipo.

  2. En el área del Imagen de logo personalizado , 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. Inserta el ancho del logotipo en el campo Personalizar ancho de logotipo (en pixeles).

Para aplicar una superposición de color al carrusel de imágenes

  1. En el área Superposición , haz clic en la muestra de color de superposición de imagen para seleccionar un color de la paleta.

  2. A partir de la lista Opacidad selecciona el porcentaje de transparencia para la superposición de imágenes.

Barra de acciones

Por defecto, la barra de acciones muestra el menú principal de tu tienda. Puedes personalizar tu barra de acciones para mostrar diferentes elementos según la página que esté mirando tu cliente. En la página de inicio, la barra de acciones se usa frecuentemente para mostrar tus colecciones de productos. Dentro de una colección, la barra de acciones puede mostrar otras subcategorías u otras colecciones relacionadas.

Por ejemplo, si tu tienda vende prendas de vestir, tu barra de acción podría mostrar Hombres , Mujeres y Accesorios en tu página de inicio. Si un cliente hace clic en Mujeres , la barra de acción podría mostrar Camisas , Pantalones y Calzado en la página de colección.

Para que tu barra de acción funcione de esta manera, usa tu menú principal para los enlaces hacia tus colecciones. Coloca enlaces hacia otras partes de tu tienda (tus páginas de Contacto o Sobre nosotros ) en el menú inferior de tu página.

Para personalizar tu barra de acciones:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Barra de acción.

  3. En la lista Menú , selecciona el menú que deseas mostrar en la barra de acciones.

  4. Haz clic en Guardar.

Pie de página

Con Boundless, puedes mostrar un menú en el contenido del pie de página.

Para personalizar el pie de página de tu tienda:

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Pie de página.

  3. En la lista Menú , selecciona el menú que deseas mostrar en el pie de página.

  4. Haz clic en Guardar.

Producto

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

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

También puedes omitir la primera imagen del producto, establecer el estilo de tus imágenes y elegir el ancho del formulario del producto.

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

  4. Para omitir la primera imagen del producto, marca Omitir la primera imagen del producto.

    Esto significa que la primera imagen del producto se muestra solo en páginas de colección, y no en páginas de productos. Con esta opción, puedes diseñar la primera imagen del producto para que se vea mejor en páginas de colecciones y adaptar las demás imágenes de tus productos para que se vean mejor en el espacio más grande disponible en la página del producto:

    Ejemplo donde se muestra la página de colección con la primera imagen del producto y la página del producto con la segunda y tercera imagen del producto

  5. Para configurar tu estilo de imagen, desde el menú desplegable Estilo de imagen , selecciona Alto/cuadrado o Ancho.

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

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

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

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

  10. Para establecer el ancho del formulario del producto, en el menú desplegable Ancho de formulario del producto , selecciona Pequeño o Grande.

  11. Haz clic en Guardar.

colección

Boundless incluye varias opciones de clasificación y filtro, apariencia y paginación para tus páginas de colección.

  1. En la vista previa del tema, abre una página de producto.

  2. Haz clic en la pestaña Secciones.

  3. Haz clic en Colección.

  4. En el área Apariencia , configura las siguientes opciones:

- En la lista Estilo de imagen , selecciona una orientación para la imagen del producto, ya sea Alto/Cuadrado o Ancho.

  • En la lista Tamaño de imagen , selecciona un tamaño para las imágenes del producto.

  • Si deseas aumentar el espacio entre las imágenes, marca la casilla Agregar espacio entre las imágenes.

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

  1. En el área Clasificación y filtro , configura las siguientes opciones:
  • Si deseas mostrar una lista de opciones de clasificación, entonces marca la casilla Mostrar opciones de clasificación.

  • Si deseas mostrar una lista que permita a los clientes hacer un filtro por etiqueta, marca la casilla Mostrar filtro de etiqueta.

  1. En el área Paginación , en la lista Tipo de paginación , selecciona si deseas mostrar páginas numeradas o un botón "Ver más".

  2. Haz clic en Guardar.

colección destacada

En la sección Colección destacada del editor de temas, la opción Estilo de imagen te permite cambiar la forma en que las páginas de colecciones y productos muestran las imágenes:

  • Alto/cuadrado es la mejor opción si las imágenes de tu producto son cuadradas o están en orientación vertical.
  • Ancho funciona mejor si tus imágenes son rectangulares o su orientación es horizontal.

La opción Tamaño de imagen determina qué tan grandes serán las imágenes de tus productos en la página de colecciones. Si muestras imágenes de productos pequeñas, puedes colocar más imágenes en una sola fila.

La cantidad de imágenes que se muestran por fila también depende del dispositivo del cliente (escritorio o móvil) y del tamaño de la ventana.

  1. Haz clic en la pestaña Secciones.

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

  3. Selecciona una colección de la lista Colección. Se mostrará un máximo de 50 productos de la colección que seleccionaste.

  4. En la lista Estilo de imagen , elige si deseas que las imágenes sean Altos/Cuadrados o Anchos.

  5. En la lista Tamaño de imagen , elige un tamaño de imagen.

  6. Para aumentar el espacio alrededor de las imágenes del producto, marca Agregar espaciado de imagen.

  7. Para mostrar el proveedor del producto o la marca, selecciona Mostrar proveedor del producto.

  8. 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 Boundless 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 encabezado 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.

Texto enriquecido

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

  1. Haz clic en la pestaña Secciones.

  2. Haz clic en Texto enriquecido.

  3. Introduce y da formato a tu texto.

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

  5. Haz clic en Guardar.

Video

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

Para agregar un video a la página de inicio:

  1. Ubica Boundless y haz clic en Personalizar.

  2. Haz clic en Secciones.

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

  4. Introduce un título para el video en el campo Título.

  5. Introduce un enlace para compartir el video en el campo Enlace de video.

    Un enlace para compartir un video de YouTube tiene este formato: https://youtu.be/OTJXAUZY9t0. Puedes aprender cómo copiar el enlace para compartir un video de YouTube en este artículo de ayuda de YouTube.

    Un enlace para compartir un video de Vimeo tiene este formato: https://vimeo.com/281332510. Puedes aprender cómo copiar el enlace para compartir un video de Vimeo en este artículo del Centro de ayuda de Vimeo.

  6. Haz clic en Guardar.

HTML personalizado

En la sección HTML personalizado , puedes usar código HTML para crear contenido personalizado para tu página de inicio. Por ejemplo, puedes usar HTML para dar formato a bloques de texto, crear tablas o insertar contenido desde un sitio web externo.

Para agregar HTML personalizado a tu página de inicio:

  1. Ubica Boundless y haz clic en Personalizar.

  2. Haz clic en Secciones.

  3. Haz clic en Agregar sección.

  4. En el área de Diseño avanzado , haz clic en HTML personalizado > Agregar.

  5. Haz clic en HTML personalizado e introduce el código HTML que desees agregar a tu página de inicio.

  6. Haz clic en Guardar.

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.

Boundless incluye las siguientes configuraciones de tema:

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

Colores

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

Pasos

  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 elegir la tipografía del texto en tu tienda online.

Pasos

  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.

Carrito

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

El tema Boundless es compatible con 2 tipos de carritos:

  • Página que redirecciona a los clientes a tu pantalla de pago cuando agregan un artículo al carrito.

  • Cajetín que abre un cajetín deslizante al lado de la pantalla donde se agregan los artículos al carrito e invita al usuario a que vaya a la pantalla de pago.

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

Para definir las opciones de carrito en Brooklyn:

  1. Haz clic en Configuración del tema.

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

  3. Selecciona un tipo de carrito de la lista Tipo de carrito.

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

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

  6. 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 de compartir:

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

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

Para cargar un favicon:

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

  2. Haz clic en Favicon.

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

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

Sugerencia: El tamaño recomendado para Boundless es 32 x 32px.

  1. Haz clic en Guardar.

Caja

Esta sección te permite personalizar el pago de tu tienda. Haz clic aquípara obtener más información sobre la ventana de pago de tu tienda.

Configuración de submenús en la barra de acciones

Al configurar la navegación de tu tienda, es importante tener en cuenta que si creas un menú en la barra de acciones que enlaza hacia la página de inicio, ese menú también se mostrará en la página de inicio. Esto puede ocurrir cuando configuras menús para colecciones que no existen todavía, por lo que en su lugar creas un enlace de marcador de posición hacia la página de inicio.

Mejores prácticas: se recomienda que primero crees tus colecciones, antes de crear los enlaces de colección para la barra de acciones. O bien, puedes vincular a la página Todos los productos hasta que hayas creado la colección hacia la cual deseas establecer el enlace.

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

Pruébala gratis