Fra Konsept til Shopify - GorillaGames Brettspill

Hjem / Portefølje / Fra Konsept til Shopify - GorillaGames Brettspill
Hovedbildet: Fra Konsept til Shopify - GorillaGames Brettspill - Kalis Media Nettsiden

Prosjektoversikt

Shopify-butikk som skiller seg ut. Omprogrammering og styling av Shopify-theme basert på detaljerte Adobe XD-design. Integrering av skreddersydde seksjoner og ekstra innstillinger i Shopify Admin, forbedret for optimal brukervennlighet og visuell appell.

Type prosjekt: Shopify Nettbutikk

Kunde: Sillysanta AS

Nettside: gorillagames.no

Oppstart: Januar 2024

Utviklingstid: ca. 2 måneder

Arbeidstid: 35 timer

Problemstillingen

GorillaGames er et relativt nytt varemerke fra Sillysanta AS, en av våre trofaste kunder som vi har jobbet for siden 2018. GorillaGames lager og utgir morsomme norske brettspill med enkle regler.  De har allerede gitt ut 9 spill, som Hvor godt kjenner du egentlig familien din? og TacoSmack, og jobber kontinuerlig med å lage nye spill. Vi har tidligere utviklet en landingsside og programmert inn Mini Games-systemet basert på WordPress for et Gorilla-brettspill som heter Blackoutspillet.

GorillaGames ønsket å lansere en Shopify-butikk som utmerker seg blant andre Shopify-butikker, med sterke farger og friske elementer som fanger oppmerksomheten, og samtidig har et enkelt og rent design. De bestilte et skreddersydd design fra en profesjonell designer som forberedte dette i verktøyet Adobe XD. De valgte også Shopify Impulse Theme som grunnlag for nettsiden.

Rollen vår var å omprogrammere og style Shopify Impulse Theme slik at det tilsvarer designet forberedt i Adobe XD. Dette krevde programmering av nye seksjoner og modifisering av eksisterende seksjoner i Impulse Theme.

Løsningen

Vi begynte jobben med hovedsiden som har fått følgende nye seksjoner, programmert fra bunnen av:

  • Announcement Bar - Lav, blå stripe helt øverst på siden som forteller om gratis frakt (med ikon) og leveringstider, og viser betalingsikoner for VISA, MasterCard osv.
  • Hero Banner - Ny seksjon med stort bakgrunnsbilde og Call to Action-knapp. Denne seksjonen har mange muligheter for tilpasning inne i Shopify Customizer. Her kan bildet lastes opp, separat for mobil og desktop, alle tekstene kan justeres, men også beliggenhet, marginer, fokuspunkt og plassering av knappen.
  • Featured List - Seksjonen der GorillaGames selv kan velge bilde, tekst, farge og lenke.
  • Newsletter - Selvstendig nyhetsbrevseksjon med Klaviyo-integrasjon.
  • Footer - Skreddersydd seksjon nederst på siden med ikon, copyright-tekst og meny som er koblet til navigasjonssystemet til Shopify.

I tillegg måtte vi bygge om visningen av produktboksene når man blar gjennom kategorisidene. Vi programmerte tag-baserte merkelapper som vises på produktbilder, som Bestselger! Nyhet! osv. Når et produkt er på tilbud, vises prisen i en annen farge enn normalprisen. Nederst i produktboksen viser vi stjerner som er koblet til Judge.me-appen, og henter vurderinger derfra.

Vi har også redesignet produktsiden i CSS. Produkt-seksjonen har fått et par ekstra blokker, som flyttbar tittel, ekstra ikoner som er basert på produktets metafields, og en ekstra tekstseksjon.

Handlekurv-skuffen som flyr inn fra høyresiden når man klikker på handlekurv-knappen, har også fått et redesign, slik at den vises riktig på både mobil og desktop, nøyaktig i henhold til de grafiske kravspesifikasjonene vi fikk i Adobe XD.

Den mest krevende utfordringen med dette prosjektet var å gjøre om alle eksisterende seksjoner til et pixel-perfect-utseende som i høyest mulig grad stemmer overens med Adobe XD-design. Vi fikk det omtrent 100 % likt. Alle skreddersydde seksjoner er også kompatible med Shopify Customizer, slik at det er mulig å flytte dem opp og ned som alle andre seksjoner i Shopify. Vi har i tillegg lagt inn mange nye innstillinger som gjør GorillaGames i stand til å endre mye selv, som tekstinnhold, grafiske elementer og justeringer på disse seksjonene.

Vi ønsker GorillaGames lykke til med lanseringen av nettsiden og håper at vi kan møtes til en brettspillkveld neste gang vi er i Oslo.

Adobe XD Shopify Liquid HTML CSS
Kundens uttalelse
logo
“Som alltid veldig fornøyd med jobben Kalis har gjort for oss!“
Sjekk også

Andre Prosjekter

Nyheter

LinkedIn

Tanker

X / Twitter