Shopify annoncerer sin mest betydningsfulde ændring til dato - Shopify Online Store 2.0, der henviser til ny infrastruktur, værktøjer og teknologier, der hjælper dig med at opbygge en fleksibel butik. Her er de nye værktøjer og funktioner i Shopify Online Store 2.0:

• Opgraderet temaarkitektur: Med sektioner tilgængelige for alle sider kan handlende som dig låse op for en række nye muligheder for at personalisere og forbedre kundeoplevelser.
• Fleksibelt butiksinhold:
  • Theme-app-udvidelser med app-blokke giver dig mulighed for nemt at integrere flere Shopify-apps og fjerne dem uden noget ghost code tilbage.
  • Den forbedrede temaeditor giver dig mulighed for at tilføje meta-værdier dynamisk. Det betyder, at du nemt kan tilføje ekstra information til produktet problemfrit. For at få mere at vide, se vores Shopify 2.0 forbedrede metfelter blog.
• Forbedringer til temaeditoren: I stedet for at navigere ned i flere lag for at foretage ændringer viser den forbedrede temaeditor et træoversigt over alt indholdet på en side i sidepanelet.
• Nye udviklerværktøjer: Med GitHub-integration, opgraderet Shopify CLI og Theme Check-værktøjer kan dine Shopify-udviklere hjælpe dig med at forbedre din butiksudvikling.
• Et nyt reference-tema: Designet og bygget til at understøtte Online Store 2.0 fleksibilitet - Shopify Dawn-temaet er det første open-source reference-tema. Du kan læse mere om temaet i vores detaljerede Shopify Dawn tema anmeldelse blog.

Dyk dybere ned i disse meddelelser om Shopify Online Store 2.0 med vores Shopify 2.0 introduktion blog.

Trin til at komme i gang med Shopify Online Store 2.0?

Før du begynder at migrere dit tema til Online Store 2.0, skal du beslutte dig for værktøjet til temaudvikling. Hvis du vil bruge den forbedrede Shopify CLI, skal du installere CLI ved at følge nedenstående kommandoer.

Til Windows:

• Trin 1: Først skal du installere Ruby+Devkit ved hjælp af RubyInstaller til Windows.
• Trin 2: Brug pakkehåndtereren RubyGems.org til at installere Shopify CLI.
• Trin 3: Åbn en ny terminal, naviger til hjemmemappen, og kør kommandoen "gem install shopify-cli".
• Trin 4: For at verificere installationen skal du køre kommandoen "shopify version".

Til macOS:

• Hvis du bruger RubyGems.org, skal du følge trin 3 og 4 for at installere og verificere.
• Hvis du bruger Homebrew, skal du køre følgende kommandoer "brew tap shopify/shopify" og "brew install shopify-cli" for at installere, og til verifikation, følg trin 4.

Trin til at hjælpe dig med at migrere et tema til Shopify Online Store 2.0

For at hjælpe dig med at vælge de bedste Shopify 2.0-temaer og forstå temaarkitekturen har vi skrevet en Shopify Online Store 2.0 bedste temaerblog sammen med Shopify 2.0 temaarkitektur. Når du har identificeret det tema, du vil arbejde med, følg venligst nedenstående trin

Trin 1: Sikkerhedskopier temaet

Det er altid sikrere at have en backupmulighed for ikke at fare vild i skoven. Hvis du bruger Theme Development Kit, skal du venligst duplikere temaet og holde det upubliceret. Ved hjælp af Shopify CLI kan du downloade temaet ved at bruge "shopify theme pull" kommandoen.

Trin 2: Identificer og fjern sektionsreferencer

Da sektioner er tilgængelige for hver side i Shopify Online Store 2.0 ved at vise sidetypen i JSON-format, skal du begynde at konvertere dit tema Liquid-skabelon til en JSON-skabelon.

• For at starte konverteringen skal du fjerne alle {% sektion %} tags og lave kontinuerlige noter.
• For det andet, for at fjerne referencerne, skal du følge nedenstående trin:
• Trin 1: Find filen i /templates-mappen. Lad os i vores tilfælde overveje produkt.liquid-filen.
• Trin 2: Søg efter eventuelle {% sektion %} tags og noter deres placering og navne.
• Trin 3: Slet tags fra produkt.liquid-filen.

