Características de la tienda online

Puedes agregar características a cualquier página de tu tienda online, usando secciones. Puedes elegir, agregar y configurar secciones con imágenes, texto, colores de la marca, entre otros.

Algunas páginas tendrán secciones predeterminadas, como la barra de anuncios, el encabezado y el pie de página. Estas secciones aparecen en cada página.

Barra de anuncios

La barra de anuncios te permite comunicar información importante a los clientes desde cualquier página y personalizar hasta 12 bloques de anuncios diferentes. También puedes agregar un selector de idioma, un selector de país o región e íconos de redes sociales a la barra de anuncios.

Si tienes varios anuncios, puedes elegir si rotarlos automáticamente o permitir que los clientes pasen por ellos manualmente con los botones de comillas angulares.

Configuración de la sección

La configuración de la sección de la barra de anuncios
Configuración Descripción
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Mostrar línea separadora Muestra una línea para separar visualmente la barra de anuncios del contenido de la página.
Íconos de redes sociales Muestra íconos de redes sociales vinculados a tus cuentas de redes sociales.
Rotar anuncios automáticamente Activa esta opción para rotar los anuncios automáticamente.
Cambiar diapositivas cada Selecciona la frecuencia de rotación de los anuncios.
Activar selector de país/región Agrega un selector donde un cliente puede elegir los países y regiones que actives en la configuración de pago para que pueda ver los precios de los productos en la moneda de su elección.
Activar selector de idioma Agrega un selector donde un cliente puede elegir los países y regiones que actives en la configuración de idioma para que pueda navegar por la tienda en el idioma de su elección.

Bloque de anuncios

Puedes agregar un texto y un enlace a un bloque de anuncios para que se pueda hacer clic en él y lleve a los clientes a una página específica.

La configuración del bloque de anuncios en la sección de la barra de anuncios
Configuración Descripción
Texto El anuncio que deseas mostrar a tus clientes.
Enlace El enlace al que deseas que los clientes naveguen si hacen clic en la barra de anuncios.

El encabezado se muestra en todas las páginas de tu tienda online.

Configuración de la sección

La configuración de la sección del encabezado
Configuración Descripción
Posición de logo en computadora

Donde se muestra el logo en el encabezado cuando un cliente ve el sitio en una pantalla grande. La posición del logo se optimiza automáticamente para dispositivos móviles.

  • Centrado a la izquierda - Muestra el logo en línea con el menú principal, centrado verticalmente y alineado a la izquierda.
  • Arriba a la izquierda . Muestra el logo encima del menú principal y alinea el logo y las opciones del menú a la izquierda.
  • Centrado en la parte superior (predeterminado) - Muestra el logo encima del menú principal y alinea el logo y las opciones del menú en el centro.
Menú El menú que se usará como menú principal. Haz clic en Cambiar para seleccionar un menú diferente.
Tipo de menú de escritorio Usa el menú desplegable para elegir un tipo de menú de escritorio:
  • Menú desplegable: muestra el contenido del menú del segundo nivel, con el tercer nivel contraído hasta que se hace clic en el elemento del segundo nivel correspondiente. El tipo de menú se optimiza automáticamente para dispositivos móviles.
  • Mega menú: muestra todo el contenido de los menús de los niveles segundo y tercero al primer clic. El tipo de menú se optimiza automáticamente para dispositivos móviles.
  • Cajón: muestra el menú lateral a través de un ícono de menú de hamburguesa. Al hacer clic en él, se mostrarán todos los elementos del menú del primer nivel, sobre los que también se puede hacer clic para abrir otras ventanas de navegación (niveles segundo y tercero).
Encabezado fijo

Elige si deseas usar un encabezado fijo y cómo quieres que se muestre.

  • Ninguno: el encabezado no se desplaza con el cliente.
  • Al desplazarse hacia arriba: el encabezado se muestra cuando el cliente se desplaza hacia arriba en la página.
  • Siempre: el encabezado siempre se muestra cuando el cliente se desplaza hacia arriba o hacia abajo en la página.
  • Siempre, reduce el tamaño del logo: el encabezado siempre se muestra cuando el cliente se desplaza hacia arriba o hacia abajo en la página. El tamaño del logo se reduce en un 25% a medida que el cliente se desplaza por la página.
Mostrar línea separadora Muestra una línea para separar visualmente el encabezado del contenido de la página.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Activar selector de país/región Agrega un selector donde un cliente puede elegir los países y regiones que has activado en tu configuración de pagos, para que los clientes puedan ver los precios de tus productos en la moneda de su elección.
Activar selector de idioma Agrega un selector donde un cliente puede elegir los países y regiones que has activado en tu configuración de idiomas, para que los clientes puedan navegar por tu tienda en el idioma que elijan.
Posición del logo en dispositivo móvil

Elige dónde se muestra el logo en dispositivos móviles.

  • Centrado: el logo se muestra en el centro del encabezado.
  • Izquierda: se muestra el logo a la izquierda del encabezado.
Espaciado Agrega espacio debajo del encabezado. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio al margen inferior.
Relleno de sección Agrega espacio en la parte superior o inferior del encabezado. Usa la escala deslizable para agregar entre 0px y 100px de espacio a la parte superior o inferior del encabezado.

Bloque de encabezado

Puedes agregar los siguientes bloques en la sección Encabezado.

La configuración del bloque de la aplicación en la sección de encabezado
Configuración Descripción
Aplicaciones Agrega una aplicación compatible con Online Store 2.0. Agrega hasta 3 aplicaciones. Se colocarán a la izquierda del ícono del carrito y se limitarán a un tamaño de 44 x 44 px.

El pie de página se muestra en todas las páginas de tu tema.

Configuración de la sección

La configuración de la sección del pie de página
Configuración Descripción
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Mostrar suscriptor de correo electrónico Incluye un formulario de suscripción de correo electrónico donde los clientes pueden suscribirse a tu boletín y marketing.
Encabezado El título del formulario Mostrar suscriptor de correo electrónico. Si la opción Mostrar suscriptor de correo electrónico no está activada, esto no se muestra. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Seguir en Shop Muestra un botón de seguimiento de tu tienda online en la aplicación Shop. Obtén más información sobre cómo seguir en Shop.
Íconos de redes sociales Muestra íconos para cualquier plataforma de redes sociales para las que hayas introducido un enlace de perfil en la configuración de tu tema.
Activar selector de país/región Agrega un selector donde un cliente puede elegir los países y regiones que has activado en tu configuración de pagos, para que los clientes puedan ver los precios de tus productos en la moneda de su elección.
Activar selector de idioma Agrega un selector donde un cliente puede elegir los países y regiones que has activado en tu configuración de idiomas, para que los clientes puedan navegar por tu tienda en el idioma que elijan.
Mostrar íconos de pago Muestra los íconos de las formas de pago que están activadas en tu tienda. Es posible que el ícono de alguna forma de pago no esté disponible si no lo registró el proveedor de pagos. Cuando un cliente visita tu tienda, estos íconos se filtran para que solo se muestren las formas de pago admitidas en la región y moneda actuales del cliente.
Mostrar enlaces a las políticas Muestra los íconos de enlaces de políticas junto a tu información de derechos de autor. Los enlaces de políticas se generan desde Configuración > Políticas en el panel de control de Shopify. Obtén más información sobre cómo agregar las políticas de la tienda.
Espaciado Agrega espacio encima del pie de página. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio al margen superior.
Relleno de sección Agrega espacio a la parte superior o inferior del pie de página. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio a la parte superior o inferior del pie de página.

