Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Grundlæggende CSS-Tilpasning | Tilpasning af Sider og Indhold
Shopify Butiksmesterskab

bookGrundlæggende CSS-Tilpasning

Grundlæggende CSS-ændringer giver mulighed for at tilpasse udseendet og oplevelsen af din Shopify-butik ud over temaets standardindstillinger. I dette kapitel lærer du, hvordan du opretter og importerer en ny CSS-fil til dit tema for at foretage stilændringer.

Trin

  1. Opret en ny CSS-fil: gå til Online Store > Temaer > Rediger kode og åbn Assets-mappen. Klik på Tilføj en ny fil, vælg Opret en tom fil, og navngiv den custom.css;
  2. Tilføj CSS-kode: åbn din custom.css-fil og indsæt denne kode for at ændre skrifttyper og justere overskriftsstile:
@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. Tilføj din CSS-fil til temaet: gå til filen layout/theme.liquid og tilføj følgende linje før den afsluttende </head>-tag for at linke til din nye CSS-fil:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Forhåndsvis ændringerne: gem dine ændringer og forhåndsvis din butik for at se, hvordan skrifttype og overskriftsstile er blevet opdateret.

1. Hvor opretter du en ny CSS-fil i Shopify?

2. Hvad ændrer den angivne CSS-kode?

3. Hvordan importerer du en brugerdefineret CSS-fil til dit Shopify-tema?

4. Hvorfor er det nyttigt at foretage brugerdefinerede CSS-ændringer?

5. Hvad er formålet med at importere skrifttypen Poppins i eksemplet?

question mark

Hvor opretter du en ny CSS-fil i Shopify?

Select the correct answer

question mark

Hvad ændrer den angivne CSS-kode?

Select the correct answer

question mark

Hvordan importerer du en brugerdefineret CSS-fil til dit Shopify-tema?

Select the correct answer

question mark

Hvorfor er det nyttigt at foretage brugerdefinerede CSS-ændringer?

Select the correct answer

question mark

Hvad er formålet med at importere skrifttypen Poppins i eksemplet?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 3

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 6.25

bookGrundlæggende CSS-Tilpasning

Stryg for at vise menuen

Grundlæggende CSS-ændringer giver mulighed for at tilpasse udseendet og oplevelsen af din Shopify-butik ud over temaets standardindstillinger. I dette kapitel lærer du, hvordan du opretter og importerer en ny CSS-fil til dit tema for at foretage stilændringer.

Trin

  1. Opret en ny CSS-fil: gå til Online Store > Temaer > Rediger kode og åbn Assets-mappen. Klik på Tilføj en ny fil, vælg Opret en tom fil, og navngiv den custom.css;
  2. Tilføj CSS-kode: åbn din custom.css-fil og indsæt denne kode for at ændre skrifttyper og justere overskriftsstile:
@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. Tilføj din CSS-fil til temaet: gå til filen layout/theme.liquid og tilføj følgende linje før den afsluttende </head>-tag for at linke til din nye CSS-fil:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Forhåndsvis ændringerne: gem dine ændringer og forhåndsvis din butik for at se, hvordan skrifttype og overskriftsstile er blevet opdateret.

1. Hvor opretter du en ny CSS-fil i Shopify?

2. Hvad ændrer den angivne CSS-kode?

3. Hvordan importerer du en brugerdefineret CSS-fil til dit Shopify-tema?

4. Hvorfor er det nyttigt at foretage brugerdefinerede CSS-ændringer?

5. Hvad er formålet med at importere skrifttypen Poppins i eksemplet?

question mark

Hvor opretter du en ny CSS-fil i Shopify?

Select the correct answer

question mark

Hvad ændrer den angivne CSS-kode?

Select the correct answer

question mark

Hvordan importerer du en brugerdefineret CSS-fil til dit Shopify-tema?

Select the correct answer

question mark

Hvorfor er det nyttigt at foretage brugerdefinerede CSS-ændringer?

Select the correct answer

question mark

Hvad er formålet med at importere skrifttypen Poppins i eksemplet?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 3
some-alt