⚠️ 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.

Resumen

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.

Cuándo usar esto

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:

/products/1234567890 → 1234567890

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)

<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>

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:

.YOUR-CLASS-HERE {   display: none; }

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.

Resultado final

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

Referencia de funciones del carrito

Referencia de CSS

Recetas de estilo

Recetas de funcionalidad

Plantillas personalizadas

API pública de Upcart

Ocultar elementos específicos del carrito usando IDs de producto

Resumen

Cuándo usar esto

Paso 1: Encuentra los IDs de producto

Paso 2: Añade HTML personalizado

Paso 3: CSS alternativo opcional

Resultado final

¿Todavía necesitas ayuda?

​Resumen

​Cuándo usar esto

​Paso 1: Encuentra los IDs de producto

​Paso 2: Añade HTML personalizado

​Paso 3: CSS alternativo opcional

​Resultado final

​¿Todavía necesitas ayuda?

Resumen

Cuándo usar esto

Paso 1: Encuentra los IDs de producto

Paso 2: Añade HTML personalizado

Paso 3: CSS alternativo opcional

Resultado final

¿Todavía necesitas ayuda?