Fluid on MyCashflow'n uusin oletusteema. Fluidin ulkoasua, rakennetta ja toimintoja on mahdollista mukauttaa helposti ja monipuolisesti suoraan verkkokaupan hallintatyökalussa.

  • Moderni ja selkeä design – suunniteltu asiakaslähtöiseksi ja helppokäyttöiseksi.
  • Aktiivinen kehitys – teemaan lisätään uusia ominaisuuksia ja sen toimivuutta testataan säännöllisesti.
  • Laaja ja helppo muokattavuus – voit mukauttaa teeman ulkosua ja ominaisuuksia hallintatyökalussa käyttäen teema-asetuksia ilman HTML/CSS-koodin käsittelyä.
  • Kattava yhteensopivuus – Fluid tukee kaikkia yleisimpiä verkkoselaimia ja laitteita.

Fluid-teeman bannerialueet

Bannereilla voit lisätä verkkokaupan sivuille oman brändisi mukaista ilmettä ja nostaa esiin ajankohtaisia asioita. Tätä varten Fluid-teemassa on ennalta asemoituja bannerialueita, joissa näkyy johonkin tiettyyn banneriryhmään kuuluvia bannereita.

Voit luoda ja muokata bannereita sekä banneriryhmiä hallintatyökalun sivulla Sisällöt > Bannerit. Jotta banneri näkyy verkkokaupassa, sinun pitää aktivoida se haluamillesi kauppaversioille bannerin asetusten kohdassa Näytä versiossa.

Bannerin otsikon voit määrittää bannerin asetusten kohdassa Nimi, kuvan kohdassa Banneri ja sisältötekstin kohdassa Teksti (katso myös yhteenveto kaikista bannerin asetuksista). Kukin niistä näkyy verkkokaupassa vain, jos banneri kuuluu ryhmään, jonka bannerialue tukee kyseistä määritystä.

Bannerin teksti näkyy joko mustana tai valkoisena sen mukaan, kumpi väri erottuu paremmin tekstin taustaksi asettuvan kuvan yleisvärityksestä. Taustakuvan olisi hyvä olla väritykseltään suhteellisen tasainen.

Jos taustakuvaa ei ole, tekstin väri mukautuu bannerialueen taustaväriin.

Alla on tarkempaa tietoa eri bannerialueiden ominaispiirteistä.

Etusivun pääbanneri

Fluidin etusivun yläosassa on bannerikaruselli, johon sisältyy 4 ensimmäistä banneria ryhmästä frontpage-main. Kävijä voi selata niitä karusellin painikkeiden avulla, mutta Fluid-teeman asetusten kohdassa Etusivu voit myös säätää bannerin vaihtumaan automaattisesti muutaman sekunnin välein.

Bannerin otsikko ja teksti asemoituvat kuvan keskelle.

  • Sijainti verkkokaupassa: etusivu
  • Banneriryhmän koodi: frontpage-main
  • Suositeltu kuvakoko ja -suhde taustakuvaa varten: 1500x525 px / 10:4 (mobiilikoossa kuva rajautuu molemmista reunoista ja kuvasuhde on 2:1)

Etusivun nostot

Etusivun bannerikarusellin alla näkyy enimmillään 3 ensimmäistä banneria ryhmästä frontpage-featured. Bannereilla voit nostaa etusivulle esimerkiksi suosittuja tuotteita, kampanjoita tai tuotemerkkejä.

Bannerien leveys on joko 50 % tai 33 % (riippuen siitä montako niitä on). Bannerin otsikko ja teksti asemoituvat kuvan vasempaan alakulmaan.

  • Sijainti verkkokaupassa: etusivulla pääbannerien alla
  • Banneriryhmän koodi: frontpage-featured
  • Suositeltu kuvakoko ja -suhde taustakuvaa varten: 1000x640 px / 100:64

Yläreunan ilmoitusnauha

