Verkkokaupan viilausta koodin muokkauksella - mistä ja miten?

Verkkokaupan viilausta koodin muokkauksella - mistä ja miten?

Verkkokaupan muokkaus Shopifyssä onnistuu pääosin aina teeman muokkauksella “normaaliin” tapaan. On kuitenkin olemassa tilanteita, jolloin teeman muokkaus perinteiseen tapaan ei enää taivukkaan kaikkiin toivomuksiin - tällöin esiin astuu sanoja kuten: HTML, CSS, Liquid.

Tässä kirjoituksessa esitellään mistä Shopifyssä voi koodi -tiedostoja muokata sekä muutama helppo koodin muokkaus esimerkki, joita voit tarpeen mukaan hyödyntää omassa kaupassasi.

Mistä koodia voi muokata?

Koodiin pääsee käsiksi Shopifyn hallintapaneelin pääsivulta. Muista aina ottaa kopio teemasta, jotta et riko vahingossakaan mitään jo rakennettua. Älä koskaan muokkaa livenä olevan teeman koodia, jottei kauppasi mene sekaisin, kun asiakkaasi ovat shoppailemassa.

Klikkaa hallintapaneelista:

1. Actions
2. Duplicate
3. Edit code

Kokoelma URLin lyhentäminen

Tehdessäsi Shopifyssä tuotteillesi kokoelman, jonka sisällä on tuotteita - tulee URLista hävyttömän pitkä ja typerän näköinen. URL näyttää tältä:

www.digikaupat.fi/collections/kokoelmani/products/tuotteeni

Jokainen voi kuvitella minkä näköinen URL, jos kokoelman ja tuotteiden nimikkeet ovat pitkiä. Koodia muokkaamalla saadaan kuitenkin poistettua osoitteesta “/collections/kokoelmani” -pois. Tämä ei vaikuta verkkokaupan käytännön toimintaan mitenkään.

Ohjeet URLin lyhennykseen:

1. Klikkaa “Edit code” (muista ottaa kopio!)
2. Etsi kansio “product-grid-item.liquid”
3. Teemasta riippuen koodista poistettava kohta vaihtelee >> esimerkin Simple -teemassa koodi on rivillä 26.
4. Poista koodista “| within: collection”
5. Klikkaa “Save”

Tämän toimenpiteen jälkeen yllämainittu ylipitkä URL on trimmattu muotoon:

www.digikaupat.fi/products/tuotteeni

Ostoskori kuvakkeen piilottaminen

Rakentaessa verkkosivun Shopifyyn ilman verkkokauppaa voi etusivulla olevan ostoskori -kuvakkeen piilottaminen olla visuaalisista syistä järkevää.

Ohjeet ostoskori -kuvakkeen piilottamiseen:

  1. Avaa kansio “Header.liquid”
  2. Kirjoita hakuun “site-header__cart”
  3. “class=”site-header__cart”>
  4. Kirjoita “hide” -sana koodiin
  5. “class=”hide site-header__cart”>

Hide -komennolla saadaan verkkosivun ylänurkassa oleva ostoskori kuvake piiloon. Myöhemmin mahdollisesti katumapäälle tullessasi poista tekemäsi muutos koodista, jolloin ostoskori kuvake palaa sivulle.

Loppusanat

Koodia muokkaamalla on mahdollista muotoilla omasta verkkokaupasta enemmän yksilöity. Verkosta löytyy paljon ohjeita Shopify verkkokaupan koodin muutoksiin, joten ei muutakuin kokeilemaan. Muista vain aina ottaa kopio teemasta, jotta voit aina palata alkuun, jos jokin menee pieleen.

Onko sinulla tuote tai palvelu, joka tarvitsee verkkokauppaa?

Ota yhteyttä ja rakennetaan tuotteillesi kauppa verkkoon!