Bloque de menú

La configuración del bloque de menú en la sección del pie de página
Configuración Descripción
Encabezado El título del bloque. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Menú El menú que se mostrará en el bloque. Solo los elementos del menú de nivel superior se muestran en el pie de página, por lo que los tipos de menú desplegable no se mostrarán como se espera.

Bloque de información de marca

La información de tu marca se gestiona en la configuración del tema. Obtén más información sobre la información de marca.

La configuración del bloque de información de marca en la sección del pie de página
Configuración Descripción
Mostrar íconos de redes sociales Muestra íconos para cualquier plataforma de redes sociales para las que hayas introducido un enlace de perfil en la configuración de tu tema.

Bloque de texto

El bloque de texto puede usarse para resaltar información importante, como detalles de la tienda, promociones o información de contacto.

La configuración del bloque de texto en la sección del pie de página
Configuración Descripción
Encabezado El título del bloque. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Subtexto El texto que se mostrará en el bloque.

Bloque de imágenes

La configuración del bloque de imágenes en la sección del pie de página
Configuración Descripción
Imagen La imagen que se mostrará en el bloque.
Ancho de imagen Establece el ancho de la imagen. Puede ser cualquier múltiplo de 5, de 50 px a 200 px. El valor predeterminado es 100 px.
Alineación de imagen en pantalla grande

Alinea la imagen dentro del bloque:

  • Izquierda - Alinea la imagen a la izquierda del bloque.
  • Centrado (predeterminado) - Alinea la imagen al centro del bloque.
  • Derecha - Alinea la imagen a la derecha del bloque.

Artículos del blog

Si tienes un blog en tu tienda Shopify, puedes usar una sección de artículo de blog para resaltar los artículos de ese blog. Cada entrada del blog en la sección de artículos del blog muestra las primeras 55 palabras del extracto de un artículo. Si el artículo del blog no tiene un extracto, se mostrarán las primeras 30 palabras del artículo.

Configuración de la sección

La configuración de la sección de artículos del blog
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Blog En qué blog deseas mostrar los artículos del blog. El valor predeterminado es el primer blog que aparece alfabéticamente en tu página Blogs.
Entradas del blog El número de artículos del blog que quieres mostrar en la sección. Máximo: 4 artículos.
Número de columnas en la versión para computadora Número de columnas para mostrar en computadoras de escritorio. Mínimo: 1. Máximo: 4.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Mostrar imagen destacada Muestra la imagen destacada del artículo del blog. Relación de aspecto sugerido para la imagen: 3:2.
Mostrar fecha Muestra la fecha en que se creó el artículo del blog.
Mostrar autor Muestra el autor del artículo del blog.
Habilitar el botón "Ver todos" si el blog tiene más artículos de los que se muestran Si el blog tiene más artículos del blog de los establecidos en el campo Artículo del blog, se mostrará un botón "Ver todo" que lleva a los clientes a la página del blog.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección del artículo del blog. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección del artículo del blog.

Seleccionar un un blog

  1. En tu editor de temas, haz clic en el título de la sección de artículos del blog.
  2. En la sección Blog, haz clic en Cambiar.
  3. Selecciona el blog.
  4. Haz clic en Seleccionar y luego haz clic en Guardar

Collage

Puedes crear un collage de imágenes, productos, colecciones y videos. Cada sección de Collage contiene tres bloques. De forma predeterminada, la sección contiene un bloque de imagen, uno de producto y uno de colección. Al eliminar uno de los bloques, puedes agregar un bloque de video.

Para crear un collage de más de tres bloques, añade secciones de collage adicionales debajo de la primera y no incluyas un valor de encabezado en las secciones de collage más bajas. Las secciones de collage aparecerán juntas como una sola sección.

Las relaciones de aspecto recomendadas para todas las imágenes en esta sección son 2:3 o 1:1.

Configuración de la sección

La configuración de la sección collage
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Diseño para computadora

Cómo se muestra el elemento multimedia de collage en la computadora

  • Bloque grande izquierdo (predeterminado) - El primer bloque en la sección se muestra a la izquierda y más grande que cualquier otro bloque.
  • Bloque grande derecho: el último bloque en la sección se muestra a la derecha y más grande que cualquier otro bloque.
Diseño para móviles

Cómo se muestran los bloques en el móvil.

Collage - Muestra las imágenes en un diseño de collage:
  • Si el bloque grande a la izquierda está activado en el diseño de escritorio, el primer bloque de la sección se muestra en la parte superior y es mayor que cualquier otro bloque.
  • Si Bloque grande derecho está activado en Diseño de escritorio, el último bloque de la sección se muestra en la parte inferior y más grande que cualquier otro bloque.
Columna: muestra todos los elementos multimedia del mismo tamaño y en una columna.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección del collage. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio a la parte superior o inferior de la sección.

Bloque de video

La configuración del bloque de video en la sección collage.
Configuración Descripción
Imagen de portada La imagen que se muestra antes de que un cliente reproduzca el video. Puedes subir una imagen de portada personalizada desde tu panel de control de Shopify.
URL El enlace de YouTube o Vimeo que dirige al video. El video debe estar disponible de manera pública y se reproducirá en una ventana emergente.
Texto alternativo del video El texto alternativo del video. Describe el contexto y el propósito del video para los clientes que usan lectores de pantalla.

Bloque de productos

La configuración del bloque de producto en la sección de collage
Configuración Descripción
Producto El producto que deseas mostrar.
Mostrar segunda imagen al pasar el cursor Cuando el cliente pasa el cursor sobre la imagen del producto, se muestra la segunda imagen del producto, si es que la hay.

Bloque de colección

Los ajustes para el bloque de colección en la sección collage
Configuración Descripción
Colección La colección que deseas mostrar.

Bloque de imágenes

La configuración del bloque de imagen en la sección de collage
Configuración Descripción
Imagen La imagen de la sección. Haz clic en Seleccionar imagen para elegir una imagen, o haz clic en el botón Cambiar para modificar o eliminar la imagen.
Editar texto alternativo Agrega una breve descripción de la imagen para mejorar el SEO y describir la imagen para los clientes que usan lectores de pantalla.

Contenido desplegable

La sección de contenido desplegable admite filas que se pueden contraer o expandir para mostrar su contenido y una imagen que se puede colocar a la izquierda o a la derecha del contenido desplegable.

Configuración de la sección

