Visão geral

Se você quer uma primeira impressão mais limpa ou o layout da sua página inicial conflita com o botão fixo do carrinho, você pode ocultar o botão especificamente na página inicial usando um trecho de código simples. Essa configuração verifica a página atual do cliente e remove o botão fixo do carrinho se ele estiver na página inicial.

Quando usar isto

Para evitar poluição visual na sua página inicial
Ao usar uma seção hero ou layout personalizado que se sobrepõe ao carrinho fixo
Para manter o botão do carrinho focado em páginas de produto ou coleções

Passo 1: Adicione o script

Vá para Upcart > Cart Editor > Settings > Custom HTML
No menu suspenso HTML Location, selecione Scripts (Before Load)
Cole o seguinte JavaScript:

<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>

Esse script verifica o caminho da página atual e aplica uma classe para ocultar o botão fixo se o cliente estiver na página inicial.

Passo 2: Adicione CSS personalizado

Vá para Upcart > Sticky Cart > Custom CSS (observe que isto é no Sticky Cart, não no Cart Editor)
Cole o seguinte CSS:

.hide-sticky-cart-button {     
  display: none;   
}

Resultado final

O botão fixo do carrinho ficará oculto quando um cliente visitar a página inicial (/ ou /[locale])
O botão permanece visível em todas as outras páginas

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

Ocultar o botão fixo do carrinho na página inicial

Visão geral

Quando usar isto

Passo 1: Adicione o script

Passo 2: Adicione CSS personalizado

Resultado final

​Visão geral

​Quando usar isto

​Passo 1: Adicione o script

​Passo 2: Adicione CSS personalizado

​Resultado final

Visão geral

Quando usar isto

Passo 1: Adicione o script

Passo 2: Adicione CSS personalizado

Resultado final