Legge til egendefinert CSS i temaet

Et cascading style sheet (CSS) endrer hvordan elementer vises i temaet, og kan styre utseendet på flere sider samtidig. Du kan tilpasse temaet ut over innstillingene som er bygget inn i et tema ved hjelp av funksjonen for egendefinert CSS. Du kan legge til egendefinert CSS i hele temaet, eller i en bestemt seksjon av en mal i temaet. Egendefinert CSS støttes ikke på siden Kasse.

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

Merk

Egendefinert CSS fungerer ved å overstyre temainnstillingene, så endringer du gjør med egendefinert CSS går foran innebygde innstillinger i temaet.

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

• Følgende CSS-velgere støttes ikke av egendefinert 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. Gå til Nettbutikk > Temaer i Shopify-administrator.
2. Klikk Tilpass.
3. Klikk på Temainnstillinger.
4. Klikk på Egendefinert CSS.
5. Legg til koden.
6. 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:

1. Gå til Nettbutikk > Temaer i Shopify-administrator.
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.

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:

• Grunnleggende om CSS
• Finn ut hvordan du stilsetter HTML med CSS
• CSS-referanse
• CSS-velgere