Rozwiązywanie problemów z szablonem sklepu online

Istnieje wiele różnych sytuacji, które mogą spowodować, że Twój szablon nie będzie wyświetlany zgodnie z oczekiwaniami, powodując znikanie lub nieprawidłowe działanie niektórych elementów i różne problemy z wyświetlaniem. Może to być spowodowane konfliktem kodu aplikacji lub kodu firmy zewnętrznej z danym szablonem lub niestandardowymi dostosowaniami kodu. Mogą również istnieć ustawienia w panelu administracyjnym Shopify, które wymagają dostosowania. Może być na przykład konieczne sprawdzenie przetłumaczonych treści, produktów, kolekcji, menu lub rynków.

Jeśli po przejrzeniu kroków opisanych w tym przewodniku nadal masz problemy z szablonem, może być konieczne skontaktowanie się z zespołem pomocy technicznej w zakresie Twojego szablonu. Dowiedz się więcej o uzyskiwaniu pomocy technicznej dla szablonów.

Znajdź źródło problemu

Lokalizowanie źródła problemu w swoim szablonie to pierwszy krok do jego naprawy. Spróbuj podjąć następujące kroki, aby znaleźć źródło problemu:

1. Możesz odwiedzić stronę statusu Shopify, aby zapoznać się ze znanymi problemami, które mogą mieć wpływ na Twoją witrynę sklepu. Jeśli nie opisano na niej podobnego problemu, możesz zbadać go dokładniej.

2. Problem może dotyczyć tylko Twojego urządzenia. Lokalne problemy są zazwyczaj wynikiem ustawień urządzenia lub przeglądarki lub problemów z połączeniem z Internetem. Wypróbuj poniższe kroki, aby upewnić się, że nie chodzi o problem lokalny i można go odtworzyć na innych urządzeniach, z innymi przeglądarkami lub w przypadku innych połączeń internetowych:

   • Wyczyść pamięć podręczną przeglądarki i pliki cookie. Jeśli jesteś zalogowany(-a) do Centrum Pomocy Shopify przy użyciu konta Shopify, wyczyszczenie pamięci podręcznej i plików cookie w przeglądarce spowoduje automatyczne wylogowanie z konta. Jeśli korzystasz z wirtualnego asystenta Centrum pomocy, wyczyszczenie pamięci podręcznej przeglądarki i plików cookie powoduje zresetowanie historii czatu i wylogowanie Cię z konta. Musisz rozpocząć nowy czat z wirtualnym asystentem Centrum pomocy.
   • Wypróbuj tryb incognito, inne urządzenie lub aplikację Shopify.
   • Spróbuj użyć danych mobilnych lub innego połączenia z Internetem.
   • Upewnij się, że Twoja przeglądarka jest aktualna.
   • Upewnij się, że przeglądarka nie jest ustawiona na blokowanie wszystkich plików cookie, ponieważ niektóre aplikacje mogą nie wyświetlać się poprawnie bez plików cookie.
   • Upewnij się, że nie korzystasz z wirtualnej sieci prywatnej (VPN) i nie masz aktywowanej zapory sieciowej, która blokuje Shopify.

