La página de Producto es donde tu cliente decide si compra o no: ahí ve las fotos, el precio y la descripción. Personalizarla te sirve, por ejemplo, para mostrar mejor las variantes del producto, ofrecer una descripción más completa con imágenes o videos, o sugerir productos relacionados que aumenten el ticket promedio de la compra.
El diseño Ipanema te permite configurar cómo se muestra tu producto en la tienda. La página de Producto trae 4 secciones predeterminadas que podés configurar y reordenar, pero no eliminar: Información del producto, Descripción del producto, Productos complementarios y Productos alternativos. También podés agregar secciones nuevas.
En este tutorial te explicamos cómo configurar cada una de estas secciones y cómo agregar otras nuevas a la página.
¡Vamos a los pasos!
1. Ingresar al administrador de tu Tiendanube.
2. Acceder a "Tienda online > Diseño" y hacer clic en "Editar diseño".
3. Hacer clic en el botón del menú superior central y seleccionar la página "Producto".
4. Dentro de la página de "Producto", podés configurar las secciones predeterminadas: Información del producto, Descripción del producto, Productos complementarios y Productos alternativos.
5. Hacer clic en cada una para abrir las configuraciones.
Información del producto
Es el área principal de compra de la tienda: muestra la galería de fotos, el precio, las variantes, el botón de comprar y las opciones de envío.
5.1. Hacer clic en "Información del producto" para configurar diseño, colores y CSS personalizado.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como Multimedia e Información de compra.
Multimedia
- Mostrar miniaturas: cuando está activado, muestra pequeñas miniaturas de las imágenes del producto al lado o debajo de la imagen principal, permitiendo a tu cliente navegar entre las fotos rápidamente.
- Posición en computadoras: define dónde se muestran las miniaturas en la versión desktop. Elegí entre Izquierda (miniaturas en columna al lado de la imagen principal) o Inferior (miniaturas en fila debajo de la imagen principal).
Información de compra
- Separación entre elementos: controla el espaciado entre las miniaturas y la imagen principal, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la galería, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la galería, en píxeles (px).
Descripción del producto
Para detallar especificaciones, cuidados, guía de talles y la historia del producto, con opción de mostrarla en formato acordeón.
5.1. Hacer clic en "Descripción del producto" para configurar visualización, diseño, colores y CSS personalizado.
Visualización
- Mostrar título: cuando está activado, muestra el título de la sección "Descripción" sobre el texto descriptivo del producto, ayudando a tu cliente a identificar el contenido rápidamente.
- Mostrar redes sociales: cuando está activado, muestra los íconos de compartir en redes sociales junto a la descripción, para que tu cliente pueda compartir el producto fácilmente.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Color de fondo: define el color de fondo de la sección de descripción. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
- Color de los textos: define el color de los textos de la descripción. La opción "Por defecto" mantiene el color definido en la configuración general del tema.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección de descripción más allá de las opciones estándar del editor.
Productos complementarios
Para estrategias de venta cruzada ("También te puede gustar") con el objetivo de aumentar el ticket promedio del pedido.
5.1. Hacer clic en "Productos complementarios" para configurar diseño, colores y CSS personalizado.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como definir y formatear el Título y la disposición de los Productos. Para configurarlo, hacer clic en cada elemento.
Productos alternativos
Para ofrecer opciones similares al producto que tu cliente está viendo, útil cuando buscás mostrar variedad dentro de la misma categoría.
5.1. Hacer clic en "Productos alternativos" para configurar diseño, colores y CSS personalizado.
Diseño
- Ancho: define el ancho de la sección. Seleccioná "Página" para alinearlo al contenido principal o "Completo" para que ocupe toda la pantalla.
- Separación entre elementos: controla el espaciado entre los bloques o elementos internos de la sección, en píxeles (px).
- Espaciado superior e inferior: ajusta el espaciado vertical interno de la sección, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno de la sección, en píxeles (px).
Colores
- Color de fondo: define el color de fondo de la sección. La opción "Sin relleno" mantiene el fondo transparente, sin aplicar ningún color.
CSS personalizado
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente la sección más allá de las opciones estándar del editor.
5.2. También podés configurar los otros elementos, como definir y formatear el Título y la disposición de los Productos. Para configurarlo, hacer clic en cada elemento.
6. Para agregar nuevas secciones a la página de Producto, hacer clic en "+ Agregar sección", seleccionar las secciones que querés incluir y hacer clic en "Agregar" para sumarlas a tu tienda.
Helpjuice Warning Callout Title
Consultá el catálogo completo con el detalle de cada sección y qué podés configurar ingresando a ¿Qué secciones puedo agregar en las páginas de mi tienda con el diseño Ipanema?
7. Hacer clic en "Guardar y publicar" para aplicar los cambios.
Helpjuice Info Callout Title
En la página de Producto, podés seleccionar un producto específico de tu tienda para ver cómo quedan los cambios. Hacer clic en el botón "Previsualizar" en el menú superior y seleccionarlo.
¡Listo!
Ya sabés cómo agregar y configurar secciones en la página de inicio de tu tienda usando el editor del diseño Ipanema. También podés personalizar el resto de las páginas de tu tienda, Inicio, Categoría, Búsqueda y Error 404, siguiendo la misma lógica de secciones y bloques.