Mukautetun CSS-koodin lisääminen teemaan

CSS-tyylisivun avulla voit muuttaa elementtien näyttötapaa teemassasi ja voit hallita useiden sivujen ulkoasua kerralla. Mukautetun CSS:n avulla voit muokata teemaa tavoilla, jotka eivät olisi mahdollisia teemaan sisäänrakennetuilla asetuksilla. CSS:n avulla voit esimerkiksi määrittää liukuvärejä teeman väriasetuksissa. Voit lisätä mukautetun CSS:n koko teemaasi tai teemasi mallin tiettyyn osaan. Mukautettuja CSS-tiedostoja ei tueta Kassa-sivulla.

CSS:n mukauttaminen edellyttää tietämystä CSS:stä ja HTML:stä. Ennen kuin mukautat teemaa, varmista, että ymmärrät, minkälaista tukea on saatavilla.

Huomioitavaa mukautetun CSS-koodin käytössä

Huomaa

Mukauta CSS-toiminnot ohittamalla teemasi asetukset niin, että mukautetun CSS-koodin avulla tekemäsi muutokset ohittavat teemasi sisäänrakennetut asetukset.

Ennen kuin lisäät mukautettua CSS-koodia teemaasi, tarkista seuraavat seikat:

• Seuraavia CSS-valitsimia ei tueta mukautetuissa CSS-tiedostoissa:

  • At-sääntöjä @import, @charset ja @namespace ei voi käyttää
  • Osiotason CSS:lle vain at-säännöt @media, @container, @layer ja @supports ovat sallittuja
  • osiotason CSS-koodissa et voi kohdistaa teeman hahmontamaa Shopify Sections -elementin tunnusta tai luokkia shopify-section-luokkaan

• Jos mukautetun CSS-säännön kanssa ilmoitetaan tunniste, joka paketoi ylätason osion elementin, sitä pidetään laskevana tunnisteena ja muotoilusääntöä sovelletaan tähän osioon. Huomaa, että oletusarvoisesti ylätason osio sisältyy <div> -tunnisteeseen, mutta teemakehittäjät voivat määrittää sille minkä tahansa osion rakenteessa sallitun arvon.

• Tällä hetkellä vain https://cdn.shopify.com-verkkotunnus on sallittu, kun käytät URL-osoitteita mukautetussa CSS-koodissa.

• Mukautettuja fontteja ei ole rajoitettu. Mukautetut fontit ovat kuitenkin erillinen resurssi, jotka ladataan selaimilla ennen tekstin hahmontamista, mikä voi vaikuttaa kaupan kokonaistehokkuuteen. Muista varmistaa, etteivät mukautetut fontit vaikuta kielteisesti kauppaasi. Opi käyttämään mukautettuja fontteja teemassasi.

• Koko teemaan vaikuttavien CSS-sääntöjen pituus voi olla enintään 1 500 merkkiä.

• Tiettyyn osioon vaikuttavien CSS-sääntöjen pituus voi olla enintään 500 merkkiä.

• Käyttämistäsi CSS-valitsimista tai -luokista riippuen teemasi päivittäminen saattaa estää mukautetun CSS-koodin toimimisen.

Shopify ei tue teeman lisämukautuksia. Jos havaitset mukautetussa CSS-koodissa virheen, joka liittyy näihin rajoituksiin, etkä pysty määrittämään virheen aiheuttajaa, tutustu muihin käytettävissä oleviin ohjeisiin.

Mukautetun CSS-koodin lisääminen

Mukautettua CSS-koodia voidaan lisätä verkkokauppasi kaikkiin muihin sivuihin paitsi Kassa-sivuun vaikuttaviin teemoihin. Voit esimerkiksi muuttaa tapaa, jolla painikkeet esitetään koko kaupassasi.

Vaiheet:

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Klikkaa Mukauta.
3. Klikkaa teeman asetuksia.
4. Klikkaa Mukautettu CSS.
5. Lisää koodisi.
6. Klikkaa Tallenna.

Mukautettu CSS voidaan myös lisätä tiettyyn teeman osaan. Jos lisäät mukautetun CSS:n teeman osioon, CSS on rajattu kyseiseen osioon. Voit esimerkiksi käyttää mukautettua fonttikokoa tai taustaväriä yksittäiseen osioon.

Vaiheet:

1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
2. Klikkaa Mukauta.
3. Klikkaa osiota, johon haluat lisätä CSS-koodia.
4. Klikkaa Osion ominaisuudet -paneelin alaosassa Mukautettu CSS.
5. Lisää koodisi.
6. Klikkaa Tallenna.

CSS-lisäresurssit

CSS:n mukauttaminen edellyttää tietämystä CSS:stä ja HTML:stä. Ennen kuin mukautat teemaa, varmista, että ymmärrät, minkälaista tukea on saatavilla.

Jos olet kiinnostunut oppimaan lisää CSS-koodista, voit tutustua seuraaviin resursseihin:

• CSS-perusteet
• Opi muuttamaan HTML:n muotoilua CSS:n avulla
• CSS-viite
• CSS-valitsimet