Lägga till anpassad CSS till ditt tema

Ett cascading style sheet (CSS) ändrar hur element visas i ditt tema, och kan styra utseendet på flera sidor samtidigt. Du kan anpassa ditt tema utöver inställningarna som är inbyggda i temat genom att använda funktionen anpassat CSS. Du kan lägga till anpassat CSS i hela ditt tema eller till ett specifikt avsnitt i en mall inom ditt tema. Anpassad CSS stöds inte på kassasidan.

För att kunna anpassa CSS måste du ha erfarenhet av CSS och HTML. Se till att du förstår vilken supportnivå som finns tillgänglig innan du anpassar ditt tema.

Överväganden för användning av anpassad CSS

Observera

Anpassa CSS-funktioner genom att åsidosätta dina temainställningar, så ändringar som du gör genom att använda anpassad CSS har företräde framför ditt temas inbyggda inställningar.

Granska följande överväganden innan du lägger till anpassad CSS i ditt tema:

• Följande CSS-väljare stöds inte i anpassad CSS:

  • At-reglerna @import, @charset och @namespace kan inte användas
  • För css på sektionsnivå är endast at-reglerna @media, @container, @layer och @supports tillåtna
  • För CSS på avsnittsnivå kan du inte rikta dig till ID eller klasser för elementet wrapping Shopify Section som återges av temat med shopify-section-klassen

• Om en anpassad CSS-regel deklareras med taggen som omsluter överordnat avsnittselement, betraktas den som en fallande tagg och stylingregeln tillämpas på det avsnittet. Observera att som standard är överordnat avsnitt omslutet i en <div> -tagg, men detta kan ställas in till något av de tillåtna värdena i avsnittets schema av temautvecklare.

• För närvarande är endast domänen https://cdn.shopify.com tillåten när du använder URL:er i anpassad CSS.

• Anpassade typsnitt är inte begränsade.Anpassade typsnitt är dock en separat resurs som webbläsare laddar ner innan text återges, vilket kan påverka butikens övergripande prestanda.Det är ditt ansvar att se till att ditt skyltfönster inte påverkas negativt av anpassade typsnitt.Lär dig hur du använder anpassade typsnitt i ditt tema.

• CSS-regler som påverkar hela temat är begränsade till 1 500 tecken.

• CSS-regler som påverkar ett specifikt avsnitt är begränsade till 500 tecken.

• Beroende på vilka CSS-väljare eller klasser du använder kan uppdatering av ditt tema leda till att din anpassade CSS slutar fungera.

Shopify stöder inte avancerade temaanpassningar. Om du stöter på ett fel relaterat till dessa begränsningar i din anpassade CSS och inte kan avgöra vad som orsakar felet, se listan över andra tillgängliga supportresurser.

Lägg till anpassad CSS

Anpassad CSS kan läggas till i hela ditt tema som påverkar alla sidor i din webbshop utom kassasidan. Du kan till exempel ändra hur knapparna visas i hela din butik.

Steg:

1. Gå till Webbshop > Teman i din Shopify-admin.
2. Klicka på Anpassa.
3. Klicka på Temafärllningar.
4. Klicka på Anpassad CSS.
5. Lägg till din kod.
6. Klicka på Spara.

Anpassad CSS kan också läggas till i ett specifikt avsnitt av ditt tema. Om du lägger till anpassad CSS till ett avsnitt i ditt tema, är CSS begränsad till det avsnittet. Du kan till exempel tillämpa en anpassad typsnittsstorlek eller en bakgrundsfärg på ett enda avsnitt.

Steg:

1. Gå till Webbshop > Teman i din Shopify-admin.
2. Klicka på Anpassa.
3. Klicka på det avsnitt som du vill lägga till CSS till.
4. Klicka på Anpassad CSS längst ned i avsnittets egenskapspanel.
5. Lägg till din kod.
6. Klicka på Spara.

Ytterligare resurser för CSS

För att kunna anpassa CSS måste du ha erfarenhet av CSS och HTML. Se till att du förstår vilken supportnivå som finns tillgänglig innan du anpassar ditt tema.

Om du är intresserad av att lära dig mer om CSS kan du utforska några av följande resurser:

• Grunderna i CSS
• Lär dig utforma HTML med hjälp av CSS
• CSS-referens
• CSS-väljare