El carrito deslizante de Candy Rack viene con un diseño predeterminado limpio que funciona de inmediato tras la instalación. Si quieres hacer que su aspecto y el de tu tienda coincidan exactamente, puedes apuntar a cualquier elemento usando CSS.

A continuación encontrarás la lista completa de clases disponibles, ejemplos prácticos para comenzar y algunos consejos para asegurarte de que tus estilos se apliquen de forma fiable.

Para añadir tu CSS, ve a carrito deslizante > Diseño en el menú de la app Candy Rack, encuentra la sección CSS personalizado y pega ahí tu código.

Lista de selectores

Estos son los selectores de clases estables que puedes usar para estilizar el carrito deslizante. Siguen un patrón de nomenclatura consistente candyrack-slider-cart-*, por lo que no se romperán con las actualizaciones de la app.

Elemento	Selector de clase
Contenedor del carrito	`#candyrack-slider-cart`
Título del carrito («Carrito (1)»)	`.candyrack-slider-cart-header-title`
Botón de cerrar (×)	`.candyrack-slider-cart-close-button`
Barra de recompensa (progreso envío gratis)	`.candyrack-slider-cart-reward-bar`
Contenedor de artículo del carrito	`.candyrack-slider-cart-item-container`
Nombre del producto del artículo	`.candyrack-slider-cart-item-product-details-title`
Precio actual del artículo	`.candyrack-slider-cart-item-product-details-price`
Precio original (tachado) del artículo	`.candyrack-slider-cart-item-product-details-discounted-price`
Badge de código de descuento en el artículo	`.candyrack-slider-cart-item-product-details-discount`
Botón de eliminar artículo	`.candyrack-slider-cart-item-product-details-remove-button`
Botón disminuir cantidad	`.candyrack-slider-cart-item-product-details-quantity-button-minus`
Botón aumentar cantidad	`.candyrack-slider-cart-item-product-details-quantity-button-plus`
Título de la sección de ofertas upsell	`.candyrack-slider-cart-offers-title`
Tarjeta de oferta upsell	`.candyrack-slider-cart-offer-item-wrapper`
Nombre del producto de la oferta	`.candyrack-slider-cart-offer-item-header`
Badge de oferta («AHORRA 20%», «RECOMENDADO»)	`.candyrack-slider-cart-offer-item-badge`
Precio de la oferta	`.candyrack-slider-cart-offer-price`
Botón «Añadir» de la oferta	`.candyrack-slider-cart-offer-item-add-button`
Etiqueta del subtotal	`.candyrack-slider-cart-footer-subtotal-label`
Importe del subtotal	`.candyrack-slider-cart-footer-subtotal-price`
Botón de pago	`.candyrack-slider-cart-footer-checkout-button`

Ejemplos de personalización

Aquí tienes algunos ejemplos de uso de CSS para mejorar tu slide cart y alinearlo con el branding de tu tienda.

Botón de checkout

Cambia el color de fondo, el color del texto y el radio del borde del botón de pago para que coincida con el estilo CTA de tu tienda. También puedes definir un estado al pasar el ratón:

.candyrack-slider-cart-footer-checkout-button {
  background-color: #1a1a1a !important; /* fondo del botón */
  color: #ffffff !important;            /* color del texto */
  border-radius: 4px !important;        /* radio de las esquinas */
  font-size: 16px !important;
}

.candyrack-slider-cart-footer-checkout-button:hover {
  background-color: #333333 !important;
}

Botón de "agregar"

Personaliza el diseño de los botones para añadir ofertas de venta adicional independientemente del botón de checkout.

.candyrack-slider-cart-offer-item-add-button {
  background-color: #ff5024 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

.candyrack-slider-cart-offer-item-add-button:hover {
  background-color: #cc4020 !important;
}

Badges de las ofertas

Personaliza los badges «AHORRA X%» y «RECOMENDADO» para adaptarlos a tu marca:

.candyrack-slider-cart-offer-item-badge {
  background-color: #000000 !important; /* fondo del badge */
  color: #ffffff !important;            /* color del texto del badge */
  border-radius: 3px !important;
}

Título de la sección de ofertas

Cambia el tamaño o el peso de la fuente del encabezado «Añadir artículos comprados juntos frecuentemente»:

.candyrack-slider-cart-offers-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

Barra de recompensa

Ajusta el color de relleno, el fondo y el color del texto de la barra de recompensa para que coincidan con el acento de tu marca. La barra de recompensa usa propiedades CSS personalizadas, por lo que no es necesario !important:

.candyrack-slider-cart-reward-bar {
  --cr-slider-cart-reward-bar-progress-fill-color: #000000;
  --cr-slider-cart-reward-bar-bg-color: #f9f9f9;
  --cr-slider-cart-reward-bar-text-color: #1a1a1a;
}

Fuente personalizada

Importa una fuente de Google y aplícala a todo el slide cart:

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

#candyrack-slider-cart {
  font-family: 'Inter', sans-serif !important;
}

Cosas que debes saber

El carrito deslizante se renderiza directamente en la página de tu tienda, a diferencia del pop-up, no está dentro de un iframe. Esto significa que las variables CSS globales y las fuentes de tu tema pueden ya transferirse automáticamente. Compruébalo en las herramientas de desarrollo de tu navegador antes de añadir estilos duplicados.

La mayoría de las reglas personalizadas necesitarán !important para sobrescribir los estilos integrados del slide cart.

¿Necesitas ayuda? Contáctanos a través del chat en la app, estaremos encantados de echarle un vistazo.

Personalización CSS del carrito deslizante