Mukautetun CSS-koodin lisääminen teemaan

Tämä sivu on tulostettu Apr 25, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/theme-structure/extend/add-css.

Cascading style sheets eli CSS muuttaa elementtien näyttötapaa teemassasi ja voi hallita useiden sivujen ulkoasua samanaikaisesti. Mukautetun CSS-koodin avulla voit mukauttaa teemaa myös tavoilla, jotka eivät sisälly teeman asetuksiin. Voit lisätä mukautettua CSS-koodia koko teemaasi tai tiettyyn teemassasi olevan mallin osioon. Mukautettua CSS-koodia 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.

Tällä sivulla

Huomioitavaa mukautetun CSS-koodin käytössä

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

  • Seuraavia CSS-valitsimia ei tueta mukautetussa CSS-koodissa:

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

Mukautetun CSS:n ruudun sijainti teeman asetuksissa

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.

Mukautetun CSS:n ruudun sijainti asetuksissa

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:

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi