ℹ️ Note: Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia.

Hoppy Free Shipping oferuje dwa podstawowe typy miejsc dla Free Shipping Bar:

• 📌 Domyślne miejsca
• 🧩 Niestandardowe miejsca

W większości przypadków domyślne obszary lokowania działają doskonale.

Jednakże, czasami kupcy mogą chcieć większej elastyczności i wolą umieścić bar Free Shipping w całkowicie niestandardowych miejscach w zależności od ich układu sklepowego.

To dokładnie tam gdzie Niestandardowe położenie funkcja staje się użyteczna ✨

Korzystając z pozycji Custom, bar Free Shipping może być umieszczony:

• Wewnątrz Shopify Bloki aplikacji
• Wewnętrzne sekcje cieczowe
• Pliki motywu wewnątrz
• Wnętrze ręcznie sterowane lokalizacje sklepowe

Dokumentacja ta wyjaśnia, w jaki sposób prawidłowo włączyć pozycję Custom oraz jak umieścić bar Free Shipping przy użyciu obu dostępnych metod.

⚠️ Zrozumienie różnic w przepływie pracy

Zachowanie Custom position zależy od wybranego typu przepływu pracy podczas tworzenia konfiguracji Free Shipping Upsell.

🎯 W oparciu o cele (rozłożenie)

W W oparciu o cele przepływ pracy obejmuje wiele obszarów lokowania:

• Strona produktu
• Drawer w koszyku
• Strona koszyka
• Banner

Dla tego przepływu pracy:

→ Otwórz zakładkę umieszczenia, którą chcesz dostosować
→ Zmień jego umieszczenie na Niestandardowe położenie

Po włączeniu:

→ A Snippet Bar Shipping staje się dostępny

⚠️ Ważne:

Karta umieszczania musi być faktycznie zmieniona na Niestandardowe położenie.

W przeciwnym razie, Free Shipping Bar będzie nadal korzystać z domyślnego zachowania location.

📍 Na podstawie miejsca (pojedyncze miejsce)

W Na podstawie miejsca steruje przepływem pracy tylko w jednym miejscu.

Dla tego przepływu pracy dostępne są dwie metody Custom Position:

1. 🆔 Identyfikator baru wysyłki
2. 🧩 Snippet Bar Shipping

🆔 Identyfikator baru wysyłki

Metoda ta jest stosowana głównie z Shopify Bloki aplikacji.

Identyfikator Shipping Bar łączy blok aplikacji sklepowej z wybraną konfiguracją Free Shipping.

🧩 Snippet Bar Shipping

Metoda ta zapewnia bardziej zaawansowaną elastyczność umieszczenia.

Kod może brzmieć:

• Dodano wewnątrz własnego bloku cieczy
• Dodano bezpośrednio do Shopify Pliki motywu

🛠️ Krok 1 - Otwórz Hoppy Free Shipping

Otwórz Hoppy Free Shipping aplikacja z Twojego Shopify Admin.

📂 Krok 2 - Otwórz lub utwórz darmową aktualizację wysyłek

Możesz albo:

→ Otwórz istniejącą konfigurację Free Shipping Upsell
→ Lub utworzyć nową konfigurację

⚙️ Krok 3 - Przejdź do ustawień rozmieszczenia

Następny krok zależy od aktualnie stosowanego typu przepływu pracy.

🎯 W oparciu o docelowy przepływ pracy

Jeśli pacjent stosuje W oparciu o cele przepływ pracy:

→ Otwórz zakładkę umieszczania, gdzie chcesz ręcznie umieścić bar Free Shipping

Przykłady:

• Strona produktu
• Drawer w koszyku
• Strona koszyka
• Banner

📍 W oparciu o przepływ pracy w miejscu pracy

Jeśli pacjent stosuje Na podstawie miejsca przepływ pracy:

→ Przejdź bezpośrednio do Umieszczenie tab

Ponieważ ten przepływ pracy steruje tylko jednym położeniem, wszystkie ustawienia związane z ustawieniami są tam wyświetlane.

🎯 Krok 4 - zmiana położenia na niestandardowe położenie

Wnętrze ustawień umieszczenia:

→ Zmień Wyświetlacz włączony (załącz) lub Umieszczenie opcja:

Niestandardowe położenie

Następnie:

→ Kliknij Zapisz

⚠️ Ważne:

Włączenie pozycji Custom usuwa pasek Free Shipping z domyślnych obszarów lokowania.

Free Shipping Bar pojawi się teraz tylko tam, gdzie ręcznie umieścić go.

ℹ️ Zastosowanie W oparciu o cele Workflow, przejdź do Metoda 2.

🆔 Metoda 1 - Używanie identyfikatora baru wysyłkowego

Ta metoda jest idealna, gdy chcesz umieścić Bar Free Shipping bezpośrednio przy użyciu ShopifyEdytor motywów.

ℹ️ Metoda ta jest dostępna głównie dla Na podstawie miejsca przepływ pracy.

🎨 Krok 5 - Otwórz Shopify Edytor motywów

Od Shopify Admin:

→ Przejdź do Kanały sprzedaży → Sklep internetowy
→ Kliknij Edytuj motyw

To otwiera Shopify Edytor motywów.

➕ Krok 6 - Dodaj bezpłatny blok aplikacji wysyłka

Wnętrze edytora motywu:

→ Przejdź do sekcji, w której chcesz, aby pojawi się Bar Free Shipping
→ Zawisać wokół kompatybilnych odcinków aż do koloru niebieskiego ➕ Pojawia się ikona
→ Kliknij Dodaj blok

Następnie:

