⚠️ Aviso importante
Esta personalización solo funciona con la Versión 1 de los módulos del carrito de Upcart. Si actualizaste recientemente tu carrito a la Versión 2, es posible que estas personalizaciones no funcionen. Deberás usar los nuevos selectores proporcionados para la Versión 2 en la guía de migración.
Si tus personalizaciones no funcionan como esperas, puedes revertir el carrito a la Versión 1 tú mismo: en el Cart Editor, usa el menú desplegable Cart version en la parte superior del menú de la izquierda y elige V1.0 (Legacy). El menú desplegable aparece una vez que todos los módulos del carrito están en V2.
Actualmente estamos trabajando en nuevas plantillas de personalización para la Versión 2 de los módulos, y estarán disponibles pronto.
Esta personalización te permite ocultar partes específicas del carrito, como la barra de recompensas, si ciertos productos están presentes. Es útil cuando quieres simplificar la experiencia del carrito para ciertos SKU o evitar que promociones específicas aparezcan junto a ciertos artículos.
Esta configuración usa IDs de producto para detectar qué productos están en el carrito y oculta un elemento elegido si se encuentra una coincidencia. Aplicarás la lógica usando HTML y CSS personalizados en el editor de Upcart.
- Ocultar la barra de recompensas cuando hay artículos promocionales en el carrito
- Ocultar bloques de contenido personalizado, insignias de confianza o secciones de upsell según el tipo de producto
- Mantener un flujo de pago más limpio o más adaptado para artículos específicos
Este enfoque requiere conocimientos básicos de HTML y JavaScript.
Paso 1: Encuentra los IDs de producto
- Ve a Shopify Admin > Products
- Haz clic en el producto que quieres seleccionar
- Copia el ID numérico del producto desde la URL después de
/products/
Ejemplo:
Usarás estos IDs en el arreglo de JavaScript que controla la visibilidad.
Paso 2: Añade HTML personalizado
- Ve a Upcart > Cart Editor > Settings > Custom HTML
- Pega el siguiente código en ambas ubicaciones de HTML: Above announcements/rewards y On empty cart screen
- Reemplaza los valores en
productIDsToExclude con tus IDs de producto
- Actualiza
.YOUR-CLASS-HERE para apuntar al elemento del carrito que quieres ocultar (por ejemplo: .upcart-rewards, .custom-message, .trust-badge)
Nota sobre versiones anteriores: los callbacks de window.upcartOnCartLoaded siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.
Paso 3: CSS alternativo opcional
Si quieres asegurarte de que el elemento esté oculto antes de que el carrito se cargue por completo, añade esto en la sección Custom CSS:
Nota: esto puede ocultar temporalmente el elemento para todos los usuarios hasta que se ejecute JavaScript, lo que puede causar parpadeo. En la mayoría de los casos, es mejor confiar en el método de JavaScript.
Una vez configurado:
- El elemento del carrito seleccionado (como la barra de recompensas) se ocultará si el carrito contiene uno de los productos especificados
- El elemento permanece visible en caso contrario
- Puedes reutilizar esta lógica para ocultar o mostrar diferentes elementos según reglas específicas de producto
¿Todavía necesitas ayuda?
Para personalizaciones más complejas, te recomendamos trabajar con un Shopify Expert. Pueden ayudarte con HTML, CSS y JavaScript dentro del cajón de tu carrito.
Ver Shopify Experts