Centro de Atención Nube Configura tu tienda Diseño Elegir diseño Diseño Rio

¿Cómo personalizar mi diseño Rio?

Conoce cómo personalizar diferentes elementos del diseño de tu tienda con la plantilla Rio

Última actualización: 04/12/2023

El 🎨 diseño Rio es una plantilla minimalista que te va a permitir destacar tus imágenes y productos. Además, es un diseño muy adaptable con el que vas a poder transmitir la identidad de tu negocio de forma única.

Algunas de las características que diferencian a este diseño son:

  • Se puede configurar un video con reproducción automática
  • Permite que se agregue una cantidad ilimitada de banners en la página de inicio
  • El encabezado es muy flexible, ofreciendo diferentes opciones en su configuración

En este tutorial, te mostramos cómo personalizar este diseño usando las funcionalidades que ofrece.

Logo, colores y tipo de letra

Tanto en Rio como en los demás diseños, es fundamental que definas el logo, los colores y las tipografías para tu tienda. Estos son los aspectos centrales de su identidad visual.

Para configurar estos elementos, puedes consultar los siguientes tutoriales:

Insertar un logo

Con este diseño, se puede elegir la ubicación del logo (centrado o a la izquierda) y su tamaño (pequeño, mediano o grande).

Puedes agregar el logo de tu marca en la tienda siguiendo nuestro tutorial:

📝 ¿Qué es un logo y cómo agregarlo a mi tienda?

Delete

Agregar un favicon

El favicon es el icono asociado a tu página que se muestra en la pestaña del navegador. Conoce cómo configurarlo en el tutorial:

📝 ¿Qué es un favicon y cómo agregarlo a mi tienda?

Delete

Elegir la tipografía

Para cambiar los tipos de letra de tu tienda, sigue los pasos en el tutorial:

📝 ¿Cómo cambiar los tipos de letra de mi diseño?

Delete

Cambiar los colores

Además de los colores para el fondo, textos y de acento, este diseño permite configurar los colores para el botón de compra, las etiquetas, encabezadopie de página.

Para elegir y modificar los colores de tu tienda, puedes ver los pasos en nuestro tutorial:

📝 ¿Cómo cambiar los colores de mi diseño?

Delete

Encabezado

Puedes personalizar el encabezado, o parte superior de tu tienda, con este diseño, haciéndolo más atractivo y organizado

Ver más información

El diseño Rio tiene un encabezado muy flexible, para el que podés:

  • Elegir el color de fondo, y de textos e íconos
  • Configurarlo como transparente, para que se muestre arriba del carrusel de imágenes o video (si alguno de estos está configurado en la parte superior de la tienda)
  • Agregar y personalizar la barra de anuncio (incluso animándola)
  • Hacer configuraciones diferentes para celulares y computadoras
  • Mostrar el buscador como un icono o como una barra

Encabezado de una tienda con el diseño Rio

Para aprender a personalizarlo, consulta el tutorial: 

📝 ¿Cómo personalizar el encabezado de mi diseño?

Delete

Página de inicio

La página principal de tu tienda es la que más refleja tu imagen de marca. Con el diseño Rio, tienes diversas posibilidades de personalización, haciendo la búsqueda de productos más amigable, tanto para grandes negocios, como para tiendas menores.

A continuación, enumeramos los tutoriales con los que puedes guiarte para personalizar tu página de inicio:

Carrusel de imágenes

Este diseño permite configurar efecto de movimiento (es decir, que las imágenes pasen solas) en el carrusel. También permite mostrar imágenes diferentes en computadoras y celulares, para que se adapten mejor al dispositivo.

Conoce cómo configurar un carrusel de imágenes en:

📝 ¿Cómo agregar un carrusel de imágenes en mi tienda?

Delete

Banners

En el diseño Rio, puedes agregar banners de categorías y promocionales ilimitados. Además, estos banners se pueden mostrar como un carrusel. También se puede elegir si mostrar texto fuera o por encima de las imágenes, y si usar el mismo alto para todas las imágenes cargadas.

Conoce los diferentes banners que podés configurar con este diseño:

📝 Agregar Banners con información de envíos, pagos y compras

📝 Agregar Banners de categorías

📝 Agregar Banners promocionales

Delete

Pop-up promocional

Puedes configurar un pop-up promocional para que se muestre una ventana con información sobre tus promociones, nuevos productos o lo que quieras destacar, o para que tus visitantes se suscriban a tu newsletter. Para eso, seguir estos pasos:

📝 ¿Cómo agregar un pop-up promocional en mi diseño?

Delete

Productos destacados

Para destacar productos en la página de inicio, puedes seguir los pasos en el tutorial:

📝 ¿Cómo destacar mis productos en el inicio de mi tienda?

Además, puedes elegir el formato en que se exhiben los productos destacados: como carrusel o grilla.

Carrusel

Delete

Grilla

Delete
Delete

Video

Puedes agregar un video de YouTube en el inicio de tu tienda. Además, puedes configurar la reproducción automática del video. Para eso, sigue los pasos del tutorial:

📝 ¿Cómo agregar un video en el inicio de mi Tiendanube?

En el diseño Rio, puedes agregar una imagen para que se muestre mientras el video esté listo para reproducirse, además de un título, subtítulo, descripción y un botón.

Campos para las configuraciones adicionales del video

Delete

Publicaciones de Instagram

También puedes mostrar las publicaciones del Instagram de tu negocio en el inicio de tu tienda.

📝 ¿Cómo mostrar mis publicaciones de Instagram en mi Tiendanube?

Delete

Ordenar las secciones

Después de personalizar los diferentes elementos de tu página de inicio, puedes ordenarlos, eligiendo la posición en que cada uno va a mostrarse en la tienda. Para eso, sigue nuestro tutorial:

📝 ¿Cómo ordenar las secciones de mi página de inicio?

Delete

Listado de productos

También, vas a poder personalizar algunos elementos de la visualización de tus productos. Por ejemplo, puedes configurar la cantidad de productos por fila en computadoras, la visualización de filtros, el pop-up de compra rápida, y si se muestra la segunda imagen del producto al pasar el mouse.

Listado de productos de una tienda con diseño Rio

Para editar tu listado de productos, puedes consultar el tutorial:

📝 ¿Cómo personalizar mi listado de productos?


Detalle de producto

Puedes elegir si habilitar algunos elementos en la página del detalle de tus productos, como el calculador de costo de envío, la visualización de variantes como botones o un menú desplegable, mostrar la cantidad de unidades o la guía de talles.

Detalle de un producto en una tienda con el diseño Rio

Sigue el tutorial para cada una de las funcionalidades:

Calculador de envíos

Para habilitar el calculador de costos de envío, puedes ver los pasos en nuestro tutorial:

📝 ¿Cómo mostrar mi calculador de costos de envío?

Delete

Guía de talles

También puedes agregar una guía de talles con este diseño, siguiendo los pasos en:

📝 ¿Cómo agregar una guía de talles en mi tienda?

Delete

Última unidad en stock

Para configurar un mensaje informando a tus clientes que queda una última unidad de stock del producto e incentivar la compra de esta forma, sigue los pasos en el tutorial:

📝 ¿Cómo mostrar cuando solo queda un producto en stock?

Delete

Stock disponible

Además de mostrar una leyenda cuándo queda una sola unidad, también puedes mostrar la cantidad de productos disponibles. Para configurarlo, puedes seguir estos pasos:

1. Ingresar a "Mi Tiendanube > Diseño" en el administrador de tu tienda, y hacer clic en "Personalizar mi diseño actual".


2. Hacer clic en "Listado de productos".

3. Ir a la sección "Stock".


4. Tildar la casilla de "Mostrar stock disponible".


5. Para guardar los cambios, hacer clic en "Publicar cambios".

