Tipos de página
Cada página tiene sus propias secciones y configuraciones predeterminadas.
Páginas de productos
De forma predeterminada, las páginas de productos tienen una sección de Información del producto y una sección de Recomendaciones de productos.
La sección Información del producto contiene los siguientes bloques predeterminados:
- Texto (muestra de forma predeterminada el
vendor
de destino) - Nombre
- Texto (muestra de forma predeterminada el
product subtitle
de destino) - Precio
- Selector de variante
- Selector de cantidad
- Botones de compras
- Descripción
- Compartir
También puedes agregar los siguientes bloques:
- Texto
- Liquid personalizado
- Calificación de productos
- Pestaña retraíble
- Ventana emergente
La sección Información del producto puede contener hasta 16 bloques.
Configuración de la sección de información de productos
Configuración | Descripción |
---|---|
Activar contenido fijo en computadoras | Cuando te desplazas por una página, la columna de información del producto no comienza a desplazarse hasta que todas las imágenes se hayan desplazado. | Diseño para computadora |
Cómo se muestran los elementos multimedia de los productos en la computadora |
Tamaño de elementos multimedia en computadoras | Selecciona entre los tamaños pequeño, mediano o grande para los elementos multimedia. Para los dispositivos móviles, los elementos se optimizan de manera automática. |
Diseño para móviles | Elige ocultar o mostrar imágenes en miniatura en los dispositivos móviles. |
Ocultar otros medios de variantes cuando se selecciona una variante | Cuando se selecciona una variante, las imágenes de otras variantes dejan de mostrarse. Las imágenes vuelven a aparecer cuando se deselecciona la variante. |
Activar la reproducción de video en bucle | Configura el video para que se reproduzca en bucle, de modo que se vuelva a reproducir automáticamente cuando finalice. |
Relleno de sección | Agrega espaciado a la parte superior o inferior de la sección Información del producto. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección. |
Bloques de información de productos
Los siguientes bloques se pueden agregar a la sección Información de producto.
Bloque de texto
El bloque de texto puede usarse para mostrar texto estático o datos variables usando fuentes dinámicas. Por ejemplo, puedes agregar texto que muestre un mensaje de marketing, como "Envío gratis para pedidos de más de USD 100", que podría mostrarse en cada producto. También puedes agregar una fuente dinámica, como el campo de Proveedor del producto, que cambiaría en función del producto que se esté visualizando.
Configuración | Descripción |
---|---|
Texto | Agrega información a la página del producto. Admite texto o fuentes dinámicas. |
Estilo de texto |
Cambia el estilo del texto:
|
Bloque de título
Este bloque muestra el título del producto. No tiene configuración ajustable.
Bloque de precios
Este bloque muestra la información sobre el precio del producto, como el precio y el precio de comparación. No tiene configuración ajustable.
Bloque de selector de variantes
Este bloque muestra cualquier opción de variantes para el producto.
Configuración | Descripción |
---|---|
Tipo |
Cambia la forma en que se muestran las variantes a los clientes:
|
Bloque de botones de compra
Este bloque muestra el botón "Agregar al carrito" y cualquier información de retiro en tienda. También puede mostrar cualquier botón de pago dinámico.
Configuración | Descripción |
---|---|
Mostrar botones de pago dinámico | Muestra las opciones de pago dinámico que haya habilitado en la configuración de Pagos. |
Bloque de descripción
Este bloque muestra la descripción del producto. No tiene configuración ajustable.
Bloque de calificación de productos
Este bloque muestra la calificación promedio de productos en estrellas, con la cantidad de reseñas entre paréntesis, por ejemplo: ★★★★★ (8).
Para mostrar las calificaciones de productos, necesitas una aplicación de reseñas de productos como Reseñas de productos de Shopify y definiciones de metacampos para reviews.rating_count
y reviews.rating
.
Compartir bloque
Este bloque muestra un enlace en el que se puede hacer clic que permite a los clientes compartir el producto en sus redes sociales.
Configuración | Descripción |
---|---|
Texto | El texto en el que se puede hacer clic que los clientes usan para compartir el producto en sus redes sociales. |
Bloque del selector de cantidad
Este bloque muestra un selector de cantidad que los clientes pueden usar para cambiar cuántas unidades del producto desean comprar. No tiene configuración ajustable. La cantidad predeterminada es 1.
Bloque de liquid personalizado
Este bloque muestra un código Liquid o HTML personalizado que puedes agregar al bloque.
Configuración | Descripción |
---|---|
Liquid personalizado | Muestra el contenido que puedes introducir como código de Liquid o HTML. |
Bloque de pestañas plegables
Este bloque muestra una pestaña con título plegable. Cuando un cliente hace clic en el título, la pestaña se expande para mostrar contenido adicional.
Configuración | Descripción |
---|---|
Encabezado | El título de la pestaña. Se muestra cuando se contrae y se expande. |
Contenido de la pestaña | El contenido de la pestaña. Se muestra solo cuando la pestaña está expandida. |
Contenido de la pestaña de la página | Muestra el contenido de una página en la pestaña. Muestra solo el contenido de la página desde el editor de páginas, no se muestra el estilo Liquid de la plantilla de la página en este bloque. Cualquier contenido introducido en el contenido de la pestaña se muestra encima del contenido de la página. |
Bloque emergente
Este bloque muestra el texto que abre una ventana emergente cuando se hace clic en él. Esta ventana emergente muestra el contenido de una de tus páginas.
Configuración | Descripción |
---|---|
Etiqueta de enlace | El texto en el que se puede hacer clic que los clientes usan para mostrar la ventana emergente. |
Página | La página cuyo contenido deseas mostrar en la ventana emergente. Muestra solo el contenido de la página desde el editor de página. La ventana emergente no muestra ningún estilo de Liquid en la plantilla de página. |
Configuración de la sección de recomendaciones de productos
Según el producto que se esté viendo actualmente, esta sección muestra productos similares o productos que se compran frecuentemente junto con este producto.
Configuración | Descripción |
---|---|
Encabezado | Título de la sección. Puedes usar una fuente dinámica para el encabezado 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. |
Máximo de productos para mostrar | Usa el control deslizante de rango para seleccionar la cantidad máxima de productos recomendados que mostrar: entre 2 y 10. |
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 | El color de fondo de la sección de recomendaciones de productos. Elige entre Acento 1, Acento 2, Fondo 1, Fondo 2 o Inverso. |
Relación de aspecto de imagen | La relación de aspecto de las imágenes de los productos recomendados:
|
Mostrar segunda imagen al pasar el cursor | Cuando el cliente pasa el cursor sobre la imagen, muestra la segunda imagen del producto si el producto tiene una. | Mostrar proveedor | Muestra el proveedor de cada producto. |
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 para Shopify y definiciones de metacampos para reviews.rating_count y reviews.rating. |
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. |
Relleno de sección | Agregar espacio a la parte superior o inferior de la sección. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la sección. |
Para más información sobre recomendaciones de productos, consulta Entender las recomendaciones de productos.
Páginas de colección
De forma predeterminada, las páginas de colección tienen un banner de colección y una sección de cuadrícula de productos.
Configuración de la sección del banner de colección
Configuración | Descripción |
---|---|
Mostrar descripción de la colección | Muestra la descripción de la colección. |
Mostrar imagen de la colección | Muestra la imagen de la colección. |
Esquema de colores | El color de fondo de la sección multicolumna. Elige entre Acento 1, Acento 2, Fondo 1, Fondo 2 o Inverso. |
Configuración de la sección de cuadrícula de productos
Configuración | Descripción |
---|---|
Productos por página | La cantidad de productos que deseas mostrar en cada página. Puede ser cualquier múltiplo de 4, de 8 a 24. Los valores predeterminados son 16. |
Número de columnas en la versión para computadora | Usa la escala de rango para seleccionar la cantidad de columnas que se mostrarán en las computadoras de escritorio. El mínimo es 1 y el máximo 5. |
Relación de aspecto de imagen | La proporción de aspecto de las imágenes del producto:
|
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 el proveedor de cada producto. |
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 para 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 el artículo 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](/manual/online-store/dynamic-checkout). 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". |
Habilitar filtrado | Permite a los clientes filtrar los productos de la colección según los filtros en tu configuración denavegación. |
Filtro de diseño para dispositivos de escritorio | Elige entre un diseño horizontal (predeterminado), vertical o lateral. |
Habilitar ordenado | Permite a los clientes ordenar los resultados de búsqueda. |
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. |
Relleno de sección | Agrega espacio a la parte superior o inferior de la cuadrícula del producto. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio encima o debajo de la cuadrícula del producto. |
Página de lista de colecciones
La página de lista de colecciones muestra todas tus colecciones que están disponibles en el canal de ventas de la tienda online.
Configuración | Descripción |
---|---|
Encabezado | El título de la página. |
Ordenar colecciones por: |
Determina en qué orden mostrar tus colecciones:
|
Relación de aspecto de imagen | La proporción de aspecto de las imágenes de colección:
|
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. |
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. |
Páginas
Puedes crear páginas personalizadas en tu panel de control de Shopify para crear contenido para tus clientes, como una página Sobre nosotros, o información adicional sobre tus productos. Estas páginas no tienen configuraciones adicionales dentro del editor de temas.
Páginas de blog
Las páginas de blog son la página de inicio de cualquier blog que crees dentro de tu panel de control de Shopify. De forma predeterminada, contienen una sección de artículos del blog.
Configuración de la sección de artículos del blog
La sección de artículos del blog muestra los últimos artículos del blog. Cada artículo del blog muestra cualquier imagen del blog, su título y el extracto o las primeras palabras del artículo. Para pantallas más grandes, puedes elegir mostrar los artículos del blog en una cuadrícula o en un formato de collage.
Configuración | Descripción |
---|---|
Diseño en pantallas grandes | Muestra los artículos del blog en una cuadrícula o un collage. |
Mostrar imagen destacada | Muestra la imagen destacada del artículo del blog. |
Altura de imagen destacada | Usa el menú desplegable para elegir entre la opción Adaptar a la imagen, Pequeña, Mediana o Grande. |
Mostrar fecha | Para cada entrada del blog, muestra la fecha en que se publicó el artículo. |
Mostrar autor | Para cada entrada del blog, se muestra el autor del artículo. |
Páginas de artículos de blog
Las páginas de artículos de blog muestran el contenido del artículo del blog. De forma predeterminada, contienen una sección de artículo del blog. La sección de artículo del blog no tiene configuraciones personalizables por sí sola, pero contiene los siguientes bloques predeterminados:
- Imagen destacada
- Nombre
- Compartir
- Contenido
Bloque de imágenes destacadas
Configuración | Descripción |
---|---|
Altura de imagen destacada |
Determina la altura de la imagen destacada del artículo del blog:
|
Tamaños de imágenes destacadas
Tarjetas pequeñas | Tarjetas grandes |
---|---|
Altura de imágenes destacadas pequeñas
|
Altura de imágenes destacadas grandes
|
Altura de imágenes destacadas medianas
|
Altura de imágenes destacadas medianas
|
Altura de imágenes destacadas grandes
|
Altura de imágenes destacadas grandes
|
Bloque de título
Configuración | Descripción |
---|---|
Mostrar fecha | Muestra la fecha en que se publicó el artículo del blog. |
Mostrar autor | Muestra el autor del artículo del blog. |
Compartir bloque
Este bloque muestra un enlace en el que se puede hacer clic que permite a los clientes compartir el artículo del blog en sus redes sociales.
Configuración | Descripción |
---|---|
Texto | El texto en el que se puede hacer clic que los clientes usan para compartir el artículo del blog en sus redes sociales. |
Bloque de contenido
El bloque de contenido muestra el contenido del artículo del blog. No tiene configuraciones personalizables.
Página del carrito
De forma predeterminada, la página del carrito tiene una sección Artículos y una sección Subtotal.
Configuración de la sección de artículos
La sección Artículos muestra los productos y cantidades que un cliente ha agregado a su carrito.
Configuración | Descripción |
---|---|
Mostrar proveedor | Muestra los proveedores de cada producto en el carrito. |
Configuración de la sección del subtotal
La sección Subtotal tiene un precio de Subtotal y un bloque de botón de pago. Ningún bloque tiene ninguna configuración personalizable.
Configuración | Descripción |
---|---|
Habilitar nota del carrito | Muestra el campo Nota del carrito donde los clientes pueden introducir información adicional. |
Página de contraseña
La página de contraseña se muestra cuando la protección con contraseña en tu tienda online está activada y un cliente intenta visitar tu sitio web. Esta página tiene su propio encabezado y pie de página, y contiene una sección de suscriptor de correo electrónico de forma predeterminada.
Sección de encabezado de contraseña
Configuración | Descripción |
---|---|
Imagen del logo | El logo que deseas mostrar. |
Ancho del logo personalizado | El ancho del logo. Puede ser cualquier múltiplo de 10, de 50 px a 250 px. Los valores predeterminados son 100 px. |
Esquema de fondo | El fondo de la sección del encabezado de la contraseña y el relleno de la imagen se pueden elegir entre Acento 1, Acento 2, Fondo 1, Fondo 2 o Inverso. |
Sección de suscripción de correo electrónico
Esta sección está destinada a ofrecer una forma de que los clientes se suscriban a tu email marketing para que puedan obtener más información sobre tu negocio, como cuando se abre para el negocio.
Configuración | Descripción |
---|---|
Esquema de colores | El color de fondo de la sección del suscriptor de correo electrónico. Se puede elegir entre Resaltado 1, Resaltado 2, Fondo 1, Fondo 2 o Inverso. |
Definir ancho completo en sección | Extiende la sección para que sea el ancho de la ventana del navegador. |
Bloque de encabezado
Configuración | Descripción |
---|---|
Encabezado | El título de la sección |
Bloque de subtítulo
Configuración | Descripción |
---|---|
Descripción | El contenido de texto de la sección. |
Bloque de formularios de correo electrónico
Este bloque muestra el campo del formulario de correo electrónico donde los clientes pueden introducir su dirección de correo electrónico. Este bloque no tiene configuraciones personalizables.
Sección de pie de página de la contraseña
Configuración | Descripción |
---|---|
Esquema de colores | El color de fondo de la sección del pie de página de la contraseña. Se puede elegir entre Resaltado 1, Resaltado 2, Fondo 1, Fondo 2 o Inverso. |
Página 404
La página 404 se muestra cuando un cliente intenta visitar un enlace a tu sitio que no existe, como una página de producto de un producto que eliminaste de tu tienda. Esta página no tiene configuraciones personalizables.
Página de búsqueda
La página de búsqueda es donde los clientes pueden buscar productos o páginas específicos dentro de tu tienda online. Por defecto, la página contiene una sección de Resultados de búsqueda.
Configuración de la sección de resultados de búsqueda
Configuración | Descripción |
---|---|
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. |
Relación de aspecto de imagen | La relación de aspecto de las imágenes de los productos recomendados:
|
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 el proveedor de cada producto. |
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 para Shopify y definiciones de metacampos para reviews.rating_count y reviews.rating. |
Habilitar filtrado | Haz clic para habilitar el filtrado de resultados de búsqueda. |
Filtro de diseño para dispositivos de escritorio | Elige entre un diseño horizontal (predeterminado), vertical o lateral. |
Habilitar ordenado | Haz clic para habilitar la clasificación de resultados de búsqueda. |
Mostrar fecha | Para cada entrada del blog, muestra la fecha en que se publicó el artículo. |
Mostrar autor | Para cada entrada del blog, se muestra el autor del artículo. |
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. |
Relleno de sección | Agrega espacio a la parte superior o inferior de los resultados de búsqueda. Usa el control deslizante de rango para agregar entre 0 px y 100 px de espacio por encima o debajo de los resultados de búsqueda. |