Aangepaste CSS aan je thema toevoegen
Een CSS (Cascading Style Sheet) verandert de manier waarop elementen worden weergegeven in een thema en kan de weergave van meerdere pagina's tegelijkertijd beheren. Je kunt je thema, in aanvulling op de instellingen die in een thema zijn ingebouwd, nog verder aanpassen door de functie Aangepaste CSS te gebruiken. 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 checkoutpagina.
Het aanpassen van je CSS vereist enige kennis van CSS en HTML. Voordat je je thema aanpast, moet je eerst weten welk ondersteuningsniveau beschikbaar is.
Op deze pagina
Aandachtspunten bij het gebruik van aangepaste CSS
Lees de volgende aandachtspunten voordat je aangepaste CSS aan je thema toevoegt:
-
De volgende CSS-selectors worden niet ondersteund in aangepaste CSS:
- @-regels
@import,@charseten@namespacekunnen niet worden gebruikt. - Voor CSS op sectieniveau zijn alleen de @-regels
@media,@container,@layeren@supportstoegestaan. - Voor CSS op sectieniveau kun je niet de ID of klassen van het geneste Shopify-sectie-element targeten dat door het thema wordt weergegeven met de klasse
shopify-section
- @-regels
Als een aangepaste CSS-regel wordt gedeclareerd met de tag die het bovenliggende sectie-element nest, wordt deze beschouwd als een aflopende tag en wordt de stijlregel toegepast op die sectie. Het bovenliggende gedeelte wordt standaard genest door een
<div>-tag, maar de instelling kan door themaontwikkelaars in een van de toegestane waarden in het sectieschema worden veranderd.Momenteel is alleen het domein https://cdn.shopify.com toegestaan voor URL's in aangepaste CSS.
Er gelden geen beperkingen voor aangepaste lettertypen. Aangepaste lettertypen zijn echter een afzonderlijke bron die door browsers worden gedownload voordat tekst wordt weergegeven, wat van invloed kan zijn op de algemene prestaties van een winkel. Het is jouw verantwoordelijkheid om ervoor te zorgen dat je webwinkel niet negatief wordt beïnvloed door aangepaste lettertypen. Leer meer over aangepaste lettertypen in je thema.
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 bijwerken van je thema ervoor zorgen dat je aangepaste CSS niet meer werkt.
Shopify ondersteunt geen geavanceerde thema-aanpassingen. Als je een fout tegenkomt met betrekking tot deze beperkingen in je aangepaste CSS en niet kunt vaststellen waardoor de fout wordt veroorzaakt, raadpleeg je de lijst met andere beschikbare ondersteuningsbronnen.
Aangepaste CSS-
Aangepaste CSS kan worden toegevoegd aan je hele thema dat van invloed is op alle pagina's in je webshop, behalve de checkoutpagina. Je kunt bijvoorbeeld de manier wijzigen waarop knoppen worden weergegeven in je hele winkel.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Klik op Aanpassen.
- Klik op thema-instellingen.
- Klik op Aangepaste CSS.
- Voeg je code toe.
- Klik op Opslaan.
Aangepaste CSS kan ook worden toegevoegd aan een specifieke sectie van je thema. Als je aangepaste CSS aan een sectie van je thema toevoegt, is de CSS beperkt tot die sectie. Je kunt bijvoorbeeld een aangepaste tekengrootte of achtergrondkleur toepassen op één sectie.
Stappen:
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Klik op Aanpassen.
- Klik op de sectie waar je CSS aan wilt toevoegen.
- Klik onderaan het paneel met sectie-eigenschappen op Aangepaste CSS.
- Voeg je code toe.
- Klik op Opslaan.
Aanvullende bronnen voor CSS
Het aanpassen van je CSS vereist enige kennis van CSS en HTML. Voordat je je thema aanpast, moet je eerst weten welk ondersteuningsniveau beschikbaar is.
Als je meer wilt leren over CSS, kun je een aantal van de volgende bronnen bekijken: