Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Basis-CSS-aanpassing | Pagina's en Inhoud Aanpassen
Introductie tot Shopify-ontwikkeling

Basis-CSS-aanpassing

Veeg om het menu te tonen

Basis CSS-wijzigingen bieden de mogelijkheid om het uiterlijk en de uitstraling van je Shopify-winkel verder aan te passen dan de standaardinstellingen van het thema. In dit hoofdstuk leer je hoe je een nieuw CSS-bestand aanmaakt en importeert in je thema voor stijlwijzigingen.

Stappen

  1. Een nieuw CSS-bestand aanmaken: ga naar Online Store > Themes > Code bewerken en open de map Assets. Klik op Nieuwe asset toevoegen, kies Maak een leeg bestand aan en geef het de naam custom.css;
  2. CSS-code toevoegen: open je custom.css-bestand en voeg deze code toe om lettertypen te wijzigen en de kopstijl aan te passen:
@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. Je CSS-bestand koppelen aan je thema: ga naar het bestand layout/theme.liquid en voeg de volgende regel toe vóór de afsluitende </head>-tag om je nieuwe CSS-bestand te koppelen:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Je wijzigingen bekijken: sla je wijzigingen op en bekijk een voorbeeld van je winkel om te zien hoe het lettertype en de kopstijlen zijn bijgewerkt.

1. Waar maak je een nieuw CSS-bestand aan in Shopify?

2. Wat verandert de meegeleverde CSS-code?

3. Hoe importeer je een aangepast CSS-bestand in je Shopify-thema?

4. Waarom is het nuttig om aangepaste CSS-wijzigingen aan te brengen?

5. Wat is het doel van het importeren van het lettertype Poppins in het voorbeeld?

question mark

Waar maak je een nieuw CSS-bestand aan in Shopify?

Selecteer het correcte antwoord

question mark

Wat verandert de meegeleverde CSS-code?

Selecteer het correcte antwoord

question mark

Hoe importeer je een aangepast CSS-bestand in je Shopify-thema?

Selecteer het correcte antwoord

question mark

Waarom is het nuttig om aangepaste CSS-wijzigingen aan te brengen?

Selecteer het correcte antwoord

question mark

Wat is het doel van het importeren van het lettertype Poppins in het voorbeeld?

Selecteer het correcte antwoord

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Basis-CSS-aanpassing

Basis CSS-wijzigingen bieden de mogelijkheid om het uiterlijk en de uitstraling van je Shopify-winkel verder aan te passen dan de standaardinstellingen van het thema. In dit hoofdstuk leer je hoe je een nieuw CSS-bestand aanmaakt en importeert in je thema voor stijlwijzigingen.

Stappen

  1. Een nieuw CSS-bestand aanmaken: ga naar Online Store > Themes > Code bewerken en open de map Assets. Klik op Nieuwe asset toevoegen, kies Maak een leeg bestand aan en geef het de naam custom.css;
  2. CSS-code toevoegen: open je custom.css-bestand en voeg deze code toe om lettertypen te wijzigen en de kopstijl aan te passen:
@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. Je CSS-bestand koppelen aan je thema: ga naar het bestand layout/theme.liquid en voeg de volgende regel toe vóór de afsluitende </head>-tag om je nieuwe CSS-bestand te koppelen:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Je wijzigingen bekijken: sla je wijzigingen op en bekijk een voorbeeld van je winkel om te zien hoe het lettertype en de kopstijlen zijn bijgewerkt.
Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3
some-alt