Legge til egendefinert CSS i temaet

Et cascading style sheet (CSS) endrer hvordan elementer vises i temaet ditt, og kan kontrollere utseendet til flere sider samtidig. Du kan tilpasse temaet ditt utover innstillingene som er innebygd i et tema, ved å bruke funksjonen for tilpasset CSS. Du kan for eksempel bruke CSS til å angi gradienter i fargeinnstillingene for temaet. Du kan legge til tilpasset CSS for hele temaet eller til en bestemt del av en mal i temaet. Tilpasset CSS støttes ikke på kassesiden.

Tilpasning av CSS krever at du er kjent med CSS og HTML. Før du tilpasser temaet, bør du sørge for at du forstår hvilket brukerstøttenivå som er tilgjengelig.

Hensyn ved bruk av egendefinert CSS

Før du legger til egendefinert CSS i temaet bør du gå gjennom følgende vurderinger:

  • De følgende CSS-velgerne støttes ikke i tilpasset CSS:

    • At-reglene @import, @charset og @namespace kan ikke brukes.
    • For CSS på seksjonsnivå tillates bare at-reglene @media, @container, @layer og @supports.
    • For CSS på seksjonsnivå kan du ikke målrette mot ID eller klasser for det omkringliggende Shopify Section-elementet som gjengis av temaet med shopify-section-klassen
  • Hvis en egendefinert CSS-regel deklareres med taggen som ligger omkring det overordnede seksjonselementet vurderes den som en underliggende tagg, og stilregelen brukes for denne seksjonen. Merk at den overordnede delen som standard er omsluttet av en <div>-tagg, men dette kan angis til en av de tillatte verdiene i seksjonsskjemaet av temautviklerne.

  • For øyeblikket er bare domenet https://cdn.shopify.com tillatt ved bruk av URL-adresser i egendefinert CSS.

  • Egendefinerte skrifttyper er ikke begrenset. Egendefinerte skrifttyper er imidlertid en separat ressurs som lastes ned av nettlesere før teksten gjengis, noe som kan påvirke butikkens overordnede ytelse. Det er ditt ansvar å sikre at butikkfronten ikke påvirkes negativt av egendefinerte skrifttyper. Finn ut hvordan du bruker egendefinerte skrifttyper i temaet.

  • CSS-regler som påvirker hele temaet er begrenset til 1500 tegn.

  • CSS-regler som påvirker en bestemt seksjon er begrenset til 500 tegn.

  • Avhengig av CSS-velgerne eller -klassene du bruker kan oppdatering av temaet gjøre at egendefinert CSS slutter å fungere.

Shopify støtter ikke avanserte tematilpasninger. Hvis du opplever en feil knyttet til disse begrensningene i egendefinert CSS og ikke finner ut hva som forårsaker feilen, kan du se listen med andre tilgjengelige støtteressurser.

Legge til egendefinert CSS

Egendefinert CSS kan legges til i hele temaet, som påvirker alle sider i nettbutikken bortsett fra siden Kasse. Du kan for eksempel endre måten knapper vises på i hele butikken.

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Klikk Tilpass.

  3. Klikk på Temainnstillinger.

  4. Klikk på Egendefinert CSS.

  5. Legg til koden.

  6. Klikk på Lagre.

Plasseringen til den egendefinerte CSS-boksen i temainnstillingene

Egendefinert CSS kan også legges til i en bestemt seksjon i temaet. Hvis du legger til egendefinert CSS i en seksjon i temaet, gjelder CSS-koden bare for denne seksjonen. Du kan for eksempel bruke en egendefinert skriftstørrelse eller bakgrunnsfarge i en enkeltseksjon.

Trinn:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

  2. Klikk Tilpass.

  3. Klikk på seksjonen du vil legge til CSS i.

  4. Klikk på Egendefinert CSS nederst i panelet med seksjonsegenskaper.

  5. Legg til koden.

  6. Klikk på Lagre.

Plassering for egendefinert CSS i seksjonsinnstillingene

Tilleggsressurser for CSS

Tilpasning av CSS krever at du er kjent med CSS og HTML. Før du tilpasser temaet, bør du sørge for at du forstår hvilket brukerstøttenivå som er tilgjengelig.

Hvis du er interessert i å lære mer om CSS, kan du utforske noen av følgende ressurser:

Finner du ikke svarene du leter etter? Vi er her for å hjelpe deg.