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
Shopify Store Mastery

bookGrundlä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.

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?

Select the correct answer

question mark

Vad ändrar den angivna CSS-koden?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

Awesome!

Completion rate improved to 6.25

bookGrundlä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?

Select the correct answer

question mark

Vad ändrar den angivna CSS-koden?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3
some-alt