La configuración de la sección de contenido desplegable
Configuración Descripción
Leyenda Un subtítulo opcional para la sección de contenido desplegable. Se muestra encima del encabezado de la sección.
Encabezado El encabezado de la sección de contenido comprimible. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Alineación del encabezado Elige la alineación del encabezado de la sección. Las opciones son: a la izquierda, en el centro (predeterminada) o a la derecha.
Diseño

Selecciona un diseño para tu contenido desplegable:

  • sin contenedor (predeterminado);
  • contenedor de fila: contiene cada fila desplegable en una caja con sombreado;
  • contenedor de sección: contiene toda la sección de contenido desplegable en una caja con sombreado.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Esquema de color del contenedor Un conjunto de colores que puedes aplicar al contenedor. Obtén más información sobre los esquemas de colores. El esquema de colores seleccionado se muestra solo cuando la opción Diseño está establecida en contenedor de fila o de sección.
Abrir primera fila desplegable Si está marcada, la primera fila de tu contenido desplegable se expandirá de forma predeterminada.
Imagen La imagen de la sección. Haz clic en Seleccionar imagen para elegir una imagen, o haz clic en el botón Cambiar para modificar o eliminar la imagen.
Editar texto alternativo Agrega una breve descripción de la imagen para mejorar el SEO y describir la imagen para los clientes que usan lectores de pantalla.
Relación de aspecto de imagen La relación de aspecto de la imagen de sección:
  • Adaptar a la imagen (predeterminado): utiliza la relación de aspecto de las imágenes. Esto impide que se recorten. Esto impide que se recorten.
  • Pequeña
  • Larga
Diseño para computadora Elige si aparece primero la imagen o las filas desplegables. La configuración predeterminada muestra el texto primero. En dispositivos móviles, la imagen siempre aparece primero.
Relleno de sección Agrega espacio a la parte superior o inferior del contenido desplegable. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección del contenido desplegable.

Bloque de filas desplegables

La configuración del bloque de filas desplegable
Configuración Descripción
Encabezado Un encabezado para la fila desplegable.
Icono Elige un ícono de la lista desplegable para que se muestre delante del encabezado del contenido desplegable. El ícono de marca de verificación está seleccionado de forma predeterminada.
Contenido de fila Contenido de la fila desplegable. El contenido puede incluir enlaces URL y se le puede dar formato. Esta función se puede usar junto con la función de Contenido de páginas para la fila.
Contenido de fila de la página Puedes insertar contenido existente de otra página en una fila desplegable. Haz clic en Cambiar para seleccionar o eliminar una página. Esta función se puede usar junto con la función de Contenido de la fila.

Lista de colecciones

Puedes agregar una lista de colecciones que desees resaltar. Puedes agregar hasta 16 bloques de colección a una lista de colección.

Configuración de la sección

La configuración de la sección de la lista de colecciones
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Relación de aspecto de imagen La relación de aspecto de las imágenes destacadas de las colecciones:
  • Adaptar a la imagen: utiliza la relación de aspecto de las imágenes. Esto impide que se recorten.
  • Retrato - Recorta las imágenes para usar una proporción de 2:3.
  • Cuadrado (predeterminado) - Recorta las imágenes para que usen una relación de 1:1.
Número de columnas en la versión para computadora Número de columnas para mostrar en computadoras de escritorio. Mínimo: 1. Máximo: 5.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Habilitar el botón "Ver todos" si la lista incluye más colecciones de las que se muestran Muestra el botón Ver todo, que dirige a los clientes a la lista de colecciones completa.
Número de columnas en la versión para móviles Establece un diseño de columna específico para la versión para dispositivos móviles. Elige entre 1 y 2 columnas.
Activar uso de banda magnética en el móvil Cambia la pantalla del móvil de una columna a una fila, donde los clientes pueden deslizarse hacia los lados para ver más bloques de colección.
Relleno de sección Agrega espacio a la parte superior o inferior de la lista de colección. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de la colección.

Seleccionar colecciones

  1. Desde tu editor de temas, haz clic en el bloque de colección al que deseas agregar una colección.
  2. Haz clic en Seleccionar colección.
  3. Haz clic en una colección, y luego haz clic en Seleccionar.

Formulario de contacto

Tu formulario de contacto envía todos los mensajes a la dirección de correo electrónico del remitente de tu tienda. Puedes cambiar la dirección de correo electrónico del remitente en la página de configuración de Notificaciones del panel de control de Shopify.

El formulario tiene los siguientes campos:

  • Nombre
  • Correo electrónico (obligatorio)
  • Número de teléfono
  • Comentario

Configuración de la sección

La configuración de la sección del formulario de contacto
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relleno de sección Agrega espacio a la parte superior o inferior del formulario de contacto. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección del formulario de contacto.

Liquid personalizado

Puedes agregar tu propio código de Liquid para crear una sección personalizada.

  • Agrega los fragmentos de la aplicación que se proporcionan en las instrucciones de las aplicaciones descargadas para introducirlas en las páginas.
  • Agrega un código de Liquid personalizado directamente en el editor.

Configuración de la sección

La configuración de la sección de Liquid personalizada
Configuración Descripción
Liquid personalizado Agrega fragmentos de la aplicación u otros códigos de Liquid para crear personalizaciones avanzadas.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección de Liquid personalizada. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de Liquid personalizada.

Banner de suscriptor de correo electrónico

Puedes agregar una sección a tu página de contraseña para que los clientes puedan introducir su dirección de correo electrónico y así recibir una notificación cuando tu tienda esté abierta. Cada suscripción de correo electrónico crea una cuenta de cliente.

La sección viene con tres bloques predeterminados:

  • Encabezado
  • Subtítulo
  • Formulario de correo electrónico

Configuración de la sección

La configuración de la sección del banner de suscripción de correo electrónico
Configuración Descripción
Imagen de fondo La imagen de fondo del banner de suscripción de correo electrónico. Haz clic en Cambiar para reemplazar o eliminar la imagen. Cuando se elimina la imagen, se muestra la imagen que viene con el tema. Para ocultar esta imagen, deselecciona la casilla de verificación Mostrar imagen de fondo.
Editar texto alternativo Haz clic en esta configuración para definir el texto alternativo de la imagen para la optimización de motores de búsqueda (SEO) y para describir la imagen para los clientes que usan lectores de pantalla.
Opacidad de la sobreposición de imagen Superpone la imagen del banner de suscripción de correo electrónico con una sobreposición. Usa el control deslizante para establecer la opacidad de la sobreposición. Los valores predeterminados son 0%.
Mostrar imagen de fondo Marca esta casilla para mostrar la imagen de fondo en tu banner de suscripción de correo electrónico.
Altura del banner

Usa el menú desplegable para establecer la altura de la imagen de tu banner de suscripción de correo electrónico. Elige entre Adaptar a la imagen, pequeña, mediana (predeterminada) o grande.

Posición del contenido en computadoras Establece la posición del banner de suscripción de correo electrónico para computadoras de escritorio. Elige entre arriba, en el medio o abajo y entre derecha, izquierda o centro. La opción predeterminada es en el medio y centrado.


