Resumen

Si solo ofreces recompensas en ciertas regiones, puedes ocultar la barra de recompensas a los clientes de países específicos usando una combinación de JavaScript y CSS. Esto ayuda a mantener tu carrito limpio y relevante para los compradores según desde dónde estén navegando. Nota: Incluso cuando está oculta, la lógica de recompensas sigue ejecutándose en segundo plano. Por ejemplo, un regalo gratis aún puede añadirse al carrito si se cumplen las condiciones, aunque la barra no sea visible.

Paso 1: Encuentra los códigos de los países objetivo

Deberás definir qué países deben ver la barra de recompensas. Para encontrar los códigos, consulta la lista de Shopify de códigos de país ISO de 2 letras. Ejemplos:

US → Estados Unidos
CA → Canadá
MX → México

Paso 2: Añade HTML personalizado

Ve a Upcart > Cart Editor > Settings > Custom HTML
Pega el siguiente código en ambas de estas ubicaciones:
- Above announcements/rewards
- On empty cart

Reemplaza "US" con el código o los códigos de país que desees.

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Nota sobre versiones anteriores: los callbacks de window.upcartOnCartOpened y window.upcartOnCartLoaded siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartOpened y upcartSubscribeCartLoaded para todos los scripts nuevos.

Código alternativo para la versión Rewards V2.0

Si has actualizado tus recompensas a la versión V2, el código es ligeramente diferente, ya que el selector de recompensas se reemplaza por el nuevo selector .upcart-public-rewards. Usa el código de abajo si has actualizado tu módulo de recompensas por niveles

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-public-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Para admitir múltiples países, ajusta la condición así:

if (["US", "CA", "GB"].includes(country)) {

Paso 3: Añade CSS personalizado

Ve a Upcart > Cart Editor > Settings > Custom CSS
Pega este código para controlar la visibilidad:

.hide {  
  display: none;   
}

Resultado final

Los clientes de los países excluidos no verán la barra de recompensas en su carrito, aunque la lógica de recompensas siga funcionando en segundo plano. Usa este método si:

Solo ofreces recompensas en mercados seleccionados
Quieres evitar mostrar promociones no aplicables
Necesitas una solución temporal antes de configurar una lógica adecuada basada en regiones

¿Necesitas ayuda?

Para lógica regional avanzada o soporte de JavaScript, te recomendamos trabajar con un Shopify Expert. El soporte de Upcart no ayuda a escribir ni depurar código personalizado. Ver Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Ocultar la barra de recompensas para países específicos

Resumen

Paso 1: Encuentra los códigos de los países objetivo

Paso 2: Añade HTML personalizado

Código alternativo para la versión Rewards V2.0

Paso 3: Añade CSS personalizado

Resultado final

¿Necesitas ayuda?

​Resumen

​Paso 1: Encuentra los códigos de los países objetivo

​Paso 2: Añade HTML personalizado

​Código alternativo para la versión Rewards V2.0

​Paso 3: Añade CSS personalizado

​Resultado final

​¿Necesitas ayuda?

Resumen

Paso 1: Encuentra los códigos de los países objetivo

Paso 2: Añade HTML personalizado

Código alternativo para la versión Rewards V2.0

Paso 3: Añade CSS personalizado

Resultado final

¿Necesitas ayuda?