Shopify kondigt zijn meest significante verandering tot nu toe aan - Shopify Online Store 2.0, verwijzend naar nieuwe infrastructuur, tools en technologieën die je helpen bij het bouwen van een flexibele winkel. Hieronder staan de nieuwe tools en functies van Shopify Online Store 2.0:

• Verbeterde thema-architectuur: Met secties beschikbaar voor alle pagina's, kunnen handelaren zoals jij een reeks nieuwe mogelijkheden ontgrendelen om klantervaringen te personaliseren en te verbeteren.
• Flexibele winkelinhoud:
• De thema-app-extensies met app-blokken stellen je in staat om eenvoudig meerdere Shopify-apps te integreren en te verwijderen zonder enige overgebleven 'ghost code'.
• De verbeterde thema-editor stelt je in staat om meta-waarden dynamisch toe te voegen. Dat betekent dat je moeiteloos extra informatie aan het product kunt toevoegen. Voor meer informatie, zie onze Shopify 2.0 verbeterde metafields blog.
• Verbeteringen aan de thema-editor: In plaats van diep in meerdere lagen te graven om wijzigingen aan te brengen, toont de verbeterde thema-editor een 'tree-view' van alle inhoud op een pagina in de zijbalk.
• Nieuwe ontwikkelaarstools: Met GitHub-integratie, geüpgradede Shopify CLI en Themacontroletools kunnen Shopify-ontwikkelaars je helpen bij het optimaliseren van de ontwikkeling van je winkel.
• Een nieuw referentie-thema: Ontworpen en gebouwd om Online Store 2.0 flexibiliteit te ondersteunen - Shopify Dawn-thema is het eerste bronbeschikbare referentie-thema. Je kunt meer lezen over het thema in ons gedetailleerde Shopify Dawn-thema review blog.

Duik dieper in deze aankondigingen van Shopify Online Store 2.0 met onze Shopify 2.0 introductie blog.

Stappen om aan de slag te gaan met Shopify Online Store 2.0?

Voordat je begint met het migreren van je thema naar Online Store 2.0, moet je beslissen over de thema-ontwikkelingstool. Als je de verbeterde Shopify CLI wilt gebruiken, moet je de CLI installeren door de onderstaande commando's te volgen.

Voor Windows:

• Stap 1: Installeer eerst Ruby + Devkit met RubyInstaller voor Windows.
• Stap 2: Gebruik de RubyGems.org package manager om Shopify CLI te installeren.
• Stap 3: Open een nieuwe terminal, navigeer naar de homedirectory en voer het commando 'gem install shopify-cli' uit.
• Stap 4: Om de installatie te controleren, moet je het commando 'shopify version' uitvoeren.

Voor macOS:

• Als je RubyGems.org gebruikt, volg dan stap 3 en stap 4 om te installeren en te controleren.
• Als je Homebrew gebruikt, voer dan de volgende commando's uit "brew tap shopify/shopify" en "brew install shopify-cli" om te installeren, en volg voor verificatie stap 4.

Stappen om een Thema te migreren naar Shopify Online Store 2.0

Om je te helpen bij het selecteren van de beste Shopify 2.0-thema's en het begrijpen van de thema-architectuur, hebben we een Shopify Online Store 2.0 beste thema's blog geschreven samen met Shopify 2.0 thema-architectuur. Zodra je het thema hebt geïdentificeerd waar je aan gaat werken, volg dan vriendelijk de onderstaande stappen

Stap 1: Maak een back-up van het thema

Het is altijd veiliger om een back-upoptie te hebben voor het geval je verdwaalt. Als je Theme Development Kit gebruikt, dupliceer het thema dan en houd het niet-gepubliceerd. Met behulp van Shopify CLI kun je het thema downloaden met het commando 'shopify theme pull'.

Stap 2: Identificeer en verwijder sectiereferenties

Aangezien secties beschikbaar zijn voor elke pagina in Shopify Online Store 2.0 door het paginatype in JSON-indeling weer te geven, moet je beginnen met het omzetten van je thema Liquid-sjabloon in een JSON-sjabloon.

• Om te beginnen met converteren, moet je alle {% sectie %} tags verwijderen terwijl je voortdurend aantekeningen maakt.
• Ten tweede, om de verwijzingen te verwijderen, moet je de onderstaande stappen volgen:
• Stap 1: Zoek het bestand in de /templates directory. In ons geval, laten we het bestand product.liquid overwegen.
• Stap 2: Zoek naar eventuele {% sectie %} tags en maak een aantekening van hun locatie en namen.
• Stap 3: Verwijder de tags uit het product.liquid bestand.

Stap 3: Verplaats de code naar de sectie van het sjabloonformaat

Nadat je de sectietags hebt verwijderd, moet je beslissen waar je de templatescode naartoe wilt verplaatsen.

• Om de code toe te voegen aan een bestaande sectie,
• Open het door jou gekozen sectiebestand
• Kopieer de code van de product.liquid
• Plak de code boven de opening {% schema %} tags in het sectiebestand.
• Om code toe te voegen aan een nieuwe sectie,
• Eerst moet je een nieuw bestand aanmaken in de /sections directory
• Vervolgens kopieer en plak je de resterende code in het lege sectiebestand.

Stap 4: Verwijder het Liquid-sjabloonbestand

Nadat je klaar bent met kopiëren en plakken, moet je het product.liquid bestand uit de /templates directory verwijderen, aangezien je niet tegelijkertijd zowel product.liquid- als product.json-bestanden in de /templates directory kunt hebben.

Stap 5: Maak een JSON-sjabloonbestand aan

Nadat je het product.liquid bestand hebt verwijderd, kun je het vervangende JSON-sjabloon aanmaken door de onderstaande stappen te volgen:

• Stap 1: Het bestand aanmaken:
• Als je een code-editor gebruikt,
• Selecteer 'Een nieuw sjabloon toevoegen'.
• Kies uit het vervolgkeuzemenu 'Een sjabloon maken' de productoptie.
• Selecteer JSON als het type sjabloon.
• Als je lokaal een nieuwe JSON-bestand aanmaakt (in ons geval, laten we aannemen dat dit product.json is), sla het op in de /templates directory.
• Stap 2: Nadat je het product.json bestand hebt aangemaakt, vervang je eventuele standaardcode in het bestand met de juiste typen.
• Stap 3: Sla het bestand op.

Stap 6: Testen van het sjabloon

Nadat je het JSON-sjabloon hebt gemaakt, kun je de wijzigingen testen door naar je productpagina te navigeren vanuit de thema-editor en op zoek te gaan naar de optie 'Sectie toevoegen'.

Om te zien hoe Shopify Online Store 2.0 voordelen kan bieden aan handelaren en Shopify-ontwikkelaars deze BFCM 2021, bekijk onze Shopify 2.0 BFCM voordelen blog.

Stap 7: Voeg verwijzingen en volgorde van de secties toe

Als je product.liquid sjabloonbestand extra secties bevat, kun je deze referenties definiëren in het aangemaakte product.json bestand en vervolgens hun volgorde bepalen.

Stap 8 (Optioneel): Ondersteuning toevoegen voor app-blokken aan secties

Met de bijgewerkte thema-architectuur en introductie van thema-app-extensies met App-blokken, kun je deze introductie benutten door het toevoegen van het noodzakelijke schema en het renderen van de blokinhoud.

• Om een blokinhoud te renderen: Controleer op het juiste type en render de blok met een {% render block %} tag.
• Om het app-blok toe te voegen aan een sectie: Moet je blokken van het type @app toevoegen aan het schema van de sectie.

Stap 9: Herhaal de stappen

Om alle secties om te zetten, moet je de bovenstaande stappen van 1 tot en met 7 volgen om je thema compatibel te maken met Shopify Online Store 2.0

Hoe je het Dawn Thema van Shopify installeert via Shopify/Dawn Theme GitHub

Je kunt het Shopify Dawn-thema niet downloaden via Shopify/dawn Theme GitHub. Om snel het Shopify Dawn-thema te downloaden, kun je de Shopify Theme Store bezoeken en zoeken naar het Dawn-thema.

Aangezien Shopify/dawn Theme GitHub je zal helpen bij het bouwen en bijhouden van wijzigingen in de themacode. De Github-integratie stelt je Shopify-ontwikkelaars in staat om veilig samen te werken met versiebeheer bij het bewerken van thema's en om voorvertoningen van de wijzigingen te delen voordat ze worden doorgevoerd naar een live thema.

Conclusie:

Hoewel het niet verplicht is voor handelaren om gebruik te maken van de Shopify 2.0-functies, raden we onze handelaren en anderen ten zeerste aan om Shopify Online Store 2.0 te ervaren. Het biedt flexibiliteit om wijzigingen aan te brengen en geeft opties om verder te groeien dan basisfunctionaliteiten.

Als je uitkijkt naar implementatie, migratie, of start met het Shopify Dawn-thema, kunnen onze Shopify Online Store 2.0 experts je helpen bij het benutten van de nieuwe functies, architectuur, ontwerpstijlen en meer.