Pipfrog AS Ulkoasun muotoilut

Transkriptio

1 Ulkoasun muotoilut

2 Ulkoasun muotoilut Oman Pipfrog verkkokauppasi ulkoasun muokkaamiseksti sinun ei välttämättä tarvitse osata HTML -kieltä, ulkoasua voit helposti muuttaa myös ilman tätä taitoa. Ulkoasun muokkauksessa on kaksi aluetta: ulkoasun ja sisällön valinnat. Näistä ensimmäisessä voit määritellä sopivan väripaletin ja toisessa voi muuttaa ja tehdä uusia sivuja verkkokauppaan. Voit käyttää yhtenäistä ulkoasua kaikkissa kauppanäkymissä tai valita erilaisen jokaiselle kauppanäkymälle, kategorialle tai jopa jokaiselle yksittäiselle tuotteelle. Seuraavia ohjeita lukiessasi huomio, että kaikki muutokset on mahdollista tehdä em. tasoilla. Voit muuttaa tasoa hallintapaneelin kauppanäkymä valinnoilla ja tuote- sekä kategoriakohtaisia muutoksia voit muuttaa niiden hallintaosissa. Ulkoasun yleisasetukset Ulkoasun yleisasetuksen muutoksiin valitse Visual -> Ulkoasu, joka jakaantuu seuraaviin osiin: Sisältö - Add short product description in the shopping cart valinta Kyllä lisää kuvauksen Ostoskoriin. Search box enabled, valinnalla Kyllä verkkokaupassa on hakusanaan perustuva etsintä mahdollista. HTLM -head - Kun olet valmis avaamaan verkkokauppasi, muuta valinnaksi Näytä demokappa -ilmoitus EI. Tarvittasessa voit muuttaa myös Meta- ja otsikkotietoja ja URL rivillä näkyvää Head Icon, lisäksi kentässä Satunnaisskriptit voit lisätä muotoilemattoman tekstin, joka näkyy jokaisen sivun ylimpänä tai lisätä muotoillun ylimmän yläosan HTML -kielellä. Tekijänoikeus kenttää voit kirjoitaa omat tietosi oletustekstin tilalle: Pipfrog AS Tuotekuvien vesileimat vesileimoilla voit näyttää tietoja tuotekuvasta kuten tekijäoikeusmerkintöjä, tuotenäytetietoja tai loppuunmyytyjä tuotteita. On mahdolllista luoda vesileimat jokaiselle kolmelle kuvatyypille (isokuva, peruskuva, pikkukuva). Voit myös määrittää vesileimojen paikan suhteellisesti ja läpinäkyvyyden. Sivunumerointi - kun tuottet jakautuva katalogissa usealle sivulle eli niitä on riittävän paljon, niin tässä kohdassa määritelet kuinka monta sivunumeroa näytetään ja mikä on teksti ennen sekä jälkeen sivunumeroinnin. VINKKI! WYSIWYG editori on järjestelmässä oletusarvoisesti päälle- kytkettynä, se voidaan kytkeä pois päältä Järjestelmä -> Asetukset -> Yleiset -> Content Management -> WYSIWYG Options

3 Mukailtu ulkoasu Kun yleiseasetukset on määritelty, voit ryhtyä määrittämään yksilöllistä ulkoasua omaan verkkokauppaasi. Oletusarvona uuden verkkokaupan luonnissa jäjestelmä käyttää ulkoasun teemana Pipfrog Standard nimistä ulkoasuteemaa. Teemassa on valmiiksi määriteltynä millaisia ulkoasuelementtejä (esim. kulmien terävyys, alavalikoiden muotoilu, rajaviivat jne.) ja väripalettia verkkokaupassa näytetään. Oletusteeman lisäksi saatavilla on kolme muuta ulkoasuteemaa. Miten valita näistä neljästä mahdollisesta teemasta se mitä alat käyttämään? Testaa jokaista teemaa erikseen katsomalla niitä verkkokauppanäkymässä ostajan silmin ja päätä sitten mitä teemaa alat muokkaamaan. Kauppanäkymän Ulkoasuteema vaihdetaan valikosta Visual -> Change Store Template -> valitse kauppanäkymä (jos käytössä on useita kauppanäkymiä) ja valitse ulkoasuteema, lisää tarvittaessa voimassaoloaika tai aloitus/lopetuspäivä -> Tallenna Valitse Järjestelmä -> Asetukset -> Advanced Design -> valitse malli, jota tahdot muokata Ylätunniste sivun yläosan kuvien, logon ja värien asetukset Middle Body Content/ Sisällön keskusta sivun keskiosan kuvien ja värien asetukset Alatunniste sivun alaosan kuvien ja värien asetukset Global Settings koko kauppanäkymää koskevat liittyvät värien, kuvien ja tekstien asetukset, jos ylä-, ala- ja keskiosassa ei ole toisin määritetty Tuotteet kategorioiden ja tuotteiden värien, kuvien ja tekstien asetukset Linkit linkkien värien ja tekstien asetukset System Block/Sisältölohkot värimääritykset Static Page Menu/Staattisten sivujen navigaatio taustan ja linkin värit Tallenna asetukset muutosten jälkeen

4 Yksittäisiä kategorioiden mukailtuja ulkoasuja voidaan tehdä Katalogi -> Hallinnoi kategorioita -> Mukailtu ulkomuoto välilehti -> valitse Ulkoasu -> Ota käyttöön, valitaan taso jolle muutokset tehdään: Tässä ja kaikissa alakategorioissa ja -tuotteissa Vain tässä kategoriassa ja sen tuotteissa Vain tässä ja kaikissa alakategorioissa Vain tässä kategoriassa Page Layout voidaan valita näytetäänkö kategorian näkymässä: Tyhjä näkyykö vain pelkkä sivun sisältö 1 sarake - näkyykö myös ylä- ja alaosat sekä ylempi navigaatio 2 saraketta ja palkki vasemmalla ja oikealla näkyykö ylä-, ala- ja navigaatio-osien lisäksi sarake joko vasemmalla tai oikealla 3 saraketta näkyykö ylä-, ala- ja navigaatio-osien lisäksi sekä oikealla että vasemmalla sarake Custom Layout Update kentässä voidaan määritellä XML -kielellä sisältöelementteien näkyvyyttä, piilottaa niitä, lisätä niitä tai vaihtaa paikkaa jne. Oppaassa on aikaisemmin kerrottu, että ulkoasu on mahdollista muotoilla erilaiseksi myös tuotekohtaisesti. Yksittäisen tuotteen Mukaillun ulkoasun määrittämiseksi valitse Katalogi -> Hallinnoi tuotteita -> valitse tuote -> Ulkoasu -> valitse Muokattu ulkoasu kohdasta toinen tai muokattu teema, voit myös valita ajankohdan, edellisen kaltaisen XML-elementin. Uutena valintana edelliseen verrattuna on valinta Display product options in Samassa palstassa tuotetietojen kanssa tai Omassa lohkossa tuotetietojen jälkeen, jossa määritellään XML-elementin paikka tuotesivulla.

5 Staattiset sivut Kun käyttöön on otettu verkkokauppaan sopivat ulkoasut, on aika lisätä materiaalia, jotka eivät ole varsinaisia tuotetietoja. Tällä tarkoitetaan sellaisia tietoja, jota tuotteiden tarkastelussa tai ostoa suorittaessa ei ole välttämätöntä asiakkaalla olla tiedossaan, kuten yrityksen ja yhteistyökumppaneiden esittelyt, yhteystiedot, historia- ja ajankohtaistiedot jne. Sivujen hallinnointi valitaan Sisällönhallintajärjestelmä -> Sivut ->Näkyviin avautuu järjestelmässsä valmiina olevat sivut -> Lisää uusi sivu Jokainen sivu jakaantuu viiteen osaan: Perustiedot - Sivun otsikko, URL Key ja Tila, Kauppanäkymä on silloin käytössä, jos useita kauppanäkymiä on aikaisemmin luotu Sisältö Otsikko ja sisältötiedot sisältö voidaan syöttää tekstieditorin avulla tai HMTL -koodina Mukailtu ulkomuoto jokaisen sivun sommitelmia, ulkoasun teemaa ja XML -elementtiä voidaan muokata erikseen Metatiedot myös staattisille sivuille voidaan antaa erikseen omat Metatiedot hakurobotteja varten Page View Optimization jokaista sivua voidaan Optimoida erikseen hakukoneita varten

6 Muuttumattomat sisältölohkot Sisältölohkot ovat HTML -kielellä tehtyjä sisältöelementtejä, joita voidaan käyttää myös sivujen ulkoasun muotoilussa. Sisältölohkoja voi sijaita missä tahansa sivun osassa ja ne voivat sisältää melkein mitä tahansa sisältöä kuvia, tekstiä, linkkeja tai muita medialementteja. Pipfrogin järjestelmässsä on valmiina muutamia Staattista sisältölohkoa, joita käsitellään kohdassa Sisällönhallintajärjestelmä -> Muuttumattomat sisältölohkot -> valmiiden tarkistelemiseksi klikkaa nimen päällä ja uuden lisäämiseksi klikkaa Lisää uusi sisältölohko. Sisältölohko - custom_navi, on yläreunan navigaatiolinkit Footer links - sisältää alareunan linkitykset Left Content ja Right Content ovat aluksi passiivisia eli niitä ei näytetä sivuilla, voit aktivoida ja muokata niitä tarpeen mukaan, nämä ovat oikean ja vasemman puoliset sisältölohkot. Custom Navigation valikossa olevat linkit staattisille sivuille Uuden sisältölohkon Tunnisteessa ei saa olla tyhjiä välilyöntejä eikä skandinaavisia tai erikoismerkkejä.

7 Sisältölohkon sitominen Kategoriaan Sisältölohkon voi sitoa kategoriaan Katalogi -> Hallinnoi kategorioita -> Display Settings -> Display Mode, valitse näytetäänkö sekä sisältölohko ja tuotteet vai pelkästään sisältölohko-> CMS Block,valitse lohko jonka tahdot sitoat -> Is Anchor -> Kyllä -> Available Product Listing Sort by Tallenna kategoria ja Available Product Listing Sort by -> valitse sopiva tai jätä oletusvalinta