Lära Grundläggande CSS-anpassning | Anpassning av Sidor och Innehåll

Grundläggande CSS-ändringar gör det möjligt att anpassa utseendet och känslan i din Shopify-butik utöver temats standardinställningar. I detta kapitel lär du dig hur du skapar och importerar en ny CSS-fil till ditt tema för stiländringar.

Steg

Skapa en ny CSS-fil: gå till Online Store > Themes > Edit Code och öppna mappen Assets. Klicka på Add a new asset, välj Create a blank file och namnge den custom.css;
Lägga till CSS-kod: öppna din custom.css-fil och lägg till denna kod för att ändra typsnitt och justera rubrikstilar:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 600;
color: #000;
}

Länka din CSS-fil till ditt tema: gå till filen layout/theme.liquid och lägg till följande rad före den avslutande </head>-taggen för att länka din nya CSS-fil:

{{ 'custom.css' | asset_url | stylesheet_tag }}

Förhandsgranska dina ändringar: spara dina ändringar och förhandsgranska din butik för att se hur typsnitt och rubrikstilar har uppdaterats.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain how to use Google Fonts with Shopify in more detail?

What should I do if my custom CSS changes aren't showing up on my store?

How can I customize other elements besides headings and paragraphs?

Svep för att visa menyn

Steg

Skapa en ny CSS-fil: gå till Online Store > Themes > Edit Code och öppna mappen Assets. Klicka på Add a new asset, välj Create a blank file och namnge den custom.css;
Lägga till CSS-kod: öppna din custom.css-fil och lägg till denna kod för att ändra typsnitt och justera rubrikstilar:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 600;
color: #000;
}

Länka din CSS-fil till ditt tema: gå till filen layout/theme.liquid och lägg till följande rad före den avslutande </head>-taggen för att länka din nya CSS-fil:

{{ 'custom.css' | asset_url | stylesheet_tag }}

Förhandsgranska dina ändringar: spara dina ändringar och förhandsgranska din butik för att se hur typsnitt och rubrikstilar har uppdaterats.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3

Grundläggande CSS-anpassning

Steg

1. Var skapar du en ny CSS-fil i Shopify?

2. Vad ändrar den angivna CSS-koden?

3. Hur importerar du en anpassad CSS-fil till ditt Shopify-tema?

4. Varför är det användbart att göra egna CSS-ändringar?

5. Vad är syftet med att importera typsnittet `Poppins` i exemplet?

Grundläggande CSS-anpassning

Steg

1. Var skapar du en ny CSS-fil i Shopify?

2. Vad ändrar den angivna CSS-koden?

3. Hur importerar du en anpassad CSS-fil till ditt Shopify-tema?

4. Varför är det användbart att göra egna CSS-ändringar?

5. Vad är syftet med att importera typsnittet `Poppins` i exemplet?

Grundläggande CSS-anpassning

Steg

1. Var skapar du en ny CSS-fil i Shopify?

2. Vad ändrar den angivna CSS-koden?

3. Hur importerar du en anpassad CSS-fil till ditt Shopify-tema?

4. Varför är det användbart att göra egna CSS-ändringar?

5. Vad är syftet med att importera typsnittet Poppins i exemplet?

Grundläggande CSS-anpassning

Steg

1. Var skapar du en ny CSS-fil i Shopify?

2. Vad ändrar den angivna CSS-koden?

3. Hur importerar du en anpassad CSS-fil till ditt Shopify-tema?

4. Varför är det användbart att göra egna CSS-ändringar?

5. Vad är syftet med att importera typsnittet Poppins i exemplet?

5. Vad är syftet med att importera typsnittet `Poppins` i exemplet?

5. Vad är syftet med att importera typsnittet `Poppins` i exemplet?