Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Grundläggande CSS-anpassning | Anpassning av Sidor och Innehåll
Introduktion till Shopifyutveckling

Grundläggande CSS-anpassning

Svep för att visa menyn

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

  1. 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;
  2. 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;
}
  1. 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 }}
  1. Förhandsgranska dina ändringar: spara dina ändringar och förhandsgranska din butik för att se hur typsnitt och rubrikstilar har uppdaterats.

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?

question mark

Var skapar du en ny CSS-fil i Shopify?

Vänligen välj det korrekta svaret

question mark

Vad ändrar den angivna CSS-koden?

Vänligen välj det korrekta svaret

question mark

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

Vänligen välj det korrekta svaret

question mark

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

Vänligen välj det korrekta svaret

question mark

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

Vänligen välj det korrekta svaret

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

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

Grundläggande CSS-anpassning

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

  1. 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;
  2. 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;
}
  1. 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 }}
  1. 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?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3
some-alt