Por defecto, nuestro diseño de venta ascendente es realmente limpio y no agresivo. Esto se debe a que creemos que un diseño limpio y sencillo funciona mejor en términos de conversión.
Sin embargo, siempre puedes mejorarlo aprovechando las opciones de personalización de la app, como los ajustes de Personalización de la ventana emergente 1, los ajustes de Personalización del bloque de la app Página de producto , o aplicando ajustes de estilo más avanzados.
Personalización de la ventana emergente
Utilizando CSS personalizado puedes cambiar prácticamente cualquier elemento de la ventana emergente. Sin embargo, para ello se requieren unos conocimientos básicos de CSS. Para iniciarte en CSS, te recomendamos que leas el tutorial de CSS de W3Schools.
Para ajustar el código CSS, ve a Personalización en el menú de la aplicación y busca la sección Personalización avanzada . Inserta allí tu código CSS personalizado.
Lista de selectores
A continuación encontrarás la lista de selectores disponibles que puedes utilizar para ayudarte a empezar a dar estilo a la ventana emergente Candy Rack.
Elemento
|
Selector de clase
|
Añadir botón
|
para el diseño de cuadrícula:
|
Botón Continuar
|
|
Botón No, gracias
|
|
Línea de producto padre
|
|
Título de la ventana emergente
|
|
Producto padre
|
|
Producto-Upsell
|
|
Precio-Producto padre
|
|
Precio de la oferta de upsell
|
|
Precio original de la oferta de upsell
|
|
Texto descriptivo
|
|
Ejemplos de personalización de ventanas emergentes
Aquí tienes algunos ejemplos de personalizaciones utilizando códigos CSS para mejorar la experiencia de upselling de tu tienda y alinearla con la marca de tu tienda.
Personaliza los botones "Añadir", "Continuar" y "No, gracias"
Este código puede cambiar el color de fondo, el color de la fuente, el color del borde y el tamaño de la fuente. Además, cambia el color de fondo al pasar por encima del botón Añadir:
.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:pasar por encima { background-color: #059e36 !important; /* button color on hover */}
Si quieres aplicar el mismo estilo a todos los botones, puedes agruparlos utilizando comas para separar cada clase.
.Botón-Añadir, .Botón-Primario, .Botón-Rechazar { 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:pasar por encima, .Botón-Primario:pasar por encima, .Botón-Rechazar:hover { background-color: #059e36 !important; /* button color on hover */}
Personaliza la línea del producto principal
Ajusta el color de fondo de la sección del producto principal.
.Línea-Producto { background-color: #D9FED9 !important; /* background color */}
Ajustes del tamaño de la fuente
Modifica el tamaño de la fuente del título de la ventana emergente, del producto principal y del producto de la venta ascendente.
.Título { font-size: 30px !important; /* font size of the headline */}.Nombre-Producto { font-size: 16px !important; /* font size of the parent product */}.Título-Oferta { font-size: 16px !important; /* font size of the upsell product */}
Cómo cambiar la fuente utilizada en la ventana emergente
Puedes personalizar aún más la ventana emergente importando una fuente personalizada y aplicándola a elementos específicos.
Primero, importa la fuente utilizando la regla @import (para cargar un CSS externo que incluya la fuente), o defínela directamente utilizando la regla @font-face. A continuación, aplica la fuente a elementos específicos utilizando la propiedad font-family.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* asignar una nueva fuente a la ventana emergente de Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}
Visión general de los selectores de clase de la ventana emergente
Aquí tienes todos los selectores de clase disponibles que puedes utilizar para personalizar la ventana emergente de Candy Rack. Estos selectores te permiten dar estilo a varios elementos, como botones y texto, ofreciéndote un mayor control sobre el aspecto de la ventana emergente.
Las ofertas incrustadas ofrecen personalización
Para ajustar el código CSS de tus upsells incrustadas en tu página de producto, ve a tu Editor de temas, accede a una página de producto, navega hasta Plantilla, abre la Configuración del bloque de app de la página de producto de Candy Rack, y desplázate hasta el final de la página para añadir el código CSS.
Para obtener más información sobre cómo activar bloques de aplicaciones para Candy Rack, lee el artículo Cómo añadir y personalizar bloques de aplicaciones para la colocación de la página Producto .
Lista de selectores
A continuación encontrarás la lista de selectores disponibles que puedes utilizar para ayudarte a empezar a dar estilo al bloque de aplicaciones de Candy Rack.
Elemento
|
Selector de clase
|
Título de la oferta
|
|
Nombre del producto
|
|
Precio original
|
|
Precio con descuento
|
|
Texto de la descripción
|
|
Texto del marcador de posición
|
|
Ejemplos de personalización del bloque de la aplicación
He aquí algunos ejemplos de personalización del bloque de la aplicación utilizando código CSS para mejorar la experiencia de upselling de tu tienda y alinearla con la marca de tu tienda.
Ajustes del tamaño de la fuente
Modifica el tamaño de la fuente del título de la Oferta y del nombre del Upsell.
.candyrack-ppp-checkbox-layout__offers--title { font-size: 30px !important; /* font size of the offer title */}.candyrack-ppp-checkbox-layout__info--product-name { font-size: 15px !important; /* font size of the upsell name */}
Personaliza los precios de los productos
Modifica el color de la fuente del precio original del producto y del precio rebajado para que el descuento sea más perceptible para los clientes.
.candyrack-ppp-checkbox-layout__info--precio-producto { color: grey !important; /* font color of the offer original price */}.candyrack-ppp-checkbox-layout__info--precio-descuento-producto { color: green !important; /* font color of the sale price */}
Personaliza el contenido del texto
Modifica los estilos de fuente de la descripción y del texto del marcador de posición. Éstos son los selectores utilizados:
.candyrack-ppp-checkbox-layout__info--offer-description { font-weight: 700 !important; /* font weight of the description text */}.candyrack-ppp-text-input { font-style: italic !important; /* font style of the placeholder text if custom note is enabled */}
Visión general de los selectores de clase del bloque de la app
Ésta es una visión general de los selectores de clase disponibles que puedes utilizar para personalizar el bloque de la app Candy Rack.
Si te interesan más opciones para desarrolladores y la API pública de Candy Rack, puedes obtener más información en el artículo API pública de Candy Rack y opciones para desarrolladores.
¿Necesitas que te 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,
El equipo de Candy Rack