Lære Grundlæggende CSS-Tilpasning | Tilpasning af Sider og Indhold

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

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;
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;
}

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 }}

Forhåndsvis ændringerne: gem dine ændringer og forhåndsvis din butik for at se, hvordan skrifttype og overskriftsstile er blevet opdateret.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 3

Spørg AI

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

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?

Stryg for at vise menuen

Trin

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;
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;
}

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 }}

Forhåndsvis ændringerne: gem dine ændringer og forhåndsvis din butik for at se, hvordan skrifttype og overskriftsstile er blevet opdateret.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 3

Grundlæggende CSS-Tilpasning

Trin

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?

Grundlæggende CSS-Tilpasning

Trin

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?

Grundlæggende CSS-Tilpasning

Trin

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?

Grundlæggende CSS-Tilpasning

Trin

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?

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

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