¡Listo! En el detalle del producto, se va a mostrar el stock que tiene cada uno de tus productos.

Delete

Visualización de las fotos

En el detalle del producto, vas a poder escoger para que se visualice con un carrusel a la izquierda de la imagen principal o listadas una debajo de la otra.

Carrusel

Delete

Listado

Delete

Por defecto, la visualización será en formato carrusel, pero podrás configurar en forma de listado siguiendo estos pasos:


1. Ingresar a "Mi Tiendanube > Diseño" en el administrador de tu tienda, y hacer clic en "Personalizar mi diseño actual".


2. Hacer clic en "Listado de productos".


3. Ir a la sección "Fotos del producto".


4. Tildar la casilla de "Mostrar una foto abajo de la otra al navegar el producto en computadoras".


5. Para guardar los cambios, hacer clic en "Publicar cambios".

Delete

Carrito de compras

Personaliza la información a mostrar cuando tus clientes ingresen a su carrito de compras.

Carrito de compras de ejemplo en una tienda con el diseño Rio

Botón "Ver más productos"

Puedes configurar ese botón para que tus clientes puedan seguir viendo y agregando productos a su compra, yendo directamente desde el carrito.


Para esto, marcá la opción "Mostrar el botón 'Ver más productos' en el carrito de compras" en la sección "Mi Tiendanube > Diseño > Personalizar el diseño actual > Carrito de compras" de tu administrador.

Delete

Valor mínimo de compra

Si vendes al por mayor o simplemente tienes una estrategia de venta con la que no querés permitir compras menores a cierto monto, puedes configurar un valor mínimo de compra en tu tienda.


Para hacerlo, sigue los pasos en nuestro tutorial:

📝 ¿Cómo configurar un mínimo de compra en mi tienda?

Delete

Carrito de compra rápida

La opción de compra rápida es una herramienta para que tus clientes puedan agregar productos a su carrito de forma simple y desde el listado de productos.


Conoce los pasos para activarlo en:

📝 ¿Cómo activar la opción de compra rápida en mi tienda?

Delete

Calculador de envíos

Además de habilitar el calculador de costos de envío en el detalle del producto, puedes activarlo también en el carrito de compras. Para esto, puedes ver los pasos en nuestro tutorial:

📝 ¿Cómo mostrar mi calculador de costos de envío?

Delete

Pie de página

Como en todas las plantillas, puedes alterar algunos elementos del footer o pie de página, para incluir información relevante de tu negocio. Por ejemplo, podés elegir qué botones mostrar, incluir información sobre medios de pago y de envío, y agregar sellos personalizados. 

Pie de página en una tienda con el diseño Rio

Menú inferior

Para editar un menú exclusivo para el pie de página, sigue los pasos en:

📝 ¿Cómo cambiar el menú inferior de mi tienda?

Delete

Íconos de medios de pago y envío

Puedes mostrar los íconos de las formas de entrega y pago en el pie de página. Encuentra los pasos a seguir en nuestro tutorial:

📝 ¿Cómo agregar íconos de medios de pago y envío en mi footer?

Delete

Sellos personalizados

En el pie de página también vas a poder agregar sellos personalizados o logos, siguiendo los pasos en:

📝 ¿Cómo agregar sellos personalizados a mi tienda?

Delete

Color de fondo, texto e iconos del pie de página

Desde la sección "Mi Tiendanube > Diseño", haciendo clic en "Personalizar el diseño actual" e ingresando a "Pie de página", vas a poder elegir los colores para el fondo, y el texto e iconos del footer de tu tienda, para personalizarla aún más.

Delete

Con esta información, vas a poder aprovechar las funcionalidades disponibles para el diseño Rio, ofreciendo una excelente experiencia de compra para los clientes y visitantes de tu tienda.

Delete

Info

Recuerda que podés ver tiendas de ejemplo para cada plantilla en 🎨 Tiendanube Diseños, haciendo clic sobre el botón "Ver tiendas demo" para el diseño que te interese.