CSS-koodilla kustomointi

CSS on koodikieli, jota käytetään verkkosivujen tyylin muokkaamiseen. CSS-koodikieltä käytetään suurimmassa osassa verkkosivuja. Voit muokata kauppasi ulkoasua käyttämällä kustomoitua CSS-koodia.

CSS-kielen avulla voit esimerkiksi muuttaa seuraavia asioita kaupassasi:

  • Värit

  • Fontit

  • Kaupan logon koko

  • Elementtien näkyvyys

Muutokset eivät vaikuta ainoastaan yksittäiseen sivuun, vaan koko kauppaasi, kun lisäät CSS-koodia kauppaan. Poikkeuksena on kaupan ostoprosessi, johon kustomoitu CSS-koodi ei vaikuta lainkaan.

Suositeltu tapa vaihtaa kauppasi värejä on vaihtaa ne ohjeen Kauppasi värien muuttaminen mukaisesti. Jos vaihdat värejä CSS-koodilla, ylikirjoittaa koodi kaupan asetukset.

Kustomoitu CSS-koodi voi vaikuttaa kauppasi ulkoasuun ja toimintaan ei-toivotulla tavalla ja sillä voi olla myös negatiivisia vaikutuksia kauppasi responsiivisuuteen.

Kustomoitua CSS-koodia kannattaa käyttää vain, jos tietää, miten se toimii. Tarkista kauppasi huolellisesti kaikkien muutosten jälkeen. Huomaa myös, että automaattiset verkkokauppajärjestelmän päivitykset voivat vaikuttaa kauppasi ohjelmakoodiin, joten kannattaa tarkistaa säännöllisesti, toimiiko kirjoittamasi CSS-koodi edelleen halutulla tavalla vai onko järjestelmän versiopäivityksissä tullut muutoksia, jotka vaikuttavat koodin toimintaan.

Kuinka lisään kustomoitua CSS-koodia

1. Valitse kaupan hallinnassa päävalikosta Editori.

2. Valitse oikealla alareunassa sivellinkuvake.

3. Valitse </>.

4. Lisää oma CSS-koodisi.

5. Valitse Tallenna.

6. Valitse Katsele kauppaasi ja tarkista, että muutokset näkyvät oikein ja onko muutoksesta aiheutunut jotakin ongelmia.

Lisäämäsi CSS-koodi vaikuttaa vain käytettyyn teemaan. Jos vaihdat kauppasi teemaa, CSS-koodi ei enää vaikuta kauppaasi. Jos vaihdat takaisin teeman, johon olet lisännyt CSS-koodit, vaikuttaa koodi kauppaasi jälleen.

Esimerkkejä CSS-koodilla muokkaamiseen

Tällä CSS-koodilla saat muutettua kauppasi ostoskoriin lisäämisen huomiopalkin väriä.


Tällä CSS-koodilla saat siirrettyä evästebannerin alalaitaan.


Tällä CSS-koodilla saat vaihdettua kauppaasi fontin Google Fonts palvelusta.


Kaupan ohjelmisto tarkistaa automaattisesti, seuraako CSS-koodisi koodin oikeaa rakennetta.

Kun olet muuttamassa värejä, sinun tarvitsee mahdollisesti muokata myös tiettyjen elementtien marginaaleja ja täytettä.

CSS-koodin lisäämiseksi ei tarvitse välttämättä lisätä style sheetin tyyppiä.