En la versión de escritorio, el cuadro de texto cubre parcialmente la imagen. En la versión móvil, el cuadro de texto se muestra debajo de la imagen.

Mostrar contenedor en computadoras Coloca el texto de la imagen del banner de suscripción de correo electrónico en un cuadro de texto sobre la imagen para los clientes que compran desde una computadora de escritorio.
Alineación del contenido en computadoras Establece la alineación del texto del banner de imagen para computadoras de escritorio. Elige entre derecha, izquierda o centro (predeterminada).
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.


En la versión de escritorio, el esquema de colores seleccionado se muestra solo cuando se elige la opción Mostrar contenedor en la versión de escritorio. En la versión móvil, el esquema de colores seleccionado se muestra solo cuando se elige Mostrar contenido debajo de la imagen en la versión móvil.

Alineación del contenido en dispositivos móviles Establece la alineación del texto del banner de imagen para dispositivos móviles. Elige entre derecha, izquierda o centro (predeterminada).
Mostrar contenido debajo en la versión móvil El contenido aparecerá debajo de la imagen del banner de suscripción de correo electrónico en dispositivos móviles.

Bloque de encabezado

La configuración del bloque de encabezado en la sección de la suscripción de correo electrónico
Configuración Descripción
Encabezado El título de la sección.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.

Bloque de subtítulo

La configuración del bloque de subtítulo en la sección de la suscripción de correo electrónico
Configuración Descripción
Descripción La descripción de la sección.
Estilo de texto Cambia el estilo del texto en la sección de suscripción de correo electrónico. Elige entre Cuerpo (predeterminado) y Subtítulo.

Suscriptor de correo electrónico

Puedes agregar una sección donde los clientes puedan introducir su dirección de correo electrónico y suscribirse a tu boletín o marketing. Cuando un cliente se suscriba, se crea una cuenta de cliente en tu panel de control de Shopify.

La sección viene con tres bloques predeterminados:

  • Encabezado
  • Subtítulo
  • Formulario de correo electrónico

Configuración de la sección

La configuración de la sección de suscripción de correo electrónico
Configuración Descripción
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Definir ancho completo en sección Hace que la sección sea el ancho completo de la ventana del navegador.

Bloque de encabezado

La configuración del bloque de encabezado en la sección de la suscripción de correo electrónico
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.

Bloque de subtítulo

La configuración del bloque de subtítulo en la sección de la lista de colecciones
Configuración Descripción
Descripción La descripción de la sección.

Formulario de correo electrónico

El bloque de formularios de correo electrónico muestra un campo donde los clientes pueden ingresar una dirección de correo electrónico para registrarse en tus materiales de marketing. Este bloque no tiene configuraciones personalizables.

Puedes agregar una sección que muestre los productos en una colección.

Configuración de la sección

La configuración de la sección de colección destacado
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace. Haz clic en el botón de fuente dinámica para insertar una fuente dinámica como título de la sección.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Descripción Introduce un texto descriptivo para la colección destacada. Puedes dar formato al texto para que se muestre en negrita o cursiva, o incluir un enlace. Haz clic en el botón de fuente dinámica para insertar una fuente dinámica para la descripción de la colección destacada.
Mostrar la descripción de la colección desde el panel de control Al marcar esta casilla, se usará la descripción de la colección que agregaste a la colección en el panel de control de Shopify, en lugar de cualquier texto introducido en el campo Descripción anterior.
Estilo de descripción Usa el menú desplegable para elegir un estilo para la descripción de la colección destacada. Las opciones son cuerpo (predeterminada), subtítulo o mayúsculas.
Colección De qué colección deseas mostrar los productos. Haz clic en Cambiar para remover o cambiar la colección.
Máximo de productos para mostrar La cantidad de productos de la colección que se mostrarán. Mínimo: 2. Máximo: 25.
Número de columnas en la versión para computadora Número de columnas para mostrar en computadoras de escritorio. Mínimo: 1. Máximo: 5.
Definir ancho completo de productos Casilla de verificación para mostrar productos en el ancho completo de la ventana, independientemente de la configuración de ancho de página.
Habilitar el botón "Ver todos" si la colección tiene más productos de los que se muestran Si la colección tiene más productos de los establecidos en el campo Máximo de productos para mostrar, se mostrará un botón "Ver todo" que lleva a los clientes a la página de colecciones.
Estilo "Ver todo" Elige entre un enlace, un botón sólido y un botón de contorno.
Activar carrusel en el dispositivo de escritorio Casilla de verificación para mostrar productos en un carrusel en pantallas con más de 989 píxeles de ancho.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relación de aspecto de imagen La proporción de aspecto de las imágenes del producto:
  • Adaptar a la imagen (predeterminado): utiliza la relación de aspecto de las imágenes. Esto impide que las imágenes se recorten.
  • Retrato - Recorta las imágenes para usar una proporción de 2:3.
  • Cuadrado - Recorta las imágenes para usar una proporción de 1:1.
Forma de la imagen Elige una de las siguientes formas de la imagen para las imágenes del producto:
  • Predeterminada: cambia la imagen del producto a una forma de rectángulo.
  • Arco: le da una forma curva a la parte superior de la imagen del producto.
  • Gota: cambia la imagen del producto a una de las seis formas aleatorias de gota que muestra una animación única al pasar el cursor.
  • Comillas angulares hacia la izquierda: cambia la imagen del producto a una forma de comilla angular que tiene una curva cerrada hacia la izquierda.
  • Comillas angulares hacia la derecha: cambia la imagen del producto a una forma de comilla angular que tiene una curva cerrada hacia la derecha.
  • Diamante: cambia la imagen del producto a una forma de diamante con cuatro lados.
  • Paralelogramo: cambia la imagen del producto a una forma que tiene dos pares de líneas paralelas.
  • Redonda: cambia la imagen del producto a una forma de círculo u óvalo que muestra una animación única al pasar el cursor.
Mostrar segunda imagen al pasar el cursor Cuando el cliente pasa el cursor sobre la imagen del producto, se muestra la segunda imagen del producto, si es que la hay.
Mostrar proveedor Muestra los proveedores de los productos.
Mostrar calificación de productos Muestra la calificación promedio del producto en estrellas, con la cantidad de reseñas entre paréntesis; por ejemplo: ★★★★★ (8). También necesitas una aplicación de reseñas de productos, como Product Reviews de Shopify y definiciones de metacampos para reviews.rating_count y reviews.rating.
Activar botón de agregado rápido El botón de agregado rápido permite a los clientes agregar un artículo al carrito desde la tarjeta de producto. Si el producto tiene variantes, el botón incluirá el texto "Seleccionar opciones" y mostrará los detalles del producto en una ventana emergente, donde el cliente podrá seleccionar las variantes que quiera, agregar artículos al carrito, realizar el pago inmediatamente con el botón "Comprar ahora" o hacer clic para ver todos los detalles del artículo. Ten en cuenta que esta configuración depende de que el botón "Comprar ahora" esté activado en la página de producto. Si el botón "Comprar ahora" no está activado en la plantilla de producto, los clientes tendrán la opción de agregar el producto al carrito, pero no tendrán disponible el flujo de pago rápido con el botón "Comprar ahora".
Número de columnas en la versión para móviles Establece un diseño de columna específico para la versión para dispositivos móviles. Elige entre 1 y 2 columnas.
Activar uso de banda magnética en el móvil Cambia la pantalla móvil de una columna a una fila, donde los clientes pueden deslizar el dedo hacia los lados para ver más productos.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección de la colección destacada. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de la colección destacada.

