Kleurschema's
Je kunt in de thema-instellingen verschillende kleurenschema's aanmaken en deze op verschillende secties in je onlinewinkel toepassen met een kleurenschemakiezer. Een kleurenschema is een set kleuren. Je thema heeft een set standaard kleurenschema's die je op elk moment kunt wijzigen in de themabewerker. Je kunt merkkleuren toevoegen voor een samenhangende toepassing van het kleurenpalet in je onlinewinkel.
Op deze pagina
Thema-instellingen voor kleurenschema
Kleurenschema's zijn een thema-instelling waarbij losse elementen en de bijbehorende kleuren op een visueel aantrekkelijke manier bij elkaar worden gegroepeerd. Je kunt verschillende kleuren toepassen op verschillende elementen in een samenhangend kleurenschema dat je kunt toepassen op het hele thema als er een kleurenschemakiezer beschikbaar is. Je kunt maximaal 21 kleurenschema's aanmaken. Je kunt ook van tevoren zien hoe je kleuren worden weergegeven in het voorbeeld van het schema.
Instellingen | Beschrijving |
---|---|
Achtergrond | De kleur wordt toegepast op de achtergrond van sommige secties en op de achtergrond van de contourknop. |
Kleurverloop achtergrond | Een kleurverloop wordt toegepast op de achtergrond van een aantal secties. De achtergrond wordt waar mogelijk vervangen door kleurverlopen. |
Tekst | De kleur wordt toegepast op de sectie- of bloktekst. |
Effen knopachtergrond | De kleur wordt toegepast op de achtergrond van de primaire knop. |
Effen knoplabel | De kleur wordt toegepast op de tekst van de primaire knop. |
Knop Omlijnen | De kleur wordt toegepast op de secundaire knoptekst en -rand. |
Schaduw | De kleur wordt toegepast op de schaduwen. |
Je kleurenschema beheren
Het kleurenschema en de kleuropties van je winkel zijn ingesteld binnen je thema-instellingen. Gebruik de kleurenkiezer voor effen kleuren om een nieuwe kleur te selecteren of om de waarde van de kleur in het tekstveld in te voeren. De volgende kleurnamen en -waarden worden geaccepteerd in het kleurveld:
- kleurnamen zoals
red
,black
ofblue
- RGB-kleurcodes
- hexadecimale kleurwaarden
Stappen:
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Klik op Aanpassen naast het thema dat je wilt aanpassen.
- Klik op het tandwielpictogram en daarna op Kleuren.
- Klik in de sectie Schema's op een bestaand schema of klik op Schema toevoegen om een nieuw kleurenschema toe te voegen.
- Klik op het kleurstaal voor de contenttype-kleur die je wilt wijzigen.
- Voer een hexadecimale kleurcode in of gebruik de kleurenkiezer om de kleur in te stellen. Verwijder de hex-code uit het tekstveld om de kleur in te stellen op transparant.
- Klik op Opslaan.
Je kleurenschema toepassen
Nadat je een kleurenschema hebt gedefinieerd bij de instellingen van het thema, kun je met de kleurenschemakiezer een kleurenschema toewijzen in de secties en blokken van je thema. De kleurenschemakiezer is alleen beschikbaar in bepaalde secties, blokken en algemene thema-instellingen.

Verlopen
In sommige thema's kun je voor een visueel interessante achtergrond een kleurverloop instellen. De instelling color_background
wordt gebruikt om de achtergrondeigenschap van CSS aan te passen.
Met de kleurverloopkiezer kun je de kleuren, verloopstijl, hoek, positie en doorzichtigheid van het verloop selecteren. In de themabewerker wordt in realtime een voorbeeld weergegeven van de opties die je selecteert in de kleurverloopkiezer. Je kunt ook een kleurverloop achtergrond maken met behulp van CSS-code, die een validatiechecker bevat.
Verlopen instellen
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Klik op Aanpassen naast het thema dat je wilt aanpassen.
- Klik op het tandwielpictogram en daarna op Kleuren.
- Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
- Klik op de optie kleurverloopstaal, zoals Achtergrondverloop.
- Als je nog nooit een kleurverloop hebt ingesteld, kun je kiezen uit enkele vooraf ingestelde opties. Selecteer een vooraf ingesteld verloop om het optiepaneel te openen.
- Selecteer je kleurverloopopties:
- Kies tussen een lineair en een radiaal kleurverloop. Gebruik de knoppen om de gewenste kleurverloopstijl te selecteren.
- Stel de hoek van het kleurverloop in met de pijlen omhoog en omlaag. Als je op de pijl omhoog of omlaag klikt, vergroot of verklein je het hoekpercentage met vijf.
- Gebruik de schuifregelaar om de positie je kleurverloop te selecteren of voer een numerieke waarde in het veld in.
- Voer een specifieke hex-kleurcode in of gebruik de kleurschuifregelaar om een tint te kiezen. Recent geselecteerde kleuren worden onder aan het paneel met verloopopties weergegeven.
- Gebruik de schuifregelaar aan de rechterkant om de transparantie van het kleurverloop te selecteren als je het doorzichtig wilt maken. Je kunt ook een percentage invoeren in het veld naast de hex-kleurcode.
- Klik op Opslaan.
Gebruik CSS om kleurverlopen in te stellen
De meeste CSS- background
-eigenschappen kunnen worden gebruikt om een achtergrondkleur in te stellen. Je kunt dit veld gebruiken voor effen kleuren (bijvoorbeeld #000000
, black
, rgb(0,0,0,0)
, rgba(0,0,0,0)
, hsl(0, 0%, 0%)
en hsla(0, 0%, 0%, 1)
produceren allemaal een effen zwarte achtergrond) of voor verlopen (bijvoorbeeld linear-gradient(red, green)
, radial-gradient(red, green)
of conic-gradient(red, green)
). Verlopen kunnen ook worden herhaald.
Stappen:
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Klik op Aanpassen naast het thema dat je wilt aanpassen.
- Klik op het tandwielpictogram en daarna op Kleuren.
- Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
- Klik op het kleurverloop dat je wilt bewerken.
- Klik op de pijl naast Verloop en selecteer vervolgens CSS.
- Typ of plak je kleurverloopcode in het veld CSS-code. Je kleurverloop wordt dan in het voorbeeld van de themabewerker op de juiste locatie weergegeven.
- Klik op Opslaan.
Een kleurverloop verwijderen
- Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
- Klik op Aanpassen naast het thema dat je wilt aanpassen.
- Klik op het tandwielpictogram en daarna op Kleuren.
- Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
- Klik op het kleurverloop dat je wilt verwijderen.
- Klik op Kleurverloop verwijderen.
- Klik op Opslaan.