Edycja kodu szablonu

Uwaga

Jeśli zmiany wprowadzone w kodzie szablonu są niezgodne z jego aktualizacją, wszystkie wprowadzone zmiany zostaną usunięte w zaktualizowanej kopii. Kod szablonu należy edytować tylko wtedy, gdy nie można wprowadzić potrzebnych zmian za pomocą aplikacji Shopify lub edytora szablonów.

Możesz edytować kod szablonu, aby wprowadzić szczegółowe zmiany w sklepie online za pomocą edytora kodu. Większość plików składających się na szablon zawiera Liquid — język szablonów Shopify. Pliki szablonu zawierają również kod HTML, CSS, JSON i JavaScript. Edytuj kod szablonu tylko wtedy, gdy znasz HTML i CSS oraz masz podstawową wiedzę na temat języka Liquid.

Możesz edytować kod szablonu dopiero po jego zakupie. Obejmuje to korzystanie z generatora kodu AI w edytorze szablonów. Jeśli korzystasz z wersji próbnej płatnego szablonu, musisz go kupić, aby móc wprowadzać zmiany w kodzie.

Rozwijaj swoją firmę

Jeśli chcesz dodać niestandardowe funkcje lub kod, ale nie masz doświadczenia w tworzeniu stron internetowych z wykorzystaniem kodu HTML, CSS i JavaScript, rozważ zatrudnienie Partnera Shopify.

Uwaga

Aby przygotować się do dostosowania szablonu, wykonaj następujące zalecane zadania:

• Zduplikuj szablon, aby utworzyć kopię zapasową. Ułatwi to odrzucenie zmian i w razie potrzeby rozpoczęcie od nowa.
• Upewnij się, że rozumiesz, jaki poziom obsługi jest dostępny.
• Zapoznaj się z wymaganiami i najlepszymi praktykami dotyczącymi przesyłania zdjęć.

Edytor kodu wyświetla katalog plików szablonu oraz obszar do wyświetlania i edycji plików. Po kliknięciu pliku w katalogu zostanie on otwarty w edytorze kodu. Można otwierać i edytować wiele plików jednocześnie. Można również otwierać i przeglądać wiele plików jednocześnie.

Edycja kodu szablonu

Za pomocą edytora kodu możesz modyfikować pliki szablonu.

Kroki:

Desktop

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

Urządzenia mobilne

1. W aplikacji Shopify naciśnij ikonę .

2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.

3. Naciśnij Zarządzaj szablonami.

4. Naciśnij > Edytuj kod.

Zapisywanie zmian

Po edycji pliku obok nazwy karty pojawia się kropka wskazująca niezapisane zmiany. Kliknij przycisk Zapisz, aby zapisać zmiany. Aby zapisać zmiany, możesz również użyć skrótu ⌘ + S na komputerze Mac lub Ctrl + S w systemie Windows.

Formatowanie kodu szablonu

Aby poprawić wcięcia w kodzie, otwórz paletę poleceń za pomocą skrótu ⌘ + Shift + P na komputerze Mac lub Ctrl + Shift + P w systemie Windows, wpisz format, a następnie wybierz opcję Formatuj dokument.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Otwórz plik, który chcesz sformatować.

4. Użyj skrótu ⌘ + P na komputerze Mac lub Ctrl + P w systemie Windows.

5. W palecie poleceń wpisz format, a następnie naciśnij klawisz Enter.

6. Zapisz plik.

Śledzenie zmian w plikach

Aby przywrócić zmodyfikowany plik szablonu do poprzedniej wersji, użyj widoku Oś czasu dla tego pliku.

Widok Oś czasu przywraca po jednym istniejącym pliku naraz. Nie przywraca on całego szablonu i nie umożliwia odzyskania usuniętych plików szablonu. Historia na osi czasu jest ograniczona, więc starsze wersje mogą nie być dostępne.

Przywrócenie zastępuje całą zawartość pliku, w tym zmiany, które możesz chcieć zachować. Przed przywróceniem pliku skopiuj jego obecną zawartość w bezpieczne miejsce, jeśli chcesz zachować ewentualne zmiany.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Otwórz istniejący plik, który chcesz przejrzeć lub przywrócić.

4. Opcjonalnie: Jeśli zechcesz zachować ewentualne bieżące zmiany, skopiuj obecną zawartość pliku w bezpieczne miejsce przed przywróceniem.