→ Otwórz Aplikacje kategoria
→ Wybierz Darmowa wysyłka upsell

Blok aplikacji zostanie dodany do wybranego obszaru.

🔗 Krok 7 - Dodaj identyfikator paska żeglugowego

Po dodaniu bloku aplikacji:

→ Wprowadź identyfikator paska wysyłkowego wewnątrz ustawień bloku aplikacji

Następnie:

→ Zapisz Shopify Motyw
→ Zapisz konfigurację Free Shipping wewnątrz Hoppy Free Shipping także

⚠️ Ważne:

Oba oszczędności są wymagane.

W przeciwnym razie, Free Shipping Bar może nie pojawić się poprawnie w sklepie.

🧩 Metoda 2 - Używanie kodu kreskowego wysyłki

Metoda ta jest przydatna, gdy chcesz bardziej zaawansowanej elastyczności umieszczania.

Snippet Shipping Bar może być:

• Dodano używając niestandardowego bloku cieczy
• Dodano bezpośrednio do Shopify Pliki motywu

ℹ️ Jest to jedyna dostępna metoda pozycji użytkownika dla W oparciu o cele przepływ pracy.

➕ Krok 8 - Dodaj niestandardowy blok cieczy

Wewnątrz Shopify Edytor motywów:

→ Przejdź do obszaru, w którym chcesz, aby pojawi się Bar Free Shipping
→ Zawisać wokół kompatybilnych odcinków aż do koloru niebieskiego ➕ Pojawia się ikona
→ Szukaj Własny płyn

Następnie:

→ Dodaj Snippet Pasek Wysyłka wewnątrz Custom Liquid Block

Pozwala to Pasek Free Shipping na renderowanie w wybranej pozycji sklepu.

💻 Dodawanie kodu Snippet bezpośrednio do plików tematycznych

W razie potrzeby, Snippet Bar Shipping można również dodać bezpośrednio do Shopify Pliki kodu motywu.

Jest to przydatne, gdy:

• Bloki aplikacji są niedostępne
• Niestandardowe sekcje cieczy nie są obsługiwane
• Zaawansowana personalizacja sklepu jest potrzebna

⚙️ Otwarcie Shopify Edytor kodów

Aby otworzyć Shopify Edytor kodu:

→ Przejdź do Kanały sprzedaży → Sklep internetowy
→ Kliknij 3 kropki obok menu Edytuj motyw przycisk
→ Kliknij Edytuj kod

⚠️ Ważne:

Nie zalecamy modyfikacji Shopify Pliki motywu, chyba że:

• Jesteś wygodny w pracy z Shopify kod
• Albo rozumiesz, co się zmienia.

Nieprawidłowe modyfikacje wewnątrz Pliki tematyczne mogą wpływać na zachowanie sklepu.

🧩 Identyfikacja właściwego obszaru magazynowego

Przed włożeniem Snippet Paska Żeglugi ważne jest, aby określić dokładną lokalizację sklepu, gdzie powinien pojawić się Bar Free Shipping.

Jeden prosty sposób:

→ Otwórz swój sklep w przeglądarce
→ Kliknij prawym przyciskiem myszy w pobliżu obszaru, w którym chcesz Free Shipping Bar
→ Kliknij Kontrola

Otwiera przeglądarkę Developer Tools.

Stamtąd:

→ Sprawdź otaczającą strukturę HTML
→ Identyfikacja użytecznych nazw klas lub odniesień do sekcji
→ Dopasuj te sekcje do odpowiednich Shopify .liquid pliki w edytorze kodów

Pomaga to dokładniej zlokalizować właściwy plik motywu ✨

-

🔍 Znalezienie poprawnego pliku motywu

Po otwarciu Shopify Edytor kodu:

→ Przejdź przez pliki tematyczne po lewej stronie
→ Zlokalizować .liquid plik odpowiedzialny za obszar, w którym chcesz, aby pojawi się Bar Free Shipping
→ Wyszukaj wszelkie referencje id / class za pomocą funkcji wyszukiwania edytora kodu.
→ Kliknij na najbardziej obiecujące .liquid plik

Na przykład:

• W ramach:
• • main-product.liquid
  • product-template.liquid
• W:
• • cart.liquid
  • cart-drawer.liquid
• Niestandardowe sekcje mogą istnieć wewnątrz:
• • sections/*.liquid

➕ Dodaj kod paska wysyłki

Po poprawnym .liquid plik został zidentyfikowany:

→ Wklej Snippet Paska wysyłki w żądanej pozycji wewnątrz pliku

⚠️ Ważne:

Upewnij się, że fragment jest dodany ostrożnie w odpowiedniej lokalizacji.

Nieprawidłowe umieszczenie może spowodować:

• Kwestie dotyczące układu
• Niewłaściwe renderowanie
• Nieoczekiwane zachowanie w sklepie

💾 Zapisz plik motywu

Po umieszczeniu kodu:

→ Kliknij Zapisz

Następnie:

→ Odśwież podgląd sklepu
→ Sprawdzić, czy pasek Free Shipping pojawia się poprawnie w wybranej lokalizacji ✨

🎉 Wynik końcowy

Po skonfigurowaniu:

✅ Bar Free Shipping może pojawić się w całkowicie niestandardowych pozycjach
✅ Shopify Bloki aplikacji mogą poprawnie połączyć się za pomocą identyfikatora Shipping Bar
✅ Zaawansowane umieszczanie w sklepach staje się możliwe za pomocą Code Snippets
✅ Kupcy zyskują znacznie większą elastyczność w stosunku do widoczności w sklepach ✨

Aktualizowane na: 10/09/2026