Por defecto, nuestro pop-up de upsell es realmente limpio y no agresivo. Eso es porque creemos que un diseño limpio y simple funciona mejor en términos de conversión.
Sin embargo, siempre puedes mejorarlo aprovechando las opciones de personalización de en la aplicación o haciendo ajustes de estilo aún más avanzados.
Cómo personalizar la ventana emergente usando CSS
Usando CSS personalizado puedes cambiar prácticamente cualquier elemento de la ventana emergente. Sin embargo, para ello es necesario tener algunos conocimientos básicos de CSS. Para empezar con CSS recomendamos leer el tutorial de CSS de W3Schools.
Para ajustar el código CSS, vaya a Personalizar ventana emergente en el menú superior y busque la sección Personalización avanzada. Inserte allí su código CSS personalizado.
En el ejemplo siguiente hemos aumentado el tamaño de la fuente y cambiado el color de todos los botones:
A continuación encontrará algunos códigos CSS personalizados rápidos para empezar.
Cambie el color de fondo, el color de la fuente, el color del borde y el tamaño de la fuente de los Añada botones y el color de fondo de los Añada botones al pasar el ratón por encima:
.Botón-Añadir { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 16px !important; /* font size */}.Botón-Añadir:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Cambiar el color de fondo, color de fuente, color de borde y tamaño de fuente del botón Continuar y el color de fondo del botón Continuar al pasar el ratón por encima:
.Botón-Primario { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 18px !important; /* font size */}.Botón-Primario:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Cambiar el color de fondo de la línea de productos principal:
.Línea de producto { background-color: #D9FED9 !important; /* background color */}Cambiar el tamaño de la fuente del título de la ventana emergente, del producto principal y del producto de la venta ascendente:
.Title { font-size: 30px !important; /* font size of the headline */}.Product-Name { font-size: 16px !important; /* font size of the parent product */}.Offer-Title { font-size: 16px !important; /* font size of the upsell product */}Cambiar la fuente utilizada en la ventana emergente:
/* la fuente personalizada importada debe estar en el dominio fonts.google.com */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* asignar una nueva fuente a los elementos emergentes de Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}A continuación encontrará un resumen de las clases disponibles para la personalización:
Si está interesado en más opciones para desarrolladores y en la API pública de Candy Rack, puede obtener más información en el artículo API pública de Candy Rack y opciones para desarrolladores.
¿Necesita que le echemos una mano? No dude en ponerse en contacto con nosotros a través del chat o por correo electrónico en [email protected]
Feliz upselling,
El equipo de Candy Rack