Tilbage

Shopify Online Store 2.0 og dig

Endelig er den her, en revideret oplevelse af onlinebutikken, der tager højde for næsten alle de klager, som vi som Shopify-udviklere har rejst gennem årene. Drag n drop-sektioner uden for hjemmesiden? Ja, det kan du. Metafields, uden en app? Jep. En direkte GitHub-integration? I dette blogindlæg vil jeg dykke ned i disse monumentale ændringer og skitsere, hvordan vi i Kvalifik vil bruge dette til at styrke vores Shopify-udvikling og -tilbud.
21. november 2021
Af
Frederic Widding
,
Tidligere Lead E-commerce Developer

Sektioner overalt

Det er nok den mest efterspurgte funktion og den, som de fleste butiksejere vil lægge mærke til. For dem, der ikke er bekendt med Shopify som et CMS og e-commerce platform, er her et hurtigt resumé:

Shopify håndterer alt, hvad der har med salg af produkter online at gøre. Dette omfatter opsætning af produkter, lagerstyring, accept af betalinger, håndtering af e-mailmeddelelser til kunderne og ordreudfyldelse. Det omfatter også en online butiksfacade, hvor kunderne kan finde og købe produkter.

Som et CMS var den butiksfacade, som Shopify oprindeligt tilbød, begrænset sammenlignet med traditionelle systemer som WordPress. Hele frontend'en for Shopify er bestemt af et tema og er enten købt "fra hylden" eller skræddersyet til din butik af folk som os.

Tidligere havde du produktsider og undersider, men disse var statiske, og det krævede at ændre disse udvikling af temaer. Hjemmesiden var speciel, da den havde dynamisk indhold, der kunne trækkes og slippes ned sektioner som gjorde det muligt for butiksejere at bygge deres egne butiksfacader. Du kunne ikke oprette en ny, unik landingsside til dine nye produktdråber uden at hyre en udvikler til at oprette en skabelon for dig. Vil du tilføje nye datafelter til dine produkter, så du kan vise kunderne, hvor stort det er? Det krævede udvikling og en app fra en tredjepart.

Alt dette har ændret sig nu.

I den nye Online Store 2.0 har hver side adgang til den samme drag n' drop builder som forsiden, og butiksejere kan oprette så mange brugerdefinerede skabeloner, som de ønsker, direkte fra temaeditoren.

Et robust værktøjssæt til udvikling

Denne nye opdatering af Shopify forbedrer også værktøjssættet, der er tilgængeligt for os som temaudviklere, så vi kan bygge endnu bedre temaer.

Hos Kvalifik havde vi allerede opbygget en ramme omkring temaudvikling, som gjorde det muligt for os at udnytte moderne udviklingspraksis som f.eks. Kontinuerlig integration og levering (CI/CD), når vi udviklede. Vi gjorde dette ved at integrere GitHub og to butiksmiljøer, en udviklings- og en produktionsbutik, i vores arbejdsgang. Når vi arbejdede på en butik, skubbede vi vores kode til en udviklingsbutik, kvalitetssikrede ændringerne og flyttede den derefter via vores CI/CD-pipeline til et staging-tema på den live produktionsbutik. Dette gav os et sidste kontrolpunkt, inden vi gik live, hvor vi kunne teste eventuelle ændringer med liveprodukter osv. Endelig, når alt var godkendt, skubbede vi bare de seneste ændringer til live-butikken; ingen tema-skift eller klientinddragelse; bare en kontinuerlig strøm af funktioner, fejlrettelser og koder.

Nu har Shopify i høj grad forenklet denne proces for os. De har bygget et helt nyt CLI-værktøj og lader os linke et GitHub-repositorium direkte til en Shopify-butik. Nu er robuste CI/CD-flow nemmere end nogensinde før at implementere, og det vil reducere den tid, der bruges på at oprette nye projekter.

Værktøjer, der garanterer høj kvalitet og effektive butiksfacader

Den nye CLI tilbyder også en indbygget linter, som kan ses som en stavekontrol for din kode; den kører gennem hele temaet og kontrollerer, om koden overholder Shopify's bedste praksis. På denne måde kan vi sikre, at alle temaer, som vi leverer, lever op til de bedste udviklingspraksisser.

Der er også et helt nyt Lighthouse-værktøj til rådighed, som giver os mulighed for at teste en butiks Lighthouse-score som en del af vores CI/CD. Hvis scoren falder under en tærskelværdi, kan vi beslutte at stoppe implementeringen, gå tilbage og se, hvad der er ændret siden sidste gang, vi gik forbi. På denne måde kan vi garantere, at enhver kode, vi udruller, ikke skader butikkens ydeevne. Dette er både godt for kundernes UX, når de navigerer på en webside, men også afgørende for SEO, da Google for nylig begyndte at kigge på sidehastighed, når de rangerer websider.

Hvad betyder det for eksisterende Shopify-butikker?

Den nye Online Store 2.0 og alle dens forbedringer for butiksejere blev taget i brug i løbet af juli, så du har allerede fået det meste af dette - intet arbejde er nødvendigt. Det, der kræver noget arbejde, er at få oprettet sektioner overalt i dit tema. Dette er heldigvis en mindre ændring, som nemt kan foretages, og som sandsynligvis allerede er tilgængelig som en opdatering til dit eksisterende tema. Hvis ikke, så tilbyder vi hos Kvalifik en opgraderingspakke, hvor vi opdaterer dine eksisterende temaskabeloner, så de fungerer med sections anywhere. Vi lint også dit tema og sørger for at alt er i orden i forhold til kodestandarder.

Hvis du er interesseret i at få et check-up for din butik, kan du kontakte vores E-Commerce konsulent Rebecca på rebecca@kvalifik.dk.

Fortsæt med at læse