Shopify presenterar sin hittills största förändring - Shopify Online Store 2.0, vilket syftar på ny infrastruktur, verktyg och teknologier som hjälper dig att bygga en flexibel butik. Nedan finns de nya verktygen och funktionerna i Shopify Online Store 2.0:

• Uppgraderad temarkitektur: Med avsnitt tillgängliga för alla sidor kan handlare som du låsa upp en rad nya möjligheter för att anpassa och förbättra kundupplevelser.
• Flexibelt butiksinnehåll:
  • Temapplikationstillägg med appblock gör att du enkelt kan integrera flera Shopify-appar och ta bort dem utan något överblivet kodspår.
  • Den förbättrade temaleditorn låter dig lägga till metabeskrivningar dynamiskt. Det betyder att du enkelt kan lägga till extra information till produkten utan ansträngning. Här kan du lära dig mer om den förbättrade metafälten i Shopify 2.0.
• Förbättringar i temaredigeraren: Istället för att gräva ner i flera lager för att göra ändringar visar den förbättrade temaleditorn ett trädvy av allt innehåll på en sida i sidofältet.
• Nya utvecklarverktyg: Med GitHub-integration, uppgraderad Shopify CLI och Theme Check-verktyg kan dina Shopify-utvecklare hjälpa dig förbättra din butiksutveckling.
• En ny referenstema: Designad och byggd för att stödja Online Store 2.0-flexibiliteten - Shopify Dawn-temat är det första källöppna referenstemat. Här kan du läsa mer om temat i vår detaljerade blogg om Shopify Dawn-temat.

Djupdyk i dessa tillkännagivanden om Shopify Online Store 2.0 med vår introduktionsblogg här.

Steg för att komma igång med Shopify Online Store 2.0

Innan du börjar migrera ditt tema till Online Store 2.0 måste du bestämma dig för temautvecklingsverktyget. Om du vill använda den förbättrade Shopify CLI måste du installera CLI genom att följa nedanstående kommandon.

För Windows:

• Steg 1: Först, installera Ruby+Devkit med RubyInstaller for Windows.
• Steg 2: Använd pakethanteraren RubyGems.org för att installera Shopify CLI.
• Steg 3: Öppna en ny terminal, navigera till hemkatalogen och kör kommandot 'gem install shopify-cli'.
• Steg 4: För att verifiera installationen, kör 'shopify version'-kommandot.

För macOS:

• Om du använder RubyGems.org, följ steg 3 och steg 4 för att installera och verifiera.
• Om du använder Homebrew, kör följande kommandon 'brew tap shopify/shopify' och 'brew install shopify-cli' för att installera, och för verifiering, följ steg 4.

Steg för att migrera ett tema till Shopify Online Store 2.0

För att hjälpa dig välja de bästa Shopify 2.0-temana och förstå temarkitekturen har vi skrivit en blogg om de bästa temana i Shopify Online Store 2.0 tillsammans med Shopify 2.0 temaarkitektur. När du har identifierat temat du ska arbeta med, följ vänligen stegen nedan:

Steg 1: Säkerhetskopiera temat

Det är alltid säkrare att ha ett säkerhetskopieringsalternativ för att inte gå vilse. Om du använder Theme Development Kit, duplicera temat och håll det osynligt. Med Shopify CLI kan du ladda ner temat med kommandot 'shopify theme pull'.

Steg 2: Identifiera och ta bort avsnittsreferenser

Eftersom avsnitt görs tillgängliga för varje sida i Shopify Online Store 2.0 genom att rendera sidtypen i JSON-format måste du börja konvertera ditt temaliquidmall till en JSON-mall.

• För att börja konvertera måste du ta bort alla {% section %} taggar samtidigt som du gör kontinuerliga anteckningar.
• För att ta bort referenserna måste du följa stegen nedan:
  • Steg 1: Lokalisera filen i /mallar-mappen. I vårt fall, låt oss betrakta produkt.liquid-filen.
  • Steg 2: Sök efter eventuella {% section %} taggar och notera platsen och namnen.
  • Steg 3: Ta bort taggarna från produkt.liquid-filen.

Steg 3: Flytta koden till avsnittet från mallformatet

Efter att du har tagit bort avsnitstarts måste du bestämma var du vill flytta mallkoden.

• För att lägga till koden i ett befintligt avsnitt,
  • Öppna din valda avsnittsfil
  • Kopiera koden från produkt.liquid
  • Klistra in koden ovanför öppningen {% schema %} taggar i avsnittsfilen.
• För att lägga till koden i ett nytt avsnitt,
  • Först måste du skapa en ny fil i /avsnitt-mappen
  • Kopiera och klistra in återstående kod i den tomma avsnittsfilen senare.

Steg 4: Ta bort Liquidmallfilen

Efter att du har kopierat och klistrat, måste du ta bort produkt.liquid från /mallar-mappen, eftersom du inte kan ha både produkt.liquid och produkt.json-filer i /mallar-mappen samtidigt.

Steg 5: Skapa en JSON-mallfil

Efter att du har tagit bort produkt.liquid-filen kan du skapa ersättningsmallen produkt.json genom att följa stegen:

• Steg 1: Skapa filen:
  • Om du använder kodredigerare,
    • Välj Lägg till en ny mall.
    • I rullgardinsmenyn Skapa en mall, välj produktalternativet.
    • Välj JSON som malltyp.
  • Om du skapar lokalt, skapa en ny JSON-fil (i vårt fall, låt oss anta produkt.json) och spara den i /mallar-mappen.
• Steg 2: Efter att ha skapat produkt.json-filen, ersätt all standardkod med lämpliga typer i filen.
• Steg 3: Spara filen.

Steg 6: Testa mallen

Efter att ha skapat JSON-mallen kan du testa ändringarna genom att gå till produktens sida från temaleditorn och leta efter alternativet 'Lägg till avsnitt'.

För att se en modell av hur Shopify Online Store 2.0 kan gynna handlare och Shopify-utvecklare 2021, ta en titt på vår Shopify 2.0 BFCM-fördelar blogg.

Steg 7: Lägg till referenser och ordning för avsnitten

Om din produkt.liquid-mallfil innehåller ytterligare avsnitt, kan du definiera dessa referenser inom den skapade produkt.json-filen och sedan definiera deras ordning.

Steg 8 (Valfritt): Lägg till stöd för appblock till avsnitten

Med den uppdaterade temarkitekturen och införandet av temaapplikationstillägg med appblock kan du dra nytta av detta genom att lägga till den nödvändiga schematiken och rendera blockinnehållet.

• För att rendera blockinnehåll: Kontrollera lämplig typ och rendera sedan blocket med en {% render block %} tagg.
• För att lägga till appblock till ett avsnitt: Du måste lägga till block av typen @app till avsnittsschemat.

Steg 9: Upprepa stegen

För att konvertera alla avsnitten måste du följa ovanstående steg från steg 1 till steg 7 för att göra ditt tema kompatibelt med Shopify Online Store 2.0.

Hur man installerar Dawn-temat på Shopify via Shopify/Dawn Theme GitHub

Du kan inte ladda ner Shopify Dawn-temat via Shopify/dawn theme GitHub. För att snabbt ladda ner Shopify Dawn-temat kan du besöka Shopify Theme Store och söka efter Dawn-temat.

Eftersom Shopify/dawn theme GitHub hjälper dig att bygga och spåra ändringar av temakoden. Github-integrationen tillåter dina Shopify-utvecklare att samarbeta säkert med versionskontroll vid redigering av teman och dela förhandsvisningar av ändringar innan de publiceras på ett live-tema.

Slutsats:

Även om det inte är obligatoriskt för handlare att dra nytta av Shopify 2.0-funktionerna rekommenderar vi starkt våra handlare och andra att uppleva Shopify Online Store 2.0. Det erbjuder flexibilitet att göra ändringar och ger möjligheter att växa bortom det grundläggande.

Om du ser fram emot att implementera, migrera eller starta med Shopify Dawn-temat kan våra Shopify Online Store 2.0-experter hjälpa dig att dra nytta av de nya funktionerna, arkitekturen, designstilarna och andra aspekter.