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.
På denne siden
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
- At-reglene
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:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Klikk Tilpass.
Klikk på Temainnstillinger.
Klikk på Egendefinert CSS.
Legg til koden.
Klikk på Lagre.
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:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Klikk Tilpass.
Klikk på seksjonen du vil legge til CSS i.
Klikk på Egendefinert CSS nederst i panelet med seksjonsegenskaper.
Legg til koden.
Klikk på Lagre.
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: