Padel Pro Shop: ombyggt tema, racketquiz och flerspråkig SEO

Vad är Padel Pro Shop?

En av världens största padelbutiker, baserad i Spanien. De har sålt i många år och har ett mycket gott rykte. Målet var att införa ett tema som konverterar bättre och har en uppdaterad design, utan att tappa varumärkets identitet.

Nya sektioner

Jag utgick från Clean Canvas Enterprise-temat och byggde egna sektioner ovanpå det, bland annat en ny produktsida, en megameny och en storleksguide.

Padel Pro Shops produktsida med namnpersonalisering och dynamiskt leveransdatum

Jämfört med det gamla temat är produktsidan lättare att förstå: specifikationer, leveransdatum och personalisering syns direkt på sidan.

Fler nya sektioner

Bildpunkter på produktsidan som lyfter fram padelracketens specifikationer

Storleksguide för padelracketar med filter för vikt och grepp

Anpassningar

Namnpersonalisering

Padel Pro Shop ville erbjuda namnpersonalisering på vissa produkter. De hade redan en lösning från sitt gamla tema som använde separata produkter för att hantera tilläggskostnaden för personaliseringen, i stället för Shopifys inbyggda anpassningsfunktioner.

Jag behöll den produktbaserade lösningen men gjorde om hur den syns: personaliseringsprodukten visas inte längre som en egen rad utan slås ihop med huvudprodukten i varukorgen. Tar kunden bort racketen försvinner graveringen automatiskt.

Namnpersonalisering av racket hos Padel Pro Shop: graveringen visas som en del av huvudproduktens rad i varukorgen

Leveransdatum

Leveransdatumet räknas ut automatiskt utifrån dagens datum, produktens lagersaldo och lagrets arbetsdagar.

Quiz och spelarslider

Quiz

En annan funktion jag byggde var ett produktrekommendationsquiz för Babolats padelracketar. Quizet ställer några frågor om:

Spelstil
Erfarenhetsnivå
Kraft eller kontroll
Budget

Quizet smalnar av alternativen steg för steg och visar till sist de Babolat-racketar som passar bäst. Det gör valet enklare för kunder som är osäkra på vilken modell de ska välja.

Padel Pro Shops racketguide i quizform som rekommenderar racketar utifrån spelstil och vikt

Quizet går att anpassa helt i den vanliga temaredigeraren: varje fråga är en sektion och varje svarsalternativ är ett block i sektionen. Så quizet går att ändra utan någon app.

Anpassning av quizsektionen i temaredigeraren

Spelarslider

Spelarslidern visar padelproffsen butiken sponsrar och racketarna de spelar med. Varje spelare har en egen kollektion, och Padel Pro Shop ville ha ett enkelt sätt att bläddra bland dem på startsidan.

Slidern bygger på metaobjects som lagrar spelardata som:

Namn och ranking
Spelarbild
Kopplad produktkollektion
Beskrivning av spelarens karriär

Upplägget gör det enkelt för butiksadmin att uppdatera spelarinformation och rankingar direkt i Shopifys admin. Sektionen sorterar spelarna efter ranking.

När man väljer en spelare laddas spelarens kollektion under slidern och URL:en uppdateras. Kunden kan alltså handla det favoritspelaren använder, och sidan behåller all SEO som en vanlig kollektion har.

Slidern går att svepa på mobil, och spelarbilderna laddas först när de behövs så att sidan inte blir tyngre.

Slider med sponsrade spelare på Padel Pro Shops startsida som länkar varje proffs till sitt signaturracket

SEO och hreflang-optimering

En av de största SEO-utmaningarna var att hantera översatta produkt-URL:er (handles) och hreflang-taggar på flera språk. Eftersom Padel Pro Shop ville ha översatta handles men också manuell kontroll över hreflang-länkarna på sidan stötte jag på ett problem:

Som standard exponerar Shopify bara huvudspråkets produkt-handles i storefronten, så det går inte att få hreflang rätt med översatta handles.

För att lösa det byggde jag en egen app som synkar hreflang och som:

Lagrar översatta produkt-handles i metafields för varje språk så att temat kan läsa dem
Genererar korrekta hreflang-taggar med de översatta URL:erna
Synkar allt automatiskt när produkter uppdateras

Nu ser Google vilka produktsidor som är översättningar av varandra, vilket är det hreflang är till för.

Egen Shopify-app som hanterar hreflang-taggar för Padel Pro Shops regionala butiker

Kollektionssidor

På kollektionssidorna byggde jag:

Oändlig scroll i stället för paginering
Slutsålda produkter hamnar sist i varje kollektion
Filter med:
- Prisintervall
- Varumärke
- Produkttyp
- Resultat som uppdateras utan att sidan laddas om
- En filterpanel som fungerar på mobil

Padel Pro Shops kollektionssida med filter för varumärke, vikt, balans och form

Nedräkning och kampanjfunktioner

Butiken kör “Pro Shop Thursdays” varje vecka och större reor några gånger om året. Jag byggde en nedräkning för det, i flera delar:

Systemet hanterar automatiskt ett utvalt menyval som bara visas under aktiva nedräkningar. Under “Pro Shop Thursdays” länkar det till Pro Shop Thursdays-kollektionen, och under Black Friday till Black Friday-kollektionen. Menyvalet visas dessutom med en särskild badge för att dra till sig mer uppmärksamhet.