Dokumentacja aplikacji Shopify
Wszystko, czego potrzebujesz, aby skonfigurować i dostosować konwersję walut w sklepie Shopify
Spis treści
1 Instalacja
Instalacja z Shopify App Store
- Odwiedź stronę aplikacji Currency.Wiki w Shopify App Store
- Kliknij 'Dodaj aplikację' i autoryzuj instalację
- Aplikacja otworzy się i przeprowadzi Cię przez kreatora konfiguracji
- Ukończ kreatora, aby rozpocząć przeliczanie cen
Wskazówka: Kreator konfiguracji trwa około 2 minut i przeprowadzi Cię przez każdy krok.
2 Kreator konfiguracji
Kreator konfiguracji pomaga poprawnie skonfigurować aplikację. Przeprowadzi Cię przez aktualizację formatu waluty i włączenie osadzenia aplikacji.
Krok 1: Powitanie
Sprawdź, co obejmuje proces konfiguracji i kliknij 'Zaczynamy'.
Krok 2: Aktualizacja formatu waluty
Przejdź do Shopify Admin → Ustawienia → Ogólne → Domyślne sklepu. Znajdź swoją walutę i kliknij menu z trzema kropkami → 'Zmień formatowanie waluty'. Zaktualizuj pola HTML naszą klasą wrapper:
HTML z walutą:
<span class="cwiki">${{amount}} USD</span>
HTML bez waluty:
<span class="cwiki">${{amount}}</span>
Ważne: Klasa wrapper cwiki jest niezbędna. Informuje aplikację, które elementy na stronie to ceny, dzięki czemu przeliczamy tylko rzeczywiste ceny, a nie np. numery telefonów czy ID zamówień.
Krok 3: Włącz osadzenie aplikacji
Włącz aplikację w sekcji App Embeds motywu:
- Przejdź do Sklep online → Motywy → Dostosuj
- Wyszukaj 'App embeds' w lewym panelu
- Znajdź 'Currency.Wiki App' i przełącz na WŁ.
- Kliknij Zapisz w edytorze motywu
Krok 4: Weryfikacja konfiguracji
Kliknij 'Skanuj mój sklep', aby zweryfikować poprawność konfiguracji. Kreator sprawdzi obecność klasy cwiki i osadzenia aplikacji. Jeśli wszystko jest OK, możesz działać!
3 Style widgetu
Wybierz spośród 6 stylów widgetu, aby dopasować go do wyglądu sklepu. Każdy styl można dostosować do kolorów marki.
Minimalna lista rozwijana
Kompaktowa integracja z nagłówkiem z prostą listą rozwijaną. Najlepsza do prawego górnego rogu.
Pływająca pigułka
Przycisk pływający przyjazny dla urządzeń mobilnych z panelem rozwijanym. Świetny dla sklepów mobilnych. Pozycjonowany w rogach.
Wysuwany panel boczny
Panel wysuwany na całą wysokość z wyszukiwarką. Idealny dla sklepów z wieloma walutami.
Wyskakujące okno modalne
Wyśrodkowana nakładka z układem siatki. Skupia uwagę na wyborze waluty.
Przełącznik kart w linii
Poziome karty dla popularnych walut. Szybkie przełączanie bez menu.
Odznaka w rogu
Minimalistyczna ikona w rogu, która rozwija się po kliknięciu. Najmniej inwazyjna dla czystych projektów.
Wskazówka: Użyj strony ustawień widgetu w panelu aplikacji, aby zobaczyć podgląd wszystkich stylów z kolorami Twojego sklepu.
4 Panel administracyjny
Panel administracyjny daje pełną kontrolę nad działaniem konwersji walut w sklepie.
Strona główna panelu
Włącz/wyłącz widget, przeglądaj statystyki konwersji i zobacz podgląd widgetu na żywo.
Ustawienia widgetu
Wybierz styl widgetu, pozycję, kolory, rozmiar, promień zaokrąglenia i opcje flag.
Zarządzanie walutami
Włączaj/wyłączaj waluty, zmieniaj kolejność, konfiguruj automatyczne wykrywanie i ustaw preferencje kursów.
Analityka
Przeglądaj wykresy konwersji, zobacz najczęściej używane waluty i rozkład klientów międzynarodowych.
Motyw i wygląd
Wybierz tryb motywu (auto, jasny, ciemny, własny), ustaw kolory, włącz efekty glassmorphism i skonfiguruj zachowanie trybu ciemnego.
Komunikat przy kasie
Włącz komunikat na stronach koszyka/kasy, informujący o walucie rozliczeniowej.
5 Ustawienia zaawansowane
Ustawienia zaawansowane dają użytkownikom Pro większą kontrolę nad formatowaniem cen i zachowaniem konwersji.
Formatowanie cen (Pro)
- Miejsca po przecinku - Kontroluj liczbę miejsc po przecinku (0-6).
- Format liczby - Wybierz styl formatu (Auto, US, EU, Indyjski, Spacja•Kropka, Spacja•Przecinek).
- Pozycja symbolu - Umieść symbol waluty przed lub po kwocie, lub automatycznie według waluty.
- Zaokrąglanie - Standardowe, zawsze w górę, zawsze w dół lub bez zaokrąglania. Opcja zaokrąglenia do najbliższej .99.
Integracja z motywem (Pro)
Ręcznie osadź widget lub komunikat koszyka w dowolnym miejscu motywu za pomocą tych fragmentów HTML:
Osadzenie widgetu (dodaj do header.liquid lub dowolnej sekcji):
<div class="cwiki-widget"></div>
Osadzenie komunikatu koszyka (dodaj do cart.liquid):
<div class="cwiki-banner"></div>
Opcje deweloperskie (Pro)
- Nadpisania stylów - Wstrzyknij własny CSS, aby dostosować wygląd widgetu.
- Nasłuchiwacze kliknięć - Ponownie przelicz ceny po kliknięciu wybranych elementów (np. wybór rozmiaru, opcji produktu).
- Dodatkowe elementy cenowe - Wskaż dodatkowe elementy cenowe poza domyślnym wrapperem .cwiki.
- Wzorce URL - Ponownie skanuj ceny, gdy adres URL zawiera określone ciągi (dla treści AJAX, nieskończonego przewijania).
- Opóźnienie konwersji - Odczekaj przed przeliczeniem cen (dla treści ładujących się po gotowości strony).
Uwaga: Te opcje są dla zaawansowanych użytkowników. Przetestuj na motywie podglądowym przed publikacją.
6 Rozwiązywanie problemów
Ceny się nie przeliczają?
Upewnij się, że klasa wrapper cwiki jest w ustawieniach formatu waluty. Przejdź do Ustawienia → Ogólne → Domyślne sklepu i sprawdź formatowanie HTML. Zweryfikuj też, czy osadzenie aplikacji jest włączone w edytorze motywu.
Widget się nie wyświetla?
Sprawdź, czy osadzenie aplikacji jest włączone w sekcji App Embeds motywu. Otwórz edytor motywu, znajdź App Embeds i upewnij się, że Currency.Wiki jest włączone. Zapisz i odśwież sklep.
Ceny migoczą przy ładowaniu?
Nasza aplikacja została zaprojektowana bez migotania. Jeśli widzisz migotanie, sprawdź, czy nie masz wtyczek cache, które mogą zakłócać działanie. Upewnij się też, że osadzenie aplikacji ładuje się w sekcji head motywu.
Wykrywana jest zła waluta?
Wykrywanie geolokalizacji opiera się na adresie IP odwiedzającego. VPN lub sieci firmowe mogą wpływać na wykrywanie. Odwiedzający zawsze mogą ręcznie wybrać preferowaną walutę. Możesz też ustawić domyślną walutę zapasową w ustawieniach.
Widget nie pasuje do mojego motywu?
Użyj ustawień Motyw i wygląd, aby dostosować kolory lub włącz tryb Auto, aby automatycznie wykrywać kolory motywu. Możesz też użyć własnego CSS w ustawieniach zaawansowanych.
Potrzebujesz pomocy?
Nasz zespół wsparcia jest gotowy pomóc w każdej kwestii związanej z konfiguracją.
