Turn Me Royal: ombyggt tema, kortare laddtid och A/B-tester

Vad är Turn Me Royal?

Turn Me Royal är ett företag som gör personliga konstverk: kundens foton görs om till porträtt i kunglig stil.

De ville bygga om sitt tema för att förbättra laddtid, användbarhet och konverteringsgrad, och samtidigt få in en mängd nya funktioner och ny design.

Sektion från sajten som visar hur det fungerar

Problemen med det gamla temat

Gammal design som inte var byggd för att få folk att köpa.
Svårt att redigera: även små ändringar krävde en utvecklare, och koden var rörig och svår att underhålla.
Långa laddtider, där Largest Contentful Paint (LCP) och First Contentful Paint (FCP) var de stora flaskhalsarna.

Turn Me Royals startsida före omdesignen: det gamla Shopify-temat innan prestandabygget

Det nya temat och prestandaoptimeringarna

Jag skrev om stora delar av koden, byggde nya sektioner och flyttade temat till Theme OS 2.0 med en byggprocess som buntar koden.

Vad som gav mest

Laddtiden gick från 9 s till 2-3 s
Bilder i rätt storlek för mobil och desktop, med lazy loading
Färre tredjepartsskript och bibliotek, så att temat laddar mindre kod

Turn Me Royal i PageSpeed före och efter: laddtiden sänkt från 9 s till 2-3 s efter ombyggnaden av temat

A/B-test och CRO-insikter

Med Hotjar hittade jag problem som “ghost clicks” (klick på saker som inte går att klicka på) och ytor som ingen använde. Det avgjorde vad som skulle ändras och testas.

Hotjar-scrollheatmap över Turn Me Royals nya startsida som visar engagemanget ovanför vecket

A/B-test med VWO

Alla större ändringar A/B-testades med en egenbyggd VWO-integration. Shopify saknar en fullständig integration med VWO, så jag byggde ett eget upplägg för A/B-test, inklusive pristester med Shopify Functions.

VWO-testvariant av Turn Me Royals startsida: ny hero-komposition

Resultat från VWO:s A/B-test av Turn Me Royals nya startsida

Nya funktioner och förbättringar

Här är några av de viktigaste förbättringarna jag gjort för Turn Me Royal.

Ny visuell meny

Den gamla menyn var svår att använda, särskilt på mobil. Den nya har bilder för varje kategori, och jag A/B-testade den mot den gamla.

Extra husdjur (Shopify Functions)

Kunden kan nu lägga till ett extra husdjur i sitt porträtt, med ett automatiskt pristillägg via Shopify Functions.

CRO-optimerat köpflöde med funktionen för extra husdjur

Ny varukorg med merförsäljning

Jag byggde en ny varukorg där kunden kan lägga till en digital version av porträttet, och som är snabbare att använda. Den A/B-testades mot den gamla, och det genomsnittliga ordervärdet (AOV) gick upp.

Turn Me Royals utfällbara varukorg med merförsäljning av digital version, byggd för att höja AOV

Optimerat kontaktformulär

Kontaktformuläret tar nu flera bilder och visar dem innan man skickar. Det använder egen formulärlogik i stället för Shopifys standard.

Turn Me Royals kontaktformulär med uppladdning av referensfoton för beställning av porträtt

Flera Facebook-pixlar

Jag byggde en egen pixelintegration med en global Facebook-pixel plus en per marknad, så att varje marknads annonskampanjer får rätt data.

Landningssidor och kampanjer

I det gamla temat gick det inte att göra egna landningssidor utan specialkod eller en app. Nu bygger de själva sidor för kampanjer som alla hjärtans dag och jul i temaredigeraren.

Landningssida i Shopify för alla hjärtans dag

Avslutande tankar

Det här har varit ett riktigt bra projekt att jobba med, med många olika delar av en Shopify-butik. Vill du ha något liknande? Hör av dig.