Puedes agregar una sección que presenta un producto específico.

Configuración de la sección

La configuración de la sección de productos destacados
Configuración Descripción
Producto El producto que deseas destacado en la sección.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Mostrar fondo secundario Muestra el producto destacado en tu color de fondo secundario.
Ancho del elemento multimedia en computadora Selecciona entre un tamaño pequeño, mediano o grande del elemento multimedia. La imagen se optimiza automáticamente para dispositivos móviles.
Ajustar el elemento multimedia a la altura de la pantalla Al seleccionar esta opción, se establece una altura máxima de elemento multimedia según la altura de la ventana del navegador.
Ajuste de elemento multimedia Selecciona Original para mantener la relación de aspecto original multimedia o Rellenar para adaptar el elemento multimedia a su contenedor.
Posición del contenido multimedia en computadoras de escritorio Selecciona si quieres que el contenido multimedia del producto destacado se muestre a la izquierda o a la derecha. Solo se aplica a los usuarios que acceden a la página en una computadora de escritorio.
Ampliar imagen

Elige el zoom de la imagen en el escritorio:

  • Abrir lightbox: abre la imagen en grande. Predeterminado para móviles.
  • No zoom: desactiva el zoom de las imágenes. Recomendado para imágenes que no son de alta resolución.
  • Hacer clic y pasar sobre la imagen: haz clic para ampliar la imagen y pasa sobre esta con el ratón para ver diferentes secciones ampliadas. La ampliación al pasar sobre la imagen con el ratón se desactiva cuando se vuelve a hacer clic sobre ella o cuando el ratón abandona el espacio que la contiene. Cuando esta configuración está activada y el usuario opera desde un dispositivo móvil, la imagen se abre de forma predeterminada en una ventana modal (lightbox).
Ocultar elementos multimedia de otras variantes Selecciona esta opción para ocultar los elementos multimedia de otras variantes después de elegir una variante.
Activar la reproducción de video en bucle Permite que el video vuelva a reproducirse. Los clientes deben hacer clic para iniciar la repetición.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección del producto destacado. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio en la parte superior o inferior de la sección.

Puedes agregar los siguientes bloques en tu sección Productos destacados.

Los bloques disponibles en la sección de productos destacados
Bloque Configuración
Texto Introduce el texto de tu producto destacado:
  • Texto:acepta texto o fuente dinámica.
  • Estilo de texto:elige entre cuerpo, subtítuloo mayúscula.