Jokaisen sivun yläreunassa on tekstimuotoinen ilmoitusnauha, jossa näkyy ryhmän notification-bar ensimmäinen banneri. Ilmoitusnauha voi sisältää lyhyen tiedotteen esimerkiksi jostain ajankohtaisesta aiheesta ja tarvittaessa linkin lisätietoihin.

  • Sijainti verkkokaupassa: kaikkien sivujen yläreunassa
  • Banneriryhmän koodi: notification-bar

Sosiaalisen median painikkeet

Verkkokaupan alatunnisteeseen sisältyy bannerialue sosiaalisen median linkkeinä toimiville painikkeille, jotka kuuluvat banneriryhmään social-media-buttons. Kussakin bannerissa näkyy linkitettyä palvelua edustava kuvake tai linkkiteksti.

Syötä palvelun URL-osoite bannerin asetusten kohtaan Linkin osoite. Jos syöttämäsi osoite ohjaa johonkin seuraavista palveluista, Fluid käyttää bannerissa automaattisesti palvelun kuvaketta (Fluidin tukemia osoitteiden malleja on sulkeissa):
  • Discord (https://discord.com/invite/KOODI)
  • Facebook (https://www.facebook.com/NIMI)
  • Facebook Messenger (http://m.me/NIMI)
  • GitHub (https://github.com/NIMI)
  • Instagram (https://instagram.com/NIMI)
  • LinkedIn (https://www.linkedin.com/company/NIMI)
  • Pinterest – kuvaketuki tulossa
  • TikTok (https://www.tiktok.com/@NIMI)
  • WhatsApp (https://www.whatsapp.com/channel/KOODI)
  • X (https://x.com/NIMI)

    Vastaava Twitter-osoite tuottaa vanhanmallisen lintukuvakkeen.

  • YouTube (https://www.youtube.com/channel/KOODI)
Mikäli Fluid ei suoraan tue palvelun kuvaketta, voit määrittää bannerikuvakkeen itse. Siihen on käytettävissäsi kaksi tapaa:
  • Anna bannerin nimeksi jonkin Font Awesome -kirjastosta löytyvän kuvakkeen nimi ja lisää siihen etuliitteeksi fa (esimerkiksi kuorma-autolta näyttävän painikkeen saat kirjoittamalla bannerin nimeksi fa-truck). Käytä tällöin nimessä vain pienaakkosia.

    Tämä määritystapa ei toimi Font Awesome -kirjaston brändikuvakkeiden kanssa.

  • Aseta bannerin kuvaksi jokin itse valitsemasi kuvake.

Jos mitään kuvaketta ei ole, Fluid näyttää linkkitekstinä bannerin nimen.

Fluidin suoraan tukemien sekä Font Awesome -kuvakkeiden väri mukautuu automaattisesti alatunnisteen taustaväriin, jonka voit määrittää Fluid-teeman asetusten kohdassa Värit > Sivuston alaosan taustaväri.

  • Sijainti verkkokaupassa: alatunniste
  • Banneriryhmän koodi: social-media-buttons
  • Suositeltu kuvakoko ja -suhde omaa kuvaketta varten: 280x280 px / 1:1

Alatunnisteen yhteystiedot

Voit lisätä verkkokaupan alatunnisteeseen tekstimuotoisen yhteystietobannerin, joka näkyy kaikilla sivuilla kassasivuja lukuun ottamatta. Banneri korvaa sivuston oletusarvoisen yhteystieto-osion, johon sisältyvät seuraavat kaupan yleisissä asetuksissa tai version asetuksissa määritetyt tiedot:
  • Yritys (kaupan nimi)
  • Katuosoite
  • Sijainti (postinumero ja -toimipaikka)
  • Puhelin
  • Sähköposti
  • Internet (markkinoinnissa käytettävä verkkokaupan osoite)
  • Y-tunnus

Jos haluat samojen tietojen näkyvän yhteystietobannerissa, lisää bannerin asetusten Teksti-kohtaan {ContactInformation}-tagi. Vaihtoehtoisesti voit lisätä haluamasi tiedot riveittäin. Voit ilmoittaa bannerissa myös esimerkiksi myymälän aukioloajat.

Toisin kuin muut bannerit, yhteystietobanneri näkyy verkkokaupassa bannerin oman koodin eikä banneriryhmän koodin perusteella.

  • Sijainti verkkokaupassa: alatunniste kaikilla sivuilla paitsi kassalla
  • Bannerin koodi: contact-information

Uutiskirjeen tilauslomake

Alatunnisteen yläpuolella on bannerialue uutiskirjebannerille, joka kuuluu newsletter-ryhmään. Banneri sisältää verkkokaupan uutiskirjeen tilauslomakkeen.

Voit luoda oman uutiskirjebannerin kullekin kauppaversiolle ja määrittää bannereille taustakuvat sekä sanakirjan oletusteksteistä poikkeavat tekstit. Verkkokaupassa näkyy ainoastaan version ensisijaiseksi asetettu uutiskirjebanneri.

Jotta uutiskirjebanneri näkyy verkkokaupassa, se pitää aktivoida sekä bannerin omissa asetuksissa versiokohtaisesti että Fluid-teeman asetusten kohdassa Sähköpostimarkkinointi > Näytä uutiskirjebanneri.

  • Sijainti verkkokaupassa: alatunnisteen yläpuolella
  • Banneriryhmän koodi: newsletter
  • Suositeltu kuvakoko ja -suhde taustakuvaa varten: 1400x400 px; taustakuvan tulee toimia kuvasuhteesta riippumatta, sillä se mukautuu erilaisiin näyttötiloihin (tietokonenäytössä koko on normaalisti 1400x300 px mutta tarpeen vaatiessa kapeampi, mobiililaitteissa taas korkeus on 400 px ja leveys voi olla samaa luokkaa)

Fluid-teeman asetukset

Voit muokata Fluidin ulkoasua, rakennetta ja toimintoja teeman asetuksien avulla verkkokaupan hallinnassa.

Muokataksesi teeman asetuksia valitse Fluidia käyttävä versio hallintatyökalun sivulta Ulkoasu > Versiot ja paina Muokkaa teemaa -painiketta.

Teeman muokkausnäkymä sisältää verkkokaupan esikatselun sekä vasemmassa reunassa asetusvalikot. Esikatselun avulla näet reaaliaikaisesti, miten muokkaamasi asetukset vaikuttavat verkkokaupan ulkoasuun erilaisissa päätelaitteissa (työpöytä, tabletti tai puhelin). Muutokset tulevat voimaan, kun painat sivun yläreunan Julkaise muutokset -painiketta.

Alla käydään läpi Fluid-teeman asetusvalikot:

Värit

Määrittääksesi värin syötä tekstikenttään heksadesimaalinen värikoodi tai paina tekstikentän edessä olevaa ruutua ja valitse värisävy liukuväripaletista.

Voit määrittää seuraavat väriominaisuudet:
  • Korosteväri: Määrittää esimerkiksi painikkeiden taustavärin ja linkkien korostevärin.
  • Sivuston yläosan taustaväri: Määrittää päänavigaation taustavärin.
  • Sivuston alaosan taustaväri: Määrittää alatunnisteen (footer) taustavärin.
  • Ilmoitusnauhan taustaväri: Määrittää yläreunan bannerin taustavärin.

Navigaatiomalli

  • Navigaatiomalli: Määrittää sivuston navigaation tyylin (esim. vaaka- vai pystymallinen tuoteryhmävalikko). Valinnassa kannattaa huomioida verkkokaupan tuoteryhmien määrä: jos verkkokaupan valikoima on laaja, pystyvalikko on usein parempi vaihtoehto.

Tyyliasetukset

  • Reunusten pyöristykset: Määrittää esimerkiksi lomakekenttien ja tuotekuvien kulmien pyöristyksen.
  • Toimintapainikkeiden pyöristys: Määrittää painikkeiden kulmien pyöristyksen.
  • Ikonikirjaston tyyli: Määrittää kuvakkeiden paksuuden. Fluid-teemassa on käytössä Font Awesome -ikonikirjasto.

Fontit

  • Fontin koko: Määrittää kaikkien tekstien fonttikoon perustason (pieni, keskikokoinen tai suuri).
  • Otsikon fontti: Määrittää otsikkojen fontin. Valittavissa on ennalta määritetty kokoelma Google Fonts -palvelun fontteja.
  • Otsikon leikkaus: Määrittää otsikkojen tekstin paksuuden.
  • Otsikon tyyli: Määrittää, käyttävätkö otsikot sekä suur- että pienaakkosia vai pelkästään suuraakkosia.
  • Leipätekstin fontti: Määrittää leipätekstin fontin.

Yläosan valikot

  • Näytä kielivalikko: Lisää sivun ylätunnisteeseen valikon, jonka avulla kävijä voi vaihtaa verkkokaupan kielen. Valikossa näkyvät kaikki verkkokaupan julkiset versiot.
  • Näytä valuuttavalikko: Lisää sivun ylätunnisteeseen valikon, jonka avulla kävijä voi muuntaa hintatiedot haluamansa valuutan mukaisiksi. Asetus toimii vain, jos verkkokauppaan on asennettu Valuuttamuunnin-laajennus.
  • Näytä sisältösivut ylätunnisteessa: Lisää sivun ylätunnisteeseen verkkokaupan ylimmän tason sisältösivut.
  • Kielivalikon tyyppi: Määrittää, näkyvätkö kielivalikossa versioiden nimet vai niiden kielikoodit (esim. FI).

Etusivu

  • Bannerikarusellin kuvan vaihtuminen: Määrittää, vaihtuuko etusivun bannerikarusellin kuva ja miten tiheästi.
  • Näytä mainostettavat tuoteryhmät: Lisää etusivulle listan mainostettavista tuoteryhmistä. Tuoteryhmät voit merkitä mainostettaviksi tuoteryhmälomakkeella.
  • Näytä mainostettavat tuotteet: Lisää etusivulle listan mainostettavista tuotteista. Tuotteet voit merkitä mainostettaviksi tuotelomakkeella.
  • Näytä suosituimmat tuotteet: Lisää etusivulle listan verkkokaupan myydyimmistä tuotteista.
  • Näytä uudet tuotteet: Lisää etusivulle listan verkkokaupan uusimmista tuotteista.

Tuoteryhmä

  • Tuoteryhmäkuvan asettelu: Määrittää tuoteryhmäkuvan sijainnin sivulla. Aseta tuoteryhmäkuva tuoteryhmälomakkeen kohdassa Kampanjakuva.
  • Tuoteryhmäkuvan korkeus: Määrittää tuoteryhmäkuvan korkeuden.
  • Tuoteryhmävalikon asettelu: Määrittää alatuoteryhmävalikon sijainnin sivulla.

Tuotelista

  • Listatuotteen koko: Määrittää tuotteen leveyden tuotelistoilla.
  • Listatuotteen tyyli: Määrittää tuotteen ulkoasun tuotelistoilla. Voit valita valmiista esiasetuksista.
  • Tuotekuvan kuvasuhde: Määrittää tuotekuvan kuvasuhteen tuotelistoilla.
  • Salli tuotteiden lisäys ostoskoriin tuotelistalta: Lisää tuotekorttien yhteyteen ostoskoripainikkeen tuotelistoilla.
  • Näytä tuotemerkki: Lisää tuotekorttien yhteyteen tuotemerkin nimen tuotelistoilla.
  • Varastosaatavuus: Määrittää, näkyykö tuotelistoilla tuotteen varastosaatavuus tai -saldo.

Tuotesivu

  • Tuotevariaatiovalikon tyyli: Määrittää tuotesivun variaatiovalikon esittämiseen käytetyn elementin (radiopainikkeet tai pudotusvalikko).
  • Näytä tuotemerkki: Lisää tuotesivulle tuotemerkin nimen.
  • Näytä toimituskulutaulukko: Lisää tuotesivulle toimituskulutaulukon.
  • Näytä määrävalitsin: Lisää tuotesivulle tuotteen määrävalitsimen.
  • Näytä varastosaldo: Lisää tuotesivulle tuotteen tai variaation tarkan varastosaldon.

Sähköpostimarkkinointi

  • Näytä uutiskirjebanneri: Lisää sivuston alaosaan uutiskirjeen tilauslomakkeen.