TyönäytteetWorkReferenssiCase study
Hifikeidas. Verkkokauppa tuotesivuista kassalle asti.Hifikeidas. An online store, from product pages to checkout.
Hifikeidas myy ja asentaa autohifiä Ylivieskassa. Rakensin liikkeelle verkkokaupan, jossa on yli kolmetuhatta tuotetta1, ostoskori, kassa ja asiakastili. Valmisalustaa ei ole, vaan koodi on kirjoitettu tätä kauppaa varten.
Hifikeidas sells and installs car audio in Ylivieska, Finland. I built the shop an online store with over three thousand products1, a cart, a checkout and customer accounts. There is no off-the-shelf platform, the code was written for this store.
LähtötilanneStarting point
Autohifissa asiakas tietää harvoin valmiiksi, mitä hän tarvitsee. Kaiutin ei sovi joka autoon, subwoofer vaatii oikean kokoisen kotelon ja vahvistin oikean paksuisen virtajohdon. Myymälässä tämän neuvonnan hoitaa myyjä tiskin takaa.
In car audio the customer rarely knows in advance what they need. A speaker does not fit every car, a subwoofer needs an enclosure of the right size, and an amplifier needs a power cable of the right gauge. In the shop, the salesperson handles that advice across the counter.
Verkkokaupan piti pärjätä ilman myyjää. Tarvittiin kauppa, joka näyttää koko valikoiman selkeästi ja auttaa valinnassa niin, että aloittelijakin uskaltaa tilata oikean osan ensimmäisellä kerralla.
The online store had to manage without the salesperson. It needed to show the whole catalogue clearly and help with the choice, so that even a beginner dares to order the right part on the first try.
RatkaisuSolution
Kaupassa tuotteet on jaettu selkeisiin kategorioihin: kaiuttimet, soittimet, subwooferit, vahvistimet ja asennustarvikkeet. Tuotteen löytää myös haulla tai merkin mukaan. Ostaminen hoituu ostoskorilla ja kassalla, ja oman tilin saa auki Google-tunnuksella ilman uutta salasanaa.
The products are split into clear categories: speakers, head units, subwoofers, amplifiers and installation supplies. A product can also be found through search or by brand. Buying happens through a cart and a checkout, and a customer account opens with a Google sign-in, no new password to remember.
Valinnan avuksi koodasin kolme laskuria. Kotelolaskuri kertoo kotelon sisätilavuuden ulkomitoista, kytkentälaskuri subwooferin kytkennän ja impedanssin, ja kaapelilaskuri virtajohdon paksuuden sekä sulakkeen koon. Niiden rinnalla ovat oppaat ja audiosanasto. Sama tieto, jonka ennen sai vain tiskiltä, on nyt kaupassa luettavana.
To help with the choice I coded three calculators. The enclosure calculator gives the internal volume from outside measurements, the wiring calculator gives the subwoofer wiring and impedance, and the cable calculator gives the power cable gauge and the fuse size. Next to them sit the guides and an audio glossary. The knowledge you used to get only at the counter is now in the store, in writing.
Asennuspalvelulla on oma sivunsa työnäytteineen, ja kysymyksen voi laittaa suoraan WhatsAppiin. Tilauksen voi tarvittaessa perua itse omalta tililtä.
The installation service has a page of its own with work samples, and questions go straight to WhatsApp. When needed, an order can be cancelled from the customer's own account.
Mitä teinWhat I did
- UlkoasuDesign
- Suunnittelin kaupan ulkoasun ja käyttöliittymän. Tuotekortit, kategoriasivut ja kassa on piirretty tälle kaupalle, ei ostettu valmiina teemana.I designed the store's look and interface. The product cards, category pages and checkout were drawn for this store, not bought as a theme.
- Kaupan koodiStore code
- Tuotesivut, haku, ostoskori, kassa ja tilausten hallinta. Kirjoitin koodin itse, joten kauppaan voi lisätä juuri ne ominaisuudet, joita liike tarvitsee.Product pages, search, cart, checkout and order handling. I wrote the code myself, so the store can grow exactly the features the shop needs.
- AsiakastilitAccounts
- Kirjautuminen hoituu Google-tunnuksella. Omalta tililtä asiakas näkee tilauksensa ja voi perua tilauksen ilman puhelinsoittoa.Sign-in works with a Google account. From their own account the customer sees their orders and can cancel one without a phone call.
- Laskurit ja oppaatCalculators and guides
- Kolme laskuria, oppaat ja audiosanasto. Ne tekevät verkossa saman työn, jonka myyjä tekee myymälässä.Three calculators, the guides and an audio glossary. Online they do the same job the salesperson does in the shop.
- YlläpitoMaintenance
- Pidän kaupan kunnossa julkaisun jälkeen. Päivitykset ja pienet muutokset hoituvat ilman uutta projektia.I keep the store in working order after launch. Updates and small changes happen without a new project.
LopputulosOutcome
Hifikeitaan verkkokauppa on kokonaan liikkeen oma, viimeistä riviä myöten. Kun tulee uusi tarve, ominaisuus lisätään koodiin sen sijaan, että odotettaisiin valmisalustan seuraavaa versiota. Ja kun jokin kaipaa korjausta, tekijän tavoittaa yhdellä sähköpostilla.
The Hifikeidas store is the shop's own, down to the last line. When a new need comes up, the feature gets added to the code instead of waiting for a platform's next release. And when something needs fixing, the person who built it is one email away.
[LISÄÄ ASIAKKAAN KOMMENTTI: pyydä Hifikeitaalta pari lausetta yhteistyöstä ja laita ne tähän]
[ADD A CLIENT QUOTE: ask Hifikeidas for a couple of sentences about the project and put them here]
TiedotDetails
- AsiakasClient
- Hifikeidas, autohifiliike Ylivieskassa.Hifikeidas, a car audio shop in Ylivieska, Finland.
- ToimitusDelivered
- Verkkokauppa, asennuspalvelun sivut, laskurit, oppaat ja audiosanasto.The online store, the installation service pages, calculators, guides and an audio glossary.
- TekniikkaBuilt with
- Astro ja Cloudflare. Kaupan koodi on kirjoitettu itse, valmisalustaa ei ole.Astro and Cloudflare. The store's code is written by hand, there is no off-the-shelf platform.
- OsoiteAddress
- hifikeidas.fi
- JulkaistuLaunched
- [LISÄÄ AJANKOHTA: milloin kauppa avattiin][ADD DATE: when the store opened]
Katso itseSee for yourself
Paras tapa arvioida kauppa on käyttää sitä. Selaa valikoimaa, kokeile laskureita ja katso, miten nopeasti sivut aukeavat.
The best way to judge a store is to use it. Browse the catalogue, try the calculators and see how fast the pages open.
Jos yrityksesi tarvitsee verkkokaupan, kerro sähköpostilla mitä myyt ja mihin mennessä kaupan pitäisi olla auki. Osoite on topidowork@gmail.com. If your business needs an online store, tell me by email what you sell and when the store should be open. The address is topidowork@gmail.com.