Ir al contenido principal
Todas las coleccionesCandy Cart
Cómo personalizar la ventana emergente con CSS
Cómo personalizar la ventana emergente con CSS

Aprenda a realizar ajustes de estilo más avanzados

Lucia Dvořáková avatar
Escrito por Lucia Dvořáková
Actualizado hace más de 2 meses

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 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:

.Button-Add {   background-color: #2dd262 !important; /* button color */   border-color: #8f9396 !important; /* border color */   color: white !important; /* font color */   font-size: 16px !important; /* font size */}.Button-Add:not([disabled]):hover {    background-color: #059e36 !important; /* button color when hover over */}

Cambiar el color de fondo, el color de fuente, el color del borde y el tamaño de fuente del botón Continue to Checkout y el color de fondo del botón Continue to Checkout al pasar el ratón por encima:

.Button-Primary {   background-color: #2dd262 !important; /* button color */   border-color: #8f9396 !important; /* border color */   color: white !important; /* font color */   font-size: 18px !important; /* font size */}.Button-Primary:not([disabled]):hover {   background-color: #059e36 !important; /* button color when hover over */}

Cambiar el color de fondo de la línea "Your Cart":

.Product-Line {   background-color: #D9FED9 !important; /* background color */}

Cambiar el tamaño de la fuente del título de la ventana emergente, "Your Cart" (.Product-Name), y el producto upsell:

.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 domain */@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 se muestra un resumen de las clases disponibles para la personalización:

¿Necesita que le echemos una mano? No dudes en ponerte en contacto con nosotros a través del chat o por correo electrónico en [email protected]

Feliz upselling,

Equipo Digismoothie

¿Ha quedado contestada tu pregunta?