3. Jeśli problem nadal występuje na innych urządzeniach, przeglądarkach lub przy wykorzystaniu innych połączeń z Internetem, oznacza to, że nie jest to problem lokalny i można go odtworzyć. Odtworzenie problemu w innym szablonie to kolejny krok w lokalizowaniu źródła problemu. Odwiedź Theme Store i zainstaluj nową wersję szablonu oraz sprawdź, czy problem nadal występuje w najnowszej wersji tego szablonu. Dobrą praktyką jest również instalacja innego szablonu, np. darmowego szablonu Shopify, ponieważ pozwala to ustalić, czy problem jest spowodowany tym specyficznym szablonem, czy też ten sam problem występuje we wszystkich szablonach. Po przetestowaniu innych szablonów warto podjąć następujące kroki, w zależności od tego, jak przedstawia się problem:

   • Jeśli problem występuje tylko w aktualnym szablonie oraz zaktualizowanej i niedostosowanej wersji tego szablonu, może być konieczne uzyskania pomocy technicznej w zakresie szablonu.
   • Jeśli Twój problem dotyczy tylko bieżącego szablonu, możliwe, że istnieje kod szablonu, który go powoduje. Jeśli niedawno zaktualizowałeś(-aś) swój kod szablonu, możesz wrócić do starszej wersji kodu swojego szablonu. Jeśli nie zmodyfikowano kodu szablonu, możesz przejrzeć ustawienia swojego szablonu. Na przykład, jeśli przycisk Dodaj do koszyka nie jest wyświetlany, sprawdź kolory przycisków w ustawieniach szablonu i upewnij się, że są one różne i kontrastujące.
   • Jeśli problem występuje we wszystkich szablonach, może to być spowodowane ustawieniami panelu administracyjnego Shopify, aplikacjami lub innymi problemami.

4. Problem może pochodzić z aplikacji. Jeśli niedawno zainstalowałeś(-aś) lub zaktualizowałeś(-aś) jakieś aplikacje, które wpływają na Twoją witrynę sklepu, możesz tymczasowo odinstalować aplikację. Jeśli problem nie występuje po odinstalowaniu aplikacji, możesz skontaktować się z zespołem pomocy technicznej programisty aplikacji, aby uzyskać pomoc w poprawnym wyświetlaniu w witrynie sklepu. Dowiedz się więcej o uzyskiwaniu pomocy w zakresie Twoich aplikacji. Jeśli problem nadal występuje po odinstalowaniu aplikacji, oznacza to, że aplikacja nie jest jego źródłem.

Obrazy nie wyświetlają się poprawnie

Obrazy mogą być wyświetlane inaczej niż oczekiwano, ale może to być spowodowane faktem, że sam obraz nie jest kompatybilny z tym, do czego używasz obrazu w swoim szablonie. Upewnij się, że wymiary obrazu są właściwe. Przejrzyj poniższą listę częstych problemów z wyświetlaniem, które mogą wystąpić podczas przesyłania niekompatybilnego obrazu:

• Jeśli nagłówek wyświetla się większy, a obraz logo mniejszy niż się spodziewasz, może to być spowodowane znakami odstępu w pliku obrazu logo. Znaki odstępu w pliku obrazu logo mogą powodować, że logo będzie wyświetlane w mniejszym rozmiarze, a nagłówek może być wyświetlany w większym rozmiarze z powodu tych znaków. Edytuj plik obrazu, aby upewnić się, że jest on przycięty wokół logo i nie ma znaków odstępu.
• Jeśli obraz pokazu slajdów jest przycinany, ma to na celu zapewnienie, aby obrazy wyświetlały się tak samo na urządzeniach mobilnych i na komputerach. Ponieważ zawartość jest znacznie mniejsza na ekranie urządzenia mobilnego, istnieje wiele szczegółów, które można zgubić, zmniejszając zawartość. Zamiast tego zawartość jest przycinana, aby zabezpieczyć szczegóły przed utratą. Obraz o orientacji pionowej, który jest wyższy niż szerszy, może również zająć znaczącą ilość miejsca na ekranie. Z tego względu obrazy pokazu slajdów mają maksymalną wysokość. Możesz dodać punkt centralny do obrazów pokazu slajdów, aby mieć pewność, że punkt centralny jest zawsze w środku obrazu pokazu slajdów. Jeśli dodanie punktu centralnego nie pomaga, możesz spróbować znaleźć obraz, który działa w przypadku wszystkich wielkości ekranu. Dowiedz się więcej o najlepszych praktykach dotyczących pokazów slajdów.
• Jeśli obraz GIF nie jest wyświetlany poprawnie i został dodany do witryny sklepu za pomocą edytora tekstu sformatowanego, takiego jak w opisie produktu lub w poście na blogu, może to być spowodowane rozmiarem obrazu. Możesz to poprawić, klikając GIF w edytorze tekstu sformatowanego, a następnie klikając opcję Edytuj obraz. W menu rozwijanym Rozmiar obrazu wybierz Oryginalny. Następnie możesz zmienić rozmiar obrazu GIF, klikając i przeciągając rogi obrazu do środka, aby go pomniejszyć, lub na zewnątrz, aby go powiększyć.
• Jeśli w witrynie sklepu obraz ma znacząco inny kolor, może to oznaczać, że obrazy nie są w standardowej przestrzeni sRGB. Aby naprawić tę zmianę koloru, zapisz plik w aplikacji do edycji zdjęć jako sRGB. Typowe określenia dla tego typu działań to „Optymalizacja stron internetowych”, „Dostosowanie obrazu do sieci Web” lub „Zapis do sieci Web”. Dowiedz się więcej o profilach kolorów.
• Jeśli obrazy produktów na stronach kolekcji nie są wyrównane, może być konieczne dostosowanie współczynnika proporcji w plikach obrazów produktu, aby były one w tym samym stosunku wysokości do szerokości, a następnie przesłanie obrazu produktu ponownie. Możesz także użyć aplikacji do edycji obrazów z Shopify App Store.

Produkty lub kolekcje, które nie są poprawnie wyświetlane

Jeśli Twoje produkty nie znajdują się w witrynie sklepu, może być konieczne sprawdzenie Statusu i Kanałów sprzedaży w sekcji Publikowanie produktu w panelu administracyjnym Shopify. Upewnij się, że produkt ma status Aktywny i jest dostępny w przypadku Sklepu online.

Jeśli w witrynie sklepu brakuje Twoich kolekcji, sprawdź kanały sprzedaży w sekcji Publikowanie w ramach kolekcji w panelu administracyjnym Shopify. Upewnij się, że kolekcja jest dostępna dla Sklepu online. Możesz również się upewnić, czy Twoja kolekcja jest dodana do menu.

Jeśli Twoje kolekcje są wyświetlane, ale brakuje produktów, sprawdź filtry tagów dla kolekcji w ustawieniach Menu. Upewnij się, że w polu Filtruj kolekcję z tagami nie ma tagów, które mogą spowodować, że produkty nie będą wyświetlane.

Jeśli Twoja waluta nie jest wyświetlana poprawnie dla produktów lub kolekcji, możesz sprawdzić Wyświetlanie waluty w sekcji Ustawienia domyślne sklepu w części Ustawienia > Ogólne, aby upewnić się, że nie ma żadnego dodatkowego kodu. Dowiedz się więcej o formatowaniu sposobu, w jaki waluta jest wyświetlana klientom.

Jeśli niektóre produkty lub kolekcje wyświetlają się inaczej niż inne, konieczne może być sprawdzenie Wzorca szablonu przypisanego do produktów lub kolekcji w panelu administracyjnym Shopify.

Przetłumaczona zawartość nie jest poprawnie wyświetlana

Jeśli przetłumaczona zawartość nie jest poprawnie wyświetlana lub nie ma jej w witrynie sklepu, może to oznaczać, że istnieją nieaktualne tłumaczenia lub możemy mieć do czynienia z brakiem tłumaczeń treści. Treść może również być w określonym szablonie dla rynku. Dodając nowe treści w języku domyślnym, pamiętaj o ponownym uruchomieniu automatycznego tłumaczenia lub ręcznym dodaniu nowych tłumaczeń.

Przetłumaczona zawartość może mieć następujące statusy:

• Przetłumaczona: Dostępne są tłumaczenia zawartości.
• Nieaktualna: Zawartość w domyślnym języku została zaktualizowana, ale tłumaczenia nie odzwierciedlają aktualizacji.
• Nieprzetłumaczona: Ten typ zawartości nie ma tłumaczeń.

Podczas przeglądania przetłumaczonych treści zaktualizuj wszelkie nieprzetłumaczone lub przestarzałe treści, a następnie treści przetłumaczone powinny być wyświetlane poprawnie.

Dowiedz się więcej o tłumaczeniach i lokalizacji sklepu.

Aktualizacje w edytorze szablonów nie są wyświetlane w witrynie sklepu

Jeśli Twoja witryna sklepu i edytor szablonów nie wyświetlają tych samych informacji, sprawdź edytowany wzorzec szablonu. Może być konieczna aktualizacja wzorców szablonów, aby wyświetlać poprawne informacje. Kontekstualizacja sklepu umożliwia tworzenie różnych witryn sklepu na różnych rynkach i wyświetlanie przetłumaczonych treści. Mogła mieć miejsce nieumyślna praca na określonym rynku lub w ramach B2B podczas dokonywania aktualizacji. Znajdź zawartość za pomocą menu rozwijanego Kontekst w edytorze aplikacji, aby upewnić się, że znajduje się na odpowiednich rynkach.

Dowiedz się więcej o kontekstualizacji sklepu.

Różnice w szablonie między widokiem dla urządzeń mobilnych i komputerów

Wszystkie szablony dostępne w sklepie z szablonami Shopify są responsywnymi szablonami, co oznacza, że szablon dostosowuje się do rozmiaru ekranu. W edytorze szablonów można przełączać widok wielkości ekranu podczas edytowania szablonu, aby zapewnić prawidłowe wyświetlanie stron i obrazów. Dowiedz się więcej o wyświetlaniu różnych wielkości ekranu w edytorze szablonów.

Wiele sekcji i bloków ma ustawienia dla urządzeń mobilnych, które można dostosować. Na przykład możesz ustawić Liczbę kolumn na urządzeniu mobilnym w sekcji Powiązane produkty. Możesz przejrzeć sekcję Ustawienia dotyczące wersji mobilnej dla każdego typu strony, aby rozwiązać wszelkie problemy z wyświetlaniem na ekranach o wielkości urządzenia mobilnego.

Niektóre funkcje szablonu mogą być wyświetlane inaczej na urządzeniach mobilnych niż na komputerach, aby zapewnić dostępność szablonu we wszystkich wielkościach ekranu. Na przykład na ekranie komputera pokaz slajdów może mieć nakładkę tekstową, w której tekst jest wyświetlany nad obrazem, często z nieprzezroczystością koloru obrazu lub cieniem tekstu. Na ekranach urządzeń mobilnych tekst może być jednak wyświetlany pod pokazem slajdów. Jest to funkcja ułatwień dostępu zaprojektowana tak, aby tekst był czytelny przy każdej wielkości ekranu. Gdyby tekst był nakładką, jego czcionka byłaby bardzo mała na urządzeniach mobilnych, co utrudniałoby odczytywanie tekstu.

Jeśli sekcja polecanej kolekcji lub strony kolekcji wyświetlają się w niespójnych rozmiarach lub nie są wyrównane podczas przeglądania witryny sklepu na urządzeniach mobilnych, może to być spowodowane niespójnymi współczynnikami proporcji. Siatki obrazów, takie jak obrazy produktów wyświetlane w kolekcji lub polecanej kolekcji, są zbudowane tak, aby reagowały na wielkość ekranu. Jeśli masz niespójne proporcje obrazów w siatce obrazów, mogą one być wyświetlane inaczej w zależności od wielkości ekranu. Kwadratowe obrazy produktów o wymiarach 2048 na 2048 pikseli zazwyczaj wyglądają najlepiej w siatkach produktów. W celu optymalizacji we wszystkich wielkościach ekranu uaktualnij obrazy, aby miały spójny współczynnik proporcji. Dowiedz się więcej o współczynniku proporcji obrazu.

Edytor tekstu sformatowanego

Czasami kod HTML dodawany w edytorze tekstu sformatowanego jest w sprzeczności z Twoim kodem szablonu. Jeśli problem występuje na jednej stronie, np. na stronie produktu, stronie lub poście na blogu, może to być spowodowane dodatkowym kodem HTML. Można on czasem być dodany podczas kopiowania i wklejania tekstu z innej strony.

Sprawdź kod HTML

Możesz sprawdzić kod HTML w edytorze tekstu sformatowanego.

Kroki:

1. Przejdź do strony w panelu administracyjnym.
2. Kliknij przycisk </> Pokaż HTML, aby przejrzeć kod HTML.
3. Znajdź dowolny kod HTML, który może powodować problemy z wyświetlaniem, i usuń go.
4. Kliknij opcję Zapisz.

Wyczyść formatowanie

Możesz wyróżnić część tekstu i wyczyścić formatowanie HTML.

Kroki:

1. Przejdź do strony w panelu administracyjnym.
2. Zaznacz tekst, w przypadku którego występują problemy z formatowaniem.
3. Kliknij przycisk 🚫.
4. Kliknij opcję Zapisz.

Dowiedz się więcej o edytorze tekstu sformatowanego.

Strona przekierowuje do nieobsługiwanego adresu URL

Jeśli Twój sklep zawiera kod przekierowujący użytkowników do adresów URL, które nie są połączone z Twoim sklepem, sprawdź, czy przekierowanie zostało dezaktywowane podczas korzystania z edytora szablonów.

Na przykład ten typ przekierowania może zostać dodany do witryny sklepu w celu kierowania klientów do różnych sklepów Shopify w zależności od ich lokalizacji. Ten typ kodu przekierowania może znajdować się w szablonie lub zainstalowanej przez Ciebie aplikacji.

Aby przekierowanie nie zakłóciło korzystania z edytora, użyj odwołania do zmiennej window.Shopify.designMode w JavaScript, aby dezaktywować przekierowanie podczas korzystania z edytora szablonów. Wartość tej zmiennej jest ustawiona na true , gdy sklep jest ładowany w edytorze, oraz na false, kiedy nie jest.

Komunikaty o błędach kodu

Jeśli w kodzie szablonu występuje błąd składniowy, komunikat ostrzegawczy HTML error found lub Theme error zostaje wyświetlony w edytorze szablonów. W komunikacie o błędzie wyświetlany jest plik Liquid zawierający błąd.

Komunikat ostrzegawczy The theme you're looking for couldn't be found może pojawić się w przypadku problemów z kodem HTML. Załadowanie strony w edytorze szablonów może nie powieść się z wielu powodów:

• problemy z połączeniem sieciowym
• nieprawidłowy kod Liquid w szablonie

Możesz znaleźć zmiany kodu w kodzie szablonu i poprawić kod lub cofnąć plik do postaci przed zmianą kodu.

Kroki

1. Kliknij plik sekcji .liquid, który jest powiązany z komunikatem o błędzie, lub sprawdź pliki pod kątem ostatnich zmian. Spowoduje to przejścia do strony Edytuj HTML/CSS, a plik otworzy się w edytorze kodu.

2. Przejrzyj plik pod kątem niepoprawnego kodu HTML lub Liquid. Edytor kodu wyświetla potencjalne błędy składni na czerwono. Najczęstsze problemy to:

   • Dodatkowe zamykające tagi HTML np. zamykający tag </div> bez tagu otwierającego <div>
   • Dodatkowe niezamknięte tagi HTML np. otwierający tag <div> bez tagu zamykającego </div>
   • Zniekształcone tagi HTML np. <div class="my-class" bez >
   • Zniekształcony kod Liquid
   • Uszkodzony kod HTML w dołączonym pliku fragmentu kodu szablonu

3. Po odkryciu problemu popraw kod w pliku szablonu lub przywróć kod, wybierając jego wcześniejszą wersję w części Ostatnie zmiany.

4. Kliknij opcję Zapisz.

5. Kliknij przycisk Dostosuj, aby wrócić do edytora szablonów, i potwierdź, że komunikat o błędzie zniknął.

6. Przejdź do swojej witryny sklepu, aby upewnić się, że jest wyświetlana zgodnie z oczekiwaniami.