Marca: logo, colores, títulos y vista previa social
Pon el logo, el favicon y los colores de tu tienda en el checkout, la página de agradecimiento, el área del cliente y los correos, y define la vista previa que aparece cuando se comparte el enlace.
El comprador ve tu marca en todas las páginas de pago: el logo arriba, tus colores en los botones y el favicon en la pestaña del navegador. Cuando alguien comparte el enlace de pago en WhatsApp o en una red social, la vista previa muestra la imagen y la descripción que elijas.
Antes de empezar
- Rol Admin o Propietario en el proyecto de Vipter.
- El logo de la tienda, de preferencia en PNG, SVG o WebP con fondo transparente.
- Opcional: un ícono cuadrado para el favicon y una imagen de 1200×630 px para la vista previa social.
Paso 1: abrir la configuración
Abre GeneralConfiguraciónGeneral. La marca está en dos tarjetas: Marca y checkout y Compartir en redes.
Paso 2: subir el logo y el favicon
Haz clic en Elegir imagen en cada campo, o arrastra la imagen hasta el área de vista previa. Para quitar una imagen, haz clic en Quitar.
| Campo | Dónde aparece | Qué hace Vipter con la imagen |
|---|---|---|
| Logo | Parte superior del checkout, del área del cliente y de los correos | La reduce para que quepa en 512×512 px, sin recortar, y la guarda en PNG, manteniendo la transparencia. |
| Favicon | Pestaña del navegador en el checkout, en la página de agradecimiento y en el área del cliente | La ajusta a 64×64 px sin recortar y la guarda en PNG. |
Cada imagen puede tener hasta 5 MB. El logo y el favicon aceptan PNG, JPG, WebP y SVG. Un SVG se convierte en PNG al guardarse.
Con logo, la parte superior del checkout muestra solo el logo. Sin logo, muestra el nombre de la tienda y el aviso de checkout seguro. Sin favicon, la pestaña muestra el ícono de Vipter.
Paso 3: definir los títulos de las páginas
- Título de la página de checkout: el texto de la pestaña del navegador en el checkout y el título de la vista previa cuando se comparte el enlace. Si está vacío, Vipter usa el nombre de la oferta seguido del nombre de la tienda.
- Título de la página de gracias: el título grande de la página de agradecimiento después de confirmarse el pago, y también el texto de la pestaña. Si está vacío, la página muestra el mensaje predeterminado de pago confirmado, en el idioma del comprador.
Cada título acepta hasta 80 caracteres. Los títulos que escribes no se traducen: aparecen iguales en todos los idiomas del checkout.
Paso 4: elegir los colores
- Color primario: el color de los botones y del borde de los campos enfocados.
- Color secundario: el final del degradado de los botones, que va del primario al secundario.
Elige el color en el cuadro o escribe el código hexadecimal, como #4F46E5. Con el primario completado y el secundario vacío, Vipter usa una versión más oscura del primario. Con los dos vacíos, vale el azul de Vipter. Usar predeterminado limpia el campo.
El texto de los botones queda blanco u oscuro solo, según el color, para seguir siendo legible. Los colores valen en el checkout, en la página de agradecimiento, en las ofertas poscompra y en el área del cliente. En los correos, el color primario aparece en los botones.
Paso 5: armar la vista previa social
En la tarjeta Compartir en redes:
- Descripción: el texto que aparece debajo del título en la vista previa, con hasta 300 caracteres. Si está vacío, la vista previa usa la descripción de la oferta, cuando la tiene.
- Imagen de vista previa: la imagen grande de la vista previa. Vipter la recorta y la redimensiona a 1200×630 px y la guarda en JPG, con fondo blanco en lugar de la transparencia. Sin imagen, la vista previa usa el logo.
La descripción y la imagen valen para los enlaces de todas las ofertas de la tienda y para la página de agradecimiento. El área del cliente usa solo la imagen. Las páginas de pago y el área del cliente no aparecen en los buscadores.
Paso 6: guardar y revisar
- Haz clic en Guardar cambios en la barra al final de la página. Las imágenes solo se suben al guardar.
- Abre el enlace de una oferta y revisa el logo, los colores y el título de la pestaña.
- Para revisar la vista previa, pega el enlace en un chat de WhatsApp contigo mismo. Las apps y las redes sociales guardan por un tiempo la vista previa de un enlace ya compartido. Si cambiaste la imagen y la vista previa antigua sigue apareciendo, es la copia que guardó la app, y se actualiza después.
El pie de página de Vipter
El pie de página con "Vipter.com" aparece siempre en el checkout y en la página de agradecimiento. No se puede quitar ni cambiar. El resto de la página, incluida la dirección, puede ser completamente de tu tienda con un dominio propio.
Problemas comunes
-
La imagen es demasiado grande (máx. 5 MB).
La imagen supera los 5 MB. Reduce su tamaño o expórtala en WebP y súbela de nuevo.
-
El logo quedó pequeño o con bordes sobrantes
Vipter no recorta el logo, así que el espacio vacío alrededor del diseño también aparece. Recorta la imagen al ras del dibujo antes de subirla.
-
El color no cambió en el checkout
El código necesita 6 dígitos hexadecimales después del
#, como#0A7D3B. Revisa el campo y guarda de nuevo.
Qué hacer después
- Usa tu dominio en los enlaces de pago.
- Mira lo que encuentra el comprador en la página de agradecimiento.
- Lleva tu marca a los correos en Correos para compradores.
Idiomas y monedas del checkout
En qué idioma ve el comprador el checkout, la página de agradecimiento y el área del cliente, cuándo desaparece el selector de idioma y en qué moneda se abre el checkout.
Dónde vendes y a dónde envías
Elige los países que acepta el checkout, el país que aparece primero, a dónde envía la tienda, cómo se pide la dirección y para qué sirve la dirección de la tienda.