5. W widoku Oś czasu kliknij wpis na osi czasu, aby porównać różnice.

6. Aby zastąpić całą zawartość pliku wybraną poprzednią wersją, kliknij prawym przyciskiem myszy wpis na osi czasu, a następnie wybierz opcję Przywróć zawartość.

7. Kliknij Przywróć.

Theme Check

Edytor kodu zawiera funkcję Theme Check, która pomaga zapobiegać błędom, dostarczając natychmiastowych informacji zwrotnych podczas pisania kodu, a nie dopiero po wykryciu błędów w aktywnym szablonie.

W edytorze kodu funkcja Theme Check może zidentyfikować następujące błędy w edytowanym kodzie:

• Skrypty blokujące parser, które mogą spowolnić działanie witryny sklepu.
• Niezgodności między plikami tłumaczeń, takie jak brakujące klucze tłumaczeń lub niezgodne tłumaczenia w pliku lokalnym.
• Brakujące szablony

Błędy są oznaczone czerwoną linią pod kodem. Aby wyświetlić błąd, najedź kursorem na podświetloną linię.

Wyszukiwanie i zamienianie w edytorze kodu

W edytorze kodu możesz wyszukiwać na jeden z następujących sposobów:

• Przeszukiwanie kodu określonego pliku.
• Przeszukiwanie kodu wszystkich plików szablonu.

Możesz również zamienić kod w określonym pliku lub wiele jego wystąpień we wszystkich plikach szablonu. Możesz także wyszukać plik według nazwy, aby otworzyć plik.

Wyszukiwanie w pliku

Możesz wyszukiwać i zamieniać kod w określonym pliku. Użyj klawiszy strzałek, aby przejrzeć każde wystąpienie kodu.

Po wyszukaniu kodu możesz go zamienić w pliku.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Otwórz plik, który chcesz przeszukać.

4. Naciśnij klawisze ⌘ + F na komputerze Mac lub Ctrl + F w systemie Windows.

5. W polu Wyszukaj wprowadź wyszukiwane hasło.

6. Opcjonalnie: Aby zamienić kod, wykonaj następujące czynności:

• W oknie modalnym wyszukiwania kliknij ikonę .
• W polu Zamień wprowadź kod zastępczy. Możesz kliknąć opcję Zachowaj wielkość liter, aby dopasować wielkość liter kodu zastępczego do istniejącego wystąpienia.
• Kliknij ikonę Zamień, aby zamienić jedno wystąpienie, lub ikonę Zamień wszystko, aby zamienić wszystkie wystąpienia naraz.

Wyszukiwanie we wszystkich plikach

Kliknij przycisk wyszukiwania na lewym pasku bocznym, aby przeszukać wszystkie pliki szablonu. Wyniki wyświetlają każde wystąpienie wyszukiwanego hasła i plik, w którym się ono znajduje.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Kliknij ikonę , aby otworzyć panel wyszukiwania.

4. W polu Wyszukaj wprowadź wyszukiwane hasło.

5. Opcjonalnie: Aby zamienić kod, wykonaj następujące czynności:

• W oknie modalnym wyszukiwania kliknij ikonę .
• W polu Zamień wprowadź kod zastępczy.
• Zamień jedno wystąpienie lub wszystkie wystąpienia naraz.

Zaawansowane opcje wyszukiwania

Aby zawęzić wyniki wyszukiwania, użyj co najmniej jednej z następujących opcji wyszukiwania:

• Opcja Uwzględnij wielkość liter zwraca wyszukiwane hasła, które pasują pod względem wielkości liter. Na przykład, jeśli wpiszesz produkt, wyszukiwarka podświetli wszystkie wystąpienia „produkt” lub „Produkt”. Jeśli wybierzesz opcję Uwzględnij wielkość liter, wyszukiwarka podświetli tylko wystąpienia produkt.
• Opcja Całe słowa zwraca wyszukiwane hasła, które pasują do całego słowa, i wyklucza częściowe dopasowania. Na przykład, jeśli wpiszesz koszyk, wyszukiwarka podświetli wystąpienia słowa „koszyk”, ale nie „karton”.
• Opcja Użyj wyrażenia regularnego zwraca wyniki wyszukiwania, które pasują do wyrażenia regularnego (regex). Regex to ciąg znaków, który określa wzorzec dopasowania w tekście.

Uwaga

Używanie wyrażeń regularnych (regex) to zaawansowana technika dostosowywania. Możesz skorzystać z narzędzia zewnętrznego, takiego jak regex101 lub RegExr, aby uzyskać pomoc w tworzeniu ciągu znaków regex.

W panelu Wyszukaj możesz również wybrać pliki i foldery do uwzględnienia w wynikach wyszukiwania lub wykluczenia z nich.

Kliknij ikonę , aby otworzyć menu zaawansowane. Możesz wprowadzić dowolną ścieżkę pliku lub folderu w polach pliki do uwzględnienia lub pliki do wykluczenia. Aby dodać więcej niż jeden plik lub folder, oddziel je spacją i przecinkiem. Na przykład, aby wyszukać pliki w folderze sections, wprowadź ./sections w polu pliki do uwzględnienia.

Możesz także wyszukiwać w określonym folderze z widoku katalogu plików. Kliknij folder prawym przyciskiem myszy, a następnie wybierz opcję Znajdź w folderze... z menu rozwijanego.

Zarządzanie plikami szablonu

Możesz zarządzać plikami w kodzie szablonu. Możesz usuwać pliki, dodawać nowe, zmieniać ich nazwy oraz przywracać zmodyfikowane pliki kodu z poziomu widoku Osi czasu, jeśli dostępna jest ich poprzednia wersja. Pliki zasobów, takie jak obrazy, pliki CSS i JavaScript oraz czcionki w folderze assets, nie mają historii na osi czasu.

Otwieranie pliku szablonu

Aby otworzyć plik szablonu, kliknij folder, a następnie kliknij nazwę pliku w eksploratorze. Możesz również wyszukać pliki według nazwy lub rozszerzenia, a następnie otworzyć plik.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Użyj skrótu ⌘ + P na komputerze Mac lub Ctrl + P w systemie Windows.

4. Wprowadź nazwę pliku w pasku wyszukiwania i wybierz plik lub wybierz plik z listy Ostatnio otwarte.

Dodawanie nowego pliku szablonu

Aby dodać plik, wybierz folder, kliknij ikonę Nowy plik, a następnie wprowadź nazwę i rozszerzenie pliku.

Nazwy plików mogą zawierać znaki A-Z, 0-9 i nie mogą zawierać spacji. Słowa należy oddzielać myślnikami lub podkreśleniami. Rozszerzenie pliku jest definiowane przez kropkę . i typ rozszerzenia. Na przykład .liquid lub .css.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Kliknij folder, do którego chcesz dodać nowy plik.

4. Kliknij prawym przyciskiem myszy nazwę folderu i wybierz opcję Nowy plik... z menu rozwijanego.

5. Wprowadź nową nazwę dla pliku.

6. Naciśnij klawisz Enter na klawiaturze.

Przesyłanie nowego zasobu

Możesz przesłać nowy zasób, taki jak ikona lub plik obrazu, do folderu assets w edytorze kodu.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Kliknij prawym przyciskiem myszy folder assets.

4. Kliknij opcję Prześlij....

5. Wybierz plik, który chcesz przesłać.

6. Kliknij przycisk Otwórz.

Zmiana nazwy pliku szablonu

Aby zmienić nazwę pliku, kliknij go prawym przyciskiem myszy. Pamiętaj, aby nie edytować ani nie usuwać rozszerzenia pliku. Rozszerzenie pliku jest zdefiniowane przez kropkę . i typ rozszerzenia. Na przykład .liquid lub .css. Nazwy plików mogą zawierać znaki A-Z, 0-9 i nie mogą zawierać spacji. Wyrazy oddzielaj myślnikami lub podkreśleniami. Jeśli nazwa pliku jest nieprawidłowa, nowa nazwa nie zostanie zapisana.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Kliknij plik prawym przyciskiem myszy i wybierz Zmień nazwę... z menu rozwijanego.

4. Wprowadź nową nazwę dla pliku.

5. Naciśnij klawisz Enter na klawiaturze.

Usuwanie pliku szablonu

Uwaga

Usunięcie pliku szablonu może uszkodzić szablon. Przed usunięciem jakiegokolwiek pliku utwórz duplikat szablonu.

Możesz usunąć dowolne pliki w szablonie. Usuniętych plików szablonu nie można przywrócić.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Kliknij > Edytuj kod.

3. Kliknij plik prawym przyciskiem myszy i wybierz Usuń trwale z menu rozwijanego.

4. Kliknij Usuń.