Nombre Tamaño del título: puede ser Pequeño, Mediano o Grande.
Precio Este bloque no tiene configuraciones personalizables.
Selector de variante Elige entre botones o un menú desplegable.
Selector de cantidad Este bloque no tiene configuraciones personalizables.
Botones de compras Marca la casilla Mostrar botones de pago dinámico para mostrar cualquier opción de pago dinámico que hayas activado en la configuración de pagos.
Compartir Texto en el que se puede hacer clic que permite a los clientes compartir el producto en sus redes sociales.
Calificación de productos Muestra la calificación promedio del producto en estrellas, con la cantidad de reseñas entre paréntesis; por ejemplo: ★★★★★ (8). También necesitas una aplicación de reseñas de productos, como Product Reviews de Shopify y definiciones de metacampos para reviews.rating_count y reviews.rating.
Liquid personalizado Agregar código Liquid o HTML personalizado.
Aplicaciones Agregar una aplicación compatible con Online Store 2.0.
Ícono con texto Este bloque muestra hasta tres íconos que puedes seleccionar de una lista de íconos preinstalados, o bien de una imagen que subas. Si eliges subir una imagen, esta invalidará cualquier ícono seleccionado en el menú desplegable. Para el diseño de tus íconos, puedes seleccionar las opciones vertical u horizontal. Para eliminar un ícono, borra el campo del título. Para mostrar más de tres íconos, agrega otro bloque de **Ícono con texto**.
Código SKU Este bloque muestra el SKU (código de artículo) de un producto cuando tu variante tiene un SKU asociado a ella. Obtén más información sobre cómo [agregar números de SKU a las variantes de tus productos desde el panel de control](/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku#add-sku-numbers-to-your-product-variants-from-the-admin-sectioned%20themes-specific).

Banner de imagen

La sección del banner de imagen admite una o dos imágenes y un cuadro de texto con botones. Si se usan dos imágenes, se muestran una al lado de la otra en el escritorio. En el móvil, puedes elegir si las imágenes se muestran una al lado de la otra o en una columna.

En la versión de escritorio, el cuadro de texto cubre parcialmente la imagen. En la versión móvil, el cuadro de texto se muestra debajo de la imagen. Puedes elegir la alineación del texto entre derecha, izquierda o centro tanto para la versión de escritorio como para la versión móvil.

Configuración de la sección

La configuración de la sección de banner de imagen
Configuración Descripción
Primera imagen La imagen principal del banner. Si se agregan dos imágenes a la sección, esta imagen se muestra a la izquierda o en la parte superior, dependiendo de si el cliente está utilizando una computadora o un dispositivo móvil.
Editar texto alternativo Haz clic en esta configuración para definir el texto alternativo de la imagen para la optimización de motores de búsqueda (SEO) y para describir la imagen para los clientes que usan lectores de pantalla.
Segunda imagen La imagen secundaria para el banner. Si se agregan dos imágenes a la sección, esta imagen se muestra en la parte derecha o en la parte inferior, en función de si el cliente está usando la versión de escritorio o la versión móvil.
Opacidad de la sobreposición de imagen Agrega una sobreposición a las imágenes del banner. Usa el control deslizante para establecer la opacidad de la sobreposición. El valor predeterminado es 0%.
Altura del banner

Establece la altura de las imágenes de tu banner en el menú desplegable.

  • Adaptar a la primera imagen: establece la altura de la sección con la altura de la primera imagen.
  • Pequeño: Computadora: 420 px, móvil: 280 px
  • Mediano (predeterminado): Computadora: 560 px, móvil: 340 px
  • Grande: Computadora: 720 px, móvil: 390 px
Posición del contenido en computadoras Establece la posición del banner de imagen de la versión de escritorio. Elige entre arriba, en el medio o abajo y entre derecha, izquierda o centro.
Mostrar contenedor en computadoras Coloca el texto de la imagen del banner en un cuadro de texto sobre la imagen del banner para los clientes que compran desde computadoras de escritorio.
Alineación del contenido en computadoras Establece la alineación del texto del banner de imagen para computadoras de escritorio. Elige entre izquierda, derecha o centrado.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores. El esquema de colores seleccionado se muestra solo cuando se elige la opción Mostrar cuadro de texto en la versión de escritorio.
Animaciones

Selecciona una animación para tu imagen:

  • Ninguno (predeterminado)
  • Movimiento ambiental: mueve lentamente la posición de la imagen dentro del espacio que la contiene.
  • Posición fija del fondo: cuando un cliente se desplaza por la página, los elementos en primer plano, como el texto y los botones, se mueven a la misma velocidad, mientras que el fondo permanece fijo.
  • Ampliar al desplazarse: cuando un cliente se desplaza por la página, los elementos en primer plano, como el texto y los botones, se mueven a la misma velocidad, mientras que el fondo permanece fijo y la imagen se amplía.
Alineación del contenido en dispositivos móviles Establece la alineación del texto del banner de imagen para dispositivos móviles. Elige entre izquierda, derecha o centrado.
Apilar imágenes en móviles Si se agregan dos imágenes a la sección, muestra las imágenes en una columna en lugar de una al lado de la otra.
Mostrar contenedor en el móvil Coloca el texto de la imagen del banner en un cuadro de texto sobre la imagen del banner para los clientes que compran desde dispositivos móviles.

Bloque de encabezado

La configuración del bloque de encabezado en la sección de banner de imagen
Configuración Descripción
Encabezado Texto grande para el título del cuadro de texto. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.

Bloque de texto

La configuración del bloque de texto en la sección del banner de imagen
Configuración Descripción
Descripción Muestra el texto en estilo de párrafo.
Estilo de texto Cambia el estilo del texto del banner de la imagen. Elige entre Cuerpo, Subtítulo y Mayúscula.

Bloqueo de botón

La configuración del bloque de botones en la sección del banner de imagen
Configuración Descripción
Primera etiqueta de botón El texto que se muestra en el primer botón.
Primer enlace de botón La URL a la que deseas vincular el primer botón.
Usar estilo de botón con contorno Ajusta el estilo del botón para que sea un contorno de un botón en lugar de tener un fondo sólido.
Primera etiqueta de botón El texto que se muestra en el segundo botón.
Segundo enlace de botón La URL a la que deseas vincular el botón.
Usar estilo de botón con contorno Ajusta el estilo del botón para que sea un contorno de un botón en lugar de tener un fondo sólido.

Imagen con texto

Puedes agregar una sección que contenga una imagen y un bloque de texto con un botón opcional para vincular a los clientes a una nueva página. Empareja el texto con una imagen para enfocarte en el producto, la colección o el artículo de blog que elijas. Agrega información sobre disponibilidad, estilo, o incluso ofrece una reseña.

Configuración de la sección

La configuración de la sección imagen con texto
Configuración Descripción
Imagen Haz clic en Seleccionar imagen para elegir una imagen para la sección. Haz clic en el botón Cambiar para modificar o eliminar la imagen.
Editar texto alternativo Haz clic en esta configuración para definir el texto alternativo de la imagen para la optimización de motores de búsqueda (SEO) y para describir la imagen para los clientes que usan lectores de pantalla.
Altura de imagen Elige la altura de la imagen:
  • Adaptar a la imagen (predeterminada)
  • Pequeña
  • Mediana
  • Larga
Ancho de la imagen en computadoras El ancho de la imagen:
  • Pequeña
  • Mediana (predeterminado)
  • Larga
Ubicación de la imagen en computadoras Elige si se muestra primero la imagen o el texto. La imagen se muestra primero de forma predeterminada para diseños móviles:
  • Imagen primero (predeterminada para la versión móvil)
  • Imagen segunda
Posición del contenido en computadoras La posición vertical del contenido en el contenedor:
  • Arriba (predeterminado)
  • Centrada
  • Abajo
Alineación del contenido en computadoras La alineación del texto en el contenedor:
  • Izquierda (predeterminado)
  • Centrado
  • Derecha
Diseño de contenido Permite que los cuadros de imagen y texto se superpongan entre sí. Si se selecciona Sin solapamiento, el contenido se ajustará para incluir el texto y la imagen.
  • Solapamiento
  • Sin solapamiento (predeterminado)
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Animaciones

Selecciona una animación para tu imagen:

  • Ninguno (predeterminado)
  • Movimiento ambiental: mueve lentamente la posición de la imagen dentro del espacio que la contiene.
  • Ampliar al desplazarse: cuando un cliente se desplaza por la página, los elementos en primer plano, como el texto y los botones, se mueven a la misma velocidad, mientras que el fondo permanece fijo y la imagen se amplía.
Diseño para móviles Elige la alineación del contenido para dispositivos móviles:
  • Izquierda (predeterminada)
  • Derecha
  • Centrado
Relleno de sección Agrega espacio a la parte superior o inferior de la sección de la imagen con texto. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de la imagen con texto.

Bloque de encabezado

La configuración del bloque del encabezado en la sección de imagen con texto
Configuración Descripción
Encabezado Texto del título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.

Bloque de texto

La configuración del bloque de texto en la sección de imagen con texto
Configuración Descripción
Contenido Muestra texto en estilo de párrafo en la sección de texto.
Estilo de texto Estilo para el texto del contenido:
  • Cuerpo (predeterminado)
  • Subtítulo

Bloqueo de botón

La configuración del bloque de botones en la sección de imagen con texto
Configuración Descripción
Etiqueta de botón El texto que se muestra en el botón.
Enlace de botón La URL a la que deseas vincular el botón.

Bloque de subtítulos

La configuración del bloque de la leyenda en la sección de imagen con texto
Configuración Descripción
Texto Agrega un eslogan o subtítulo a tu imagen. El texto aparecerá en la parte inferior de la sección de imagen con texto.
Estilo de texto Estilo del texto de contenido:
  • Mayúsculas (predeterminada)
  • Subtítulo
Tamaño del texto Tamaño del texto del contenido:
  • Pequeña
  • Mediana (predeterminado)
  • Larga

Multicolumna

Puedes usar la sección multicolumna para mostrar contenido con diseño de columna y agregar un botón debajo de las columnas para llevar al cliente a una nueva página. Empareja el texto con una imagen para enfocarte en el producto, colección o artículo del blog que elijas. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.

Configuración de la sección

La configuración de la sección de varias columnas
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Ancho de imagen

El ancho de las imágenes agregadas a las columnas.

  • Ancho completo de la columna (predeterminado): el ancho de la imagen es el tamaño completo de la columna.
  • Ancho medio de la columna - El ancho de la imagen es la mitad del tamaño de la columna.
  • Un tercer ancho de columna - El ancho de la imagen es un tercero del tamaño de la columna.
Relación de aspecto de imagen

La relación de aspecto de la imagen:

  • Adaptar a la imagen (predeterminado): utiliza la relación de aspecto de las imágenes. Esto impide que las imágenes se recorten.
  • Retrato - Recorta las imágenes para usar una proporción de 2:3.
  • Cuadrado - Recorta las imágenes para usar una proporción de 1:1.
  • Círculo - Recorta la imagen para mostrarla en un círculo
Número de columnas en la versión para computadora Usa la escala de rango para seleccionar el número de columnas que se muestran en las computadoras de escritorio. Mínimo: 1. Máximo: 6.
Alineación de columna

La alineación de las imágenes y el texto dentro de las columnas:

  • Izquierda (predeterminada) - Alinea las imágenes y el texto a la izquierda.
  • Centrar - Alinea las imágenes y el texto en el centro.
Fondo secundario Elige Ninguno para ocultar el fondo secundario o Mostrar como fondo de columna para cambiar los colores del contenedor de columna.
Etiqueta de botón El texto que se muestra en el botón.
Enlace de botón La URL a la que deseas vincular el botón.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Número de columnas en la versión para móviles Establece un diseño de columna específico para la versión para dispositivos móviles. Elige entre 1 y 2 columnas.
Activar uso de banda magnética en el móvil Cambia la pantalla del móvil de una columna a una fila, donde los clientes pueden deslizarse hacia los lados para ver más bloques de colección.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección de varias columnas. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección multicolumna.

Bloque de columna

Puedes tener un máximo de 12 columnas en una sección. Si tienes uno, dos o tres bloques de columna, se mostrarán en una fila en la versión de escritorio. Si tienes cuatro o más bloques de columna, se muestran en un diseño de dos columnas. En la versión móvil, los bloques de columna se muestran en una sola columna, a menos que esté activada la opción Habilitar el deslizamiento para la versión móvil.

La configuración del bloque de columnas en la sección de varias columnas
Configuración Descripción
Imagen La imagen que quieres mostrar.
Encabezado El título de la columna. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Descripción El texto del párrafo en la columna.
Etiqueta de enlace [optional] El texto del enlace agregado debajo del bloque de columna. Déjalo en blanco si no tienes un enlace agregado.
Enlace URL del enlace. Si no tienes un enlace, se queda en blanco.

Varias filas

Puedes agregar una sección que contenga varias filas cada una con una imagen, texto y un botón opcional. Empareja el texto con una imagen para enfocarte en tu producto, colección o artículo de blog seleccionados. Agrega detalles sobre disponibilidad, estilo, o incluso ofrece una reseña.

También puedes mostrar contenido de metaobjetos a través de fuentes dinámicas. Para mostrar las entradas de metaobjetos, debes crear un metaobjeto, crear entradas y asegurarte de que el metaobjeto tenga acceso a la tienda online antes de poder usarlo en secciones de varias filas.

Configuración de la sección

La configuración de la sección Varias filas
Configuración Descripción
Altura de imagen Elige la altura de la imagen:
  • Adaptar a la imagen
  • Pequeña
  • Mediana (predeterminado)
  • Larga
Ancho de la imagen en computadoras El ancho de la imagen:
  • Pequeña
  • Mediana (predeterminado)
  • Larga
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Estilo de texto Cambia el estilo del texto. Elige entre Cuerpo (predeterminado) y Subtítulo.
Estilo de botón Elige entre un enlace, un botón sólido y un botón de contorno.
Posición del contenido en computadoras La posición vertical del contenido en el contenedor:
  • Arriba
  • Medio (predeterminado)
  • Abajo
Alineación del contenido en computadoras La alineación del texto en el contenedor:
  • Izquierda (predeterminado)
  • Centrado
  • Derecha
Ubicación de la imagen en computadoras Elige la posición de las imágenes. La ubicación se optimiza automáticamente para dispositivos móviles:
  • Alternar desde la izquierda (predeterminado)
  • Alternar desde la derecha
  • Alineada a la izquierda
  • Alineada a la derecha
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Esquema de color del contenedor Un conjunto de colores que puedes aplicar al contenedor. Obtén más información sobre los esquemas de colores.
Diseño para móviles Elige la alineación del contenido para dispositivos móviles:
  • Izquierda (predeterminada)
  • Derecha
  • Centrado
Relleno de sección Agregar espaciado a la parte superior o inferior de la sección de varias filas. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de la imagen con texto.

Bloque de filas

La configuración de los bloques de filas en la sección Varias filas
Configuración Descripción
Imagen Haz clic en Seleccionar imagen para elegir una imagen para la fila. Haz clic en el botón Cambiar para cambiar o eliminar la imagen. Haz clic en el botón de origen para vincular a fuentes dinámicas.
Editar texto alternativo Haz clic en esta configuración para definir el texto alternativo de la imagen para la optimización de motores de búsqueda (SEO) y para describir la imagen para los clientes que usan lectores de pantalla.
Leyenda Agrega un eslogan o leyenda a la imagen.
Encabezado Texto del título de la fila. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Texto Muestra el texto en estilo de párrafo en la fila.
Etiqueta de botón El texto que se muestra en el botón.
Enlace de botón La URL a la que deseas vincular el botón.

Página

Puedes elegir mostrar el contenido de una página personalizada en una sección. Esto lleva el contenido completo de la página a la sección, pero no trae ningún código Liquid de ninguna plantilla.

Configuración de la sección

La configuración de la sección de la página
Configuración Descripción
Página La página de tu tienda online que deseas mostrar.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección de la página. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección de la página.

Texto enriquecido

Puedes agregar una sección de texto enriquecido con un encabezado, una leyenda, un texto y un botón para enlazar a los clientes con una nueva página.

Configuración de la sección

La configuración de la sección de texto enriquecido
Configuración Descripción
Posición del contenido en computadoras Elige la posición del contenedor de texto enriquecido. Usa el menú desplegable para seleccionar a la izquierda, centrado (predeterminado) o a la derecha. El contenido se optimiza automáticamente para dispositivos móviles.
Alineación de contenido Esta configuración afecta la alineación del texto para todos los bloques dentro de la sección de texto enriquecido. Usa el menú desplegable para seleccionar a la izquierda, centrado (predeterminado) o a la derecha.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Definir ancho completo en sección Las secciones son de ancho completo de forma predeterminada.
Relleno de sección Agrega espacio a la parte superior o inferior de la sección del texto enriquecido. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección del texto enriquecido.
Conectar a fuentes dinámicas Usa fuentes dinámicas en tu sección de texto enriquecido para hacer referencia a información como metacampos o metaobjetos. Incluso puedes usar referencias de listas para generar listas de texto en tu tema. Por ejemplo, se puede usar una lista de metacampos (incluso si está disponible en un metaobjeto de referencia) para generar una lista de texto dentro de la configuración de texto enriquecido de tu tema.

Bloque de encabezado

Puedes tener hasta 3 bloques de encabezados en tu sección de texto enriquecido.

La configuración del bloque del encabezado en la sección de texto enriquecido
Configuración Descripción
Encabezado Es el título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace. Haz clic en el botón de origen para vincular a fuentes dinámicas.
Tamaño del título Cambia el tamaño del texto del título. Elige entre pequeño, mediano, grande o extra grande.

Bloque de texto

El bloque Texto es una buena manera de compartir información sobre tu marca con tus clientes. Puedes describir los beneficios de tus productos, hacer anuncios, dar la bienvenida a los clientes a tu tienda o hablar sobre los valores de tu marca.

Puedes tener hasta 3 bloques de texto en la sección de texto enriquecido.

La configuración del bloque de texto en la sección de texto enriquecido
Configuración Descripción
Descripción Texto en estilo de párrafo para el contenido principal de la sección. Haz clic en el botón de origen para vincular a fuentes dinámicas.

Bloque de subtítulos

Puedes tener hasta 3 bloques de subtítulos en tu sección de texto enriquecido.

La configuración del bloque de texto en la sección de texto enriquecido
Configuración Descripción
Texto Agrega un eslogan breve a tu sección de texto enriquecido.
Estilo de texto Usa el menú desplegable para seleccionar un estilo de texto entre Subtítulo (predeterminado) y Mayúsculas.
Tamaño del texto Usa el menú desplegable para establecer el tamaño del texto de tu leyenda. Elige entre pequeño, mediano (predeterminado) y grande.

Bloqueo de botón

Puedes tener hasta 2 bloques de botones en tu sección de texto enriquecido.

La configuración del bloque de botones en la sección de texto enriquecido
Configuración Descripción
Etiqueta de botón El texto que se muestra en el botón.
Enlace de botón La URL a la que deseas vincular el botón.
Usar estilo de botón con contorno Ajusta el estilo del botón para que sea un contorno de un botón en lugar de tener un fondo sólido.

Presentación de diapositivas

Puedes agregar una sección de presentación de diapositivas para mostrar un carrusel de hasta cinco imágenes en una página de tu tienda.

Configuración de la sección

La configuración de la sección de presentación de diapositivas
Configuración Descripción
Diseño Elige entre Ancho completo (predeterminado) o Cuadrícula. La opción Ancho completo muestra la presentación de diapositivas con el ancho completo de la sección, mientras que la opción Cuadrícula la muestra con relleno a ambos lados.
Altura de diapositiva

La altura de la presentación de diapositivas:

  • Adaptar a la primera imagen: todas las imágenes tendrán la misma altura que la primera imagen en el carrusel.
  • Pequeña
  • Mediana (predeterminado)
  • Larga
Estilo de paginación

El estilo de navegación de la presentación de diapositivas que aparece debajo de las imágenes.

  • Puntos
  • Mostrador (predeterminado)
  • Números
Rotar las diapositivas automáticamente

Marca esta casilla para cambiar las imágenes de la presentación de diapositivas automáticamente. Si no se marca, la presentación de diapositivas mostrará una imagen estática hasta que el cliente avance manualmente.

Cambiar temporizador de diapositivas Usa la barra para establecer el tiempo de cambio automático de la presentación de diapositivas. Mínimo: 3 segundos, máximo: 9 segundos.
Animaciones

Selecciona una animación para tu imagen:

  • Ninguno (predeterminado)
  • Movimiento ambiental: mueve lentamente la posición de la imagen dentro del espacio que la contiene.
Diseño para móviles Marca la casilla para mostrar el contenido debajo de las imágenes en la versión móvil.
Accesibilidad Agrega una descripción de tu presentación de diapositivas para clientes con discapacidad visual.

Configuración de diapositivas de imagen

La configuración de las imágenes de la sección de presentación de diapositivas
Configuración Descripción
Imagen Elige una imagen estática o dinámica para la presentación de diapositivas. Haz clic en Seleccionar imagen para ver la biblioteca multimedia o haz clic en el botón de origen para conectar una fuente dinámica. Después de seleccionar una imagen, puedes cambiarla o eliminarla si haces clic en el botón Cambiar.
Editar texto alternativo

Describe la imagen de la presentación de diapositivas y ofrece contexto a los clientes que usan lectores de pantalla.

Encabezado

Texto opcional del título de la imagen. El texto se agrega a cada imagen de forma individual. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.

Tamaño del título

Selecciona entre un encabezado pequeño, mediano (predeterminado) o grande.

Subtítulo Texto opcional del subtítulo de la imagen. El texto se agrega a cada imagen de forma individual. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Etiqueta de botón Introduce el texto para un botón o déjalo en blanco para ocultar el botón por completo.
Enlace de botón La URL a la que deseas vincular el botón. Haz clic en el botón de origen para agregar una fuente dinámica como URL.
Usar estilo de botón con contorno Haz clic en la casilla de verificación para activar un botón sólido o con contorno.
Posición del contenido en computadoras La posición del cuadro de contenido sobre la imagen. Elige entre arriba, en el medio o abajo y entre izquierda, centro o derecha. La configuración predeterminada es en el medio y centrado.
Mostrar contenedor en computadoras Marca la casilla para mostrar el cuadro de contenido.
Alineación del contenido en computadoras Alinea el texto en el contenedor. Elige entre las opciones izquierda, centro (predeterminado) o derecha.
Opacidad de la sobreposición de imagen Usa el control deslizante para ajustar la opacidad de la sobreposición de la imagen.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores. Esta configuración requiere que se muestre el contenedor para afectar la imagen de la presentación de diapositivas.
Diseño para móviles Elige cómo se mostrará el contenido en un dispositivo móvil. Elige entre izquierda, centro (predeterminado) o derecha.

Video

Puedes añadir una sección de video para incrustar un video desde YouTube o Vimeo en una página de tu tienda.

Configuración de la sección

La configuración de la sección de vídeo
Configuración Descripción
Encabezado El título de la sección. Usa los botones para poner el texto en negrita o cursiva, o para agregar un enlace.
Tamaño del título Cambia el tamaño del texto del título. Elige el tamaño del título. Puede ser: pequeño, mediano o grande.
Reproducir video en bucle Cuando esté marcada esta sección, el video comenzará de nuevo luego de finalizar.
video Agrega o selecciona tu propio video a la sección. Puedes editar el video para usar una imagen de portada personalizada, así como agregar texto alternativo. Si se agrega un video alojado en Shopify, se usará de preferencia antes que un video con URL de la siguiente configuración.
URL El enlace de YouTube o Vimeo al video. El video debe estar disponible públicamente y solo se mostrará si no se agrega ningún video alojado en Shopify en la configuración anterior.
Imagen de portada La imagen que se muestra antes de que un cliente reproduzca el video.
Texto alternativo del video El texto alternativo del video. Describe el contexto y el propósito del video para los clientes que usan lectores de pantalla.
Definir ancho completo en sección Elimina el relleno predeterminado y hace que la sección sea el ancho completo de la página.
Esquema de colores Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relleno de sección Agrega espacio a la parte superior o inferior del video. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección del video.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis