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:n avulla voit esimerkiksi muuttaa seuraavia asioita kaupassasi:

  • Värit
  • Fontit
  • Kaupan logon koko
  • Elementtien näkyvyys

Muutokset vaikuttavat koko kauppaasi, eivät ainoastaan yksittäiseen sivuun, joka on auki, kun lisäät CSS-koodia kauppaan. Tähän 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 tämä 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 muutoksien jälkeen. Huomaa myös, että automaattiset verkkokauppajärjestelmän päivitykset voivat vaikuttaa kauppasi ohjelmakoodiin, joten kannattaa tarkistaa säännöllisesti, vaikuttaako 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 siveltimen kuvake.

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 jotain 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 logon kokoa suuremmaksi.


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


Tällä CSS-koodilla saat vaihdettua kauppaasi käyttöön fontin Google Fonts palvelusta.


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


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ä.