Tworzenie motywów Shopify: praktyczny start

Tworzenie motywów Shopify

Tworzenie motywów Shopify: CLI, foldery i podstawy Liquid | We.Inc

Zacznij tworzyć motyw Shopify: polecenia Shopify CLI dla motywów, zawartość każdego folderu motywu, podstawy Liquid i szablony JSON, z poleceniami do skopiowania.

Zainstaluj Shopify CLI, uruchom shopify theme init, aby sklonować motyw startowy Skeleton, a potem shopify theme dev --store your-store, aby oglądać podgląd pod adresem http://127.0.0.1:9292 z automatycznym przeładowaniem w Chrome. Edytuj lokalnie Liquid, CSS i szablony JSON, uruchom shopify theme check, aby wykryć błędy, i shopify theme push, aby wysłać pliki.

Najczęściej używane polecenia Shopify CLI dla motywów

Polecenie
Co według Shopify robi

shopify theme init
Klonuje repozytorium Git jako punkt wyjścia do budowy motywu

shopify theme dev
Wysyła motyw jako motyw deweloperski, aby można było oglądać jego podgląd

shopify theme pull
Pobiera pliki motywu z Shopify

shopify theme push
Wysyła lokalne pliki motywu do Shopify

shopify theme check
Uruchamia Theme Check, aby przeanalizować kod motywu pod kątem błędów

shopify theme share
Wysyła motyw jako nowy, nieopublikowany motyw

shopify theme publish
Publikuje nieopublikowany motyw z Twojej biblioteki

Tworzenie motywów oznacza edytowanie wyglądu sklepu jako prawdziwych plików na Twoim komputerze, we własnym edytorze i z kontrolą wersji, zamiast w panelu administracyjnym. Przeklikaj eksplorator folderów poniżej, aby dowiedzieć się, co gdzie leży, a potem skopiuj polecenia i uruchom podgląd.

Zainstaluj Shopify CLI i zaloguj się do sklepu deweloperskiego albo sklepu, do którego masz dostęp jako pracownik.
Uruchom shopify theme init, aby dostać motyw startowy, lub shopify theme pull, aby pobrać istniejący.
Uruchom shopify theme dev i otwórz lokalny adres w Chrome; zmiany w CSS i sekcjach przeładowują się przy zapisie.
Uruchom shopify theme check, a potem wyślij lub udostępnij motyw, gdy będzie gotowy do przeglądu.

Trzymaj motyw w Git od pierwszego commita. Historia plików w panelu jest ograniczona, Twoje repozytorium nie.
Pracuj na motywie deweloperskim, nigdy bezpośrednio na opublikowanym. Wysyłaj do opublikowanego motywu tylko celowo.
Pamiętaj o limitach szablonów: do 25 sekcji na szablon JSON i do 50 bloków na sekcję.
Shopify oznacza obiekt Liquid theme jako przestarzały, więc nie opieraj logiki na nazwie ani ID motywu.

Najczęściej zadawane pytania

Czym jest Liquid?

Liquid to język szablonów Shopify. Podwójne nawiasy klamrowe wyświetlają wartość, na przykład tytuł produktu, a znaczniki z nawiasem klamrowym i procentem zawierają logikę, taką jak instrukcje if i pętle. Filtry zmieniają sposób wyświetlania wartości.

Czy do tworzenia motywów potrzebuję płatnego planu?

Deweloperzy zwykle pracują na sklepie deweloperskim utworzonym z konta Shopify Partner. Aktualne warunki sprawdź w panelu Partner, bo mogą się zmieniać.

Czym jest szablon JSON?

To plik danych, który wymienia sekcje renderowane na stronie i ich ustawienia. Potrzebuje obiektu sections z co najmniej jedną sekcją i tablicy order z identyfikatorami sekcji.

Dlaczego mój podgląd przeładowuje się tylko w Chrome?

Przewodnik Shopify na start podaje, że podgląd z automatycznym przeładowaniem działa tylko w Google Chrome. W innych przeglądarkach odświeżaj ręcznie.

Zacząć od Dawn, Horizon czy Skeleton?

Polecenie init w CLI klonuje Skeleton, minimalną bazę dla motywu budowanego od zera. Zacznij od pełnego darmowego motywu, jeśli głównie chcesz dopasować istniejący projekt.

Jak składa się strona

Plik układu otacza każdą stronę wspólną powłoką, taką jak znacznik head i nagłówek. Szablon JSON wybiera następnie sekcje wypełniające stronę, a każda sekcja to plik Liquid, który może zawierać bloki i snippety.
Właściciele sklepów przestawiają te sekcje w edytorze motywu. Twoim zadaniem jako dewelopera jest uczynić sekcje elastycznymi dzięki ustawieniom, aby właściciel nigdy nie musiał dzwonić do Ciebie w sprawie drobnej zmiany.

Przenoszenie pracy między komputerem a sklepem

Zrób pull przed rozpoczęciem pracy, jeśli ktoś edytował motyw w panelu, inaczej Twój push może nadpisać jego zmiany. Polecenie push nadpisuje zdalną wersję, gdy wskazujesz istniejący motyw.
Użyj share, aby przekazać klientowi podgląd: wysyła motyw jako nową, nieopublikowaną kopię w jego bibliotece, którą może obejrzeć, zanim cokolwiek zostanie opublikowane.

Polecenia do uruchomienia podglądu

Zastąp my-store nazwą myshopify swojego sklepu. Uruchamiaj je z pustego folderu.

Utwórz motyw i obejrzyj podgląd

init klonuje starter Skeleton; dev wyświetla lokalny adres, który przeładowuje zmiany w CSS i sekcjach.

Sprawdź i wyślij

Uruchamiaj check przed każdym wysłaniem. share tworzy nową nieopublikowaną kopię, co jest najbezpieczniejsze przy przeglądzie przez klienta.

Liquid w jednym snippecie

Znaczniki wyjścia wyświetlają wartości, znaczniki logiki decydują, co się renderuje, a filtry przekształcają wartość.

Tytuł i cena produktu

Znacznik if ukrywa linię z ceną porównawczą, gdy nie ma promocji; filtr money formatuje cenę w walucie sklepu.

Eksplorator folderów motywu

Każdy folder standardowego motywu i jego zawartość. Wybierz jeden, aby go podświetlić.

Obrazy, pliki CSS i JavaScript używane przez motyw.

Bloki motywu, nowszy rodzaj bloków, wokół których zbudowane są motywy takie jak Horizon.

Pliki konfiguracyjne motywu, w tym settings_schema.json.

Pliki tłumaczeń, dzięki którym teksty motywu mogą wyświetlać się w innych językach.

Sekcje motywu i grupy sekcji.

Małe fragmenty kodu Liquid wielokrotnego użytku.

Szablony starszych stron kont klientów.

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony