Help
Inloggen

Aangepaste CSS toevoegen aan je thema

Een cascading style sheet (CSS) wijzigt hoe elementen in je thema worden weergegeven en kan de weergave van meerdere pagina's tegelijk bepalen. Met de functie voor aangepaste CSS kun je je thema verder aanpassen dan de ingebouwde instellingen van een thema. Je kunt bijvoorbeeld CSS gebruiken om verlopen in te stellen in de kleurinstellingen van je thema. Je kunt aangepaste CSS toevoegen aan je hele thema of aan een specifieke sectie van een template in je thema. Aangepaste CSS wordt niet ondersteund op de pagina Checkout.

Voor het aanpassen van je CSS is enige bekendheid met CSS en HTML vereist. Zorg ervoor dat je begrijpt welk ondersteuningsniveau beschikbaar is voordat je je thema aanpast.

Op deze pagina

Aandachtspunten voor het gebruik van aangepaste CSS

Lees de volgende aandachtspunten door voordat je aangepaste CSS aan je thema toevoegt:

  • De volgende CSS-selectors en -eigenschappen worden niet ondersteund in aangepaste CSS:
    • At-rules @import, @charset en @namespace kunnen niet worden gebruikt
    • Voor CSS op sectieniveau zijn alleen at-rules @media, @container, @layer en @supports toegestaan
    • Voor CSS op sectieniveau kun je de ID of klassen van het omvattende Shopify Section-element dat door het thema wordt gerenderd met de klasse shopify-section, niet targeten.
    • De eigenschap content is niet beschikbaar in aangepaste CSS
  • Als een aangepaste CSS-regel wordt gedeclareerd met de tag die het bovenliggende sectie-element omvat, wordt deze beschouwd als een onderliggende tag en wordt de stijlregel op die sectie toegepast. Let op: de bovenliggende sectie wordt standaard omvat door een <div>-tag, maar dit kan door themaontwikkelaars worden ingesteld op een van de toegestane waarden in het sectieschema.
  • Momenteel is alleen het domein https://cdn.shopify.com toegestaan bij het gebruik van URL's in aangepaste CSS.
  • Aangepaste lettertypen zijn niet beperkt. Aangepaste lettertypen zijn echter een afzonderlijke bron die door browsers wordt gedownload voordat tekst wordt weergegeven, wat van invloed kan zijn op de algehele prestaties van een winkel. Het is jouw verantwoordelijkheid om ervoor te zorgen dat je webshop niet negatief wordt beïnvloed door aangepaste lettertypen. Lees hoe je aangepaste lettertypen in je thema gebruikt.
  • CSS-regels die van invloed zijn op het hele thema, zijn beperkt tot 1500 tekens.
  • CSS-regels die van invloed zijn op een specifieke sectie, zijn beperkt tot 500 tekens.
  • Afhankelijk van de CSS-selectors of -klassen die je gebruikt, kan het updaten van je thema ervoor zorgen dat je aangepaste CSS niet meer werkt.

Shopify biedt geen ondersteuning voor geavanceerde thema-aanpassingen. Als je een fout tegenkomt in je aangepaste CSS die verband houdt met deze beperkingen en je de oorzaak van de fout niet kunt achterhalen, raadpleeg dan de lijst met andere beschikbare ondersteuningsbronnen.

Aangepaste CSS toevoegen

Je kunt aangepaste CSS toevoegen aan je hele thema. Dit is van invloed op alle pagina's in je webshop, behalve de pagina Checkout. Je kunt bijvoorbeeld de manier wijzigen waarop knoppen in je hele winkel worden weergegeven.

Stappen:

  1. Ga in het Shopify-beheercentrum naar Webshop > Thema's.

  2. Klik op Thema bewerken.

  3. Klik op Thema-instellingen.

  4. Klik op Aangepaste CSS.

  5. Voeg je code toe.

  6. Klik op Opslaan.

Locatie van het vak voor aangepaste CSS in de thema-instellingen

Aangepaste CSS kan ook aan een specifieke sectie van je thema worden toegevoegd. Als je aangepaste CSS aan een sectie van je thema toevoegt, is de CSS beperkt tot die sectie. Je kunt bijvoorbeeld een aangepaste lettergrootte of een achtergrondkleur toepassen op een enkele sectie.

Stappen:

  1. Ga in het Shopify-beheercentrum naar Webshop > Thema's.

  2. Klik op Thema bewerken.

  3. Klik op de sectie waaraan je CSS wilt toevoegen.

  4. Klik onderaan het eigenschappenvenster van de sectie op Aangepaste CSS.

  5. Voeg je code toe.

  6. Klik op Opslaan.

Locatie van het vak voor aangepaste CSS in de sectie-instellingen

Aanvullende bronnen voor CSS

Voor het aanpassen van je CSS is enige bekendheid met CSS en HTML vereist. Zorg ervoor dat je begrijpt welk ondersteuningsniveau beschikbaar is voordat je je thema aanpast.

Als je meer wilt weten over CSS, kun je een aantal van de volgende bronnen bekijken: