Omówienie

Jeśli zależy Ci na czystszym pierwszym wrażeniu lub układ Twojej strony głównej koliduje z przyklejonym przyciskiem koszyka, możesz ukryć ten przycisk wyłącznie na stronie głównej za pomocą prostego fragmentu kodu. Ta konfiguracja sprawdza bieżącą stronę klienta i usuwa przyklejony przycisk koszyka, jeśli klient znajduje się na stronie głównej.

Kiedy tego użyć

Aby uniknąć wizualnego bałaganu na stronie głównej
Gdy używasz niestandardowej sekcji hero lub układu, który nachodzi na przyklejony koszyk
Aby przycisk koszyka był widoczny tylko na stronach produktów lub kolekcji

Krok 1: dodaj skrypt

Przejdź do Upcart > Cart Editor > Settings > Custom HTML
Z listy rozwijanej HTML Location wybierz Scripts (Before Load)
Wklej poniższy 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>

Ten skrypt sprawdza ścieżkę bieżącej strony i dodaje klasę ukrywającą przyklejony przycisk, jeśli klient znajduje się na stronie głównej.

Krok 2: dodaj niestandardowy CSS

Przejdź do Upcart > Sticky Cart > Custom CSS (pamiętaj, że chodzi o Sticky Cart, a nie Cart Editor)
Wklej poniższy CSS:

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

Efekt końcowy

Przyklejony przycisk koszyka będzie ukryty, gdy klient odwiedzi stronę główną (/ lub /[locale])
Przycisk pozostaje widoczny na wszystkich pozostałych stronach

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Ukrywanie przyklejonego przycisku koszyka na stronie głównej

Omówienie

Kiedy tego użyć

Krok 1: dodaj skrypt

Krok 2: dodaj niestandardowy CSS

Efekt końcowy

​Omówienie

​Kiedy tego użyć

​Krok 1: dodaj skrypt

​Krok 2: dodaj niestandardowy CSS

​Efekt końcowy

Omówienie

Kiedy tego użyć

Krok 1: dodaj skrypt

Krok 2: dodaj niestandardowy CSS

Efekt końcowy