Trin 3: Flytte koden ind i sektionen fra skabelonformatet

Når du har fjernet sektionstagsene, skal du beslutte, hvor du vil flytte skabelonkoden til.

• For at tilføje koden til en eksisterende sektion,
• Åben den valgte sektionsfil
• Kopier koden fra produkt.liquid
• Indsæt koden over de åbnende {% schema %} tags i sektionsfilen.
• For at tilføje kode til en ny sektion,
• Først skal du oprette en ny fil i /sections-mappen
• Derefter kopier og indsæt resten af koden i den tomme sektionsfil.

Trin 4: Slet Liquid-skabelonfilen

Når du er færdig med at kopiere indsætte, skal du slette produkt.liquid fra /templates-mappen, da du ikke kan have både produkt.liquid og produkt.json-filer i /templates-mappen på samme tid.

Trin 5: Opret en JSON-skabelonfil

Når du har slettet produkt.liquid-filen, kan du oprette erstatnings-JSON-skabelonen ved at følge disse trin:

• Trin 1: Oprettelse af filen:
• Hvis du bruger kodeeditoren,
• Vælg Tilføj en ny skabelon.
• I rullemenuen Opret en skabelon skal du vælge produktmuligheden.
• Vælg JSON som skabelontype.
• Hvis du opretter lokalt, skal du oprette en ny JSON-fil (i vores tilfælde lad os antage, at det er produkt.json) og gemme den i /templates-mappen.
• Trin 2: Efter oprettelse af produkt.json-filen skal du erstatte al standardkode med passende typer inde i filen.
• Trin 3: Gem filen.

Trin 6: Test af skabelonen

Efter oprettelse af JSON-skabelonen kan du teste ændringerne ved at navigere til din produktside fra temaeditoren og lede efter indstillingen "Tilføj sektion".

For at se en model af, hvordan Shopify Online Store 2.0 kan gavne handlende og Shopify-udviklere ved BFCM 2021, skal du kigge på vores Shopify 2.0 BFCM fordele blog.

Trin 7: Tilføj referencer og rækkefølge for sektionerne

Hvis din produkt.liquid-skabelonfil indeholder yderligere sektioner, kan du definere disse referencer inden for den oprettede produkt.json-fil og derefter definere deres rækkefølge.

Trin 8 (Valgfrit): Tilføj support til appblokke til sektioner

Med den opdaterede temaarkitektur og introduktion af temaapp-udvidelser med Appblokke kan du udnytte denne introduktion ved at tilføje det nødvendige schema og gengive blokindholdet.

• For at gengive et blokindhold: Kontroller den passende type, og render derefter blokken ved hjælp af en {% render blok %} tag.
• For at tilføje appblokken til en sektion: Du skal tilføje blokke af typen @app til sektionens schema.

Trin 9: Gentag trinnene

For at konvertere alle sektioner skal du følge ovenstående trin fra trin 1 til trin 7 for at gøre dit tema kompatibelt med Shopify Online Store 2.0

Sådan installerer du Dawn-temaet fra Shopify via Shopify/Dawn Theme GitHub

Du kan ikke downloade Shopify Dawn-temaet via Shopify/dawn-tema GitHub. For at downloade Shopify Dawn-temaet hurtigt kan du besøge Shopify Temabutikken og søge efter Dawn-temaet.

Da Shopify/dawn-tema GitHub vil hjælpe dig med at bygge og spore ændringer til themekoden. GitHub-integrationen vil tillade dine Shopify-udviklere at samarbejde sikkert med versionskontrol ved redigering af temaer og dele forhåndsvisninger af ændringer, inden de populær til et live-tema.

Afslutning:

Selvom det ikke er obligatorisk for handlende at få adgang til Shopify 2.0-funktionerne, anbefaler vi kraftigt vores handel og andre at opleve Shopify Online Store 2.0. Det tilbyder fleksibilitet til at foretage ændringer og giver muligheder for at vokse ud over det grundlæggende.

Hvis du ser frem til at implementere, migrere eller starte med Shopify Dawn-temaet, kan vores Shopify Online Store 2.0 eksperter hjælpe dig med at udnytte de nye funktioner, arkitektur, designstile og andre.