Sådan føjer du tilpasset CSS til dit tema

CSS (et overlappende typografiark) ændrer, hvordan elementer vises i dit tema, og kan bestemme udseendet på flere sider på én gang. Du kan tilpasse mere af dit tema end de indstillinger, der er integreret i temaet, ved at bruge den tilpassede CSS-funktion. Du kan føje tilpasset CSS til hele dit tema eller til et specifikt afsnit af en skabelon i dit tema. Tilpasset CSS understøttes ikke på siden Betaling.

Hvis du skal tilpasse CSS, skal du have kendskab til CSS og HTML. Inden du tilpasser dit tema, skal du sørge for, at du er klar over, hvilket niveau af support der er til rådighed.

Overvejelser i forbindelse med brug af tilpasset CSS

Bemærk

Tilpassede CSS-funktioner tilsidesætter dit temas indstillinger, så alle ændringer, du foretager ved hjælp af tilpasset CSS, har forrang over dit temas indbyggede indstillinger.

Gennemgå følgende overvejelser, inden du føjer tilpasset CSS til dit tema:

• Følgende CSS-vælgere understøttes ikke i tilpasset CSS:

  • At-reglerne @import, @charset og @namespace kan ikke bruges
  • For CSS på afsnitsniveau er det kun at-reglerne @media, @container, @layer og @supports, der er tilladt
  • I forbindelse med CSS på afsnitsniveau kan du ikke målrette mod id'et eller det ombrydende Shopify-afsnitselement, der gengives af temaet med shopify-section-klassen

• Hvis der er erklæret en tilpasset CSS-regel med det tag, der ombryder det overordnede afsnitselement, anses det for at være et faldende tag, og stilreglen anvendes på det pågældende afsnit. Bemærk, at det overordnede afsnit som standard er indeholdt i et <div> -tag, men dette kan angives til en hvilken som helst af de tilladte værdier i afsnitsskemaet af temaudviklere.

• Det er på nuværende tidspunkt kun https://cdn.shopify.com-domænet, der er tilladt ved brug af webadresser i tilpasset CSS.

• Der er ingen begrænsninger for tilpassede skrifttyper. Tilpassede skrifttyper er dog en separat ressource, der downloades af browsere, inden teksten gengives. Dette kan påvirke en butiks overordnede ydeevne. Det er dit ansvar at sikre, at din butiksfacade ikke påvirkes negativt af tilpassede skrifttyper. Se, hvordan du bruger tilpassede skrifttyper i dit tema.

• CSS-regler, der påvirker hele temaet, er begrænset til 1.500 tegn.

• CSS-regler, der påvirker et specifikt afsnit, er begrænset til 500 tegn.

• Afhængigt af de CSS-vælgere eller -klasser, du bruger, kan opdatering af dit tema medføre, at det tilpassede CSS stopper med at virke.

Shopify understøtter ikke avancerede tematilpasninger. Hvis du oplever en fejl i forbindelse med disse begrænsninger af dit tilpassede CSS og ikke kan finde ud af, hvad fejlen skyldes, kan du se listen over andre tilgængelige supportressourcer.

Tilføj tilpasset CSS

Tilpasset CSS kan føjes til hele dit tema, som påvirker alle sider i din webshop bortset fra siden Betaling. Du kan f.eks. ændre den måde, som knapper vises på i hele din butik.

Trin:

1. Gå til Webshop > Temaer i Shopify-administrator.
2. Klik på Tilpas.
3. Klik på Temaindstillinger.
4. Klik på Tilpaaset CSS.
5. Tilføj din kode.
6. Klik på Gem.

Tilpasset CSS kan også føjes til et bestemt afsnit i dit tema. Hvis du føjer tilpasset CSS til et afsnit i dit tema, tilføjes CSS i det pågældende afsnit. Du kan f.eks. anvende en tilpasset skriftstørrelse eller en baggrundsfarve på et enkelt afsnit.

Trin:

1. Gå til Webshop > Temaer i Shopify-administrator.
2. Klik på Tilpas.
3. Klik på det afsnit, som du vil føje CSS til.
4. Klik på Tilpasset CSS nederst i panelet med egenskaber for afsnit.
5. Tilføj din kode.
6. Klik på Gem.

Yderligere ressourcer til CSS

Hvis du skal tilpasse CSS, skal du have kendskab til CSS og HTML. Inden du tilpasser dit tema, skal du sørge for, at du er klar over, hvilket niveau af support der er til rådighed.

Hvis du er interesseret i at få mere at vide om CSS, kan du se nogle af følgende ressourcer:

• Grundlæggende om CSS
• Se, hvordan du kan style HTML ved hjælp af CSS
• CSS-reference
• CSS-vælgere