Kleurschema's

Je kunt in de thema-instellingen verschillende kleurenschema's aanmaken en deze op verschillende secties in je webshop 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 webshop.

Templates hebben geen individuele kleurinstellingen om ervoor te zorgen dat het ontwerp van je webshop overal op je website samenhangend is. Een template is eigenlijk een soort hoofdpagina of de hoofdcontent voor een winkel. Als je verschillende kleurenschema's in je winkel hebt, kan dat verwarrend werken voor klanten en kunnen ze je winkel verlaten zonder iets te kopen.

Je kunt de webshopfuncties en paginatypen voor secties met de instelling Kleurschema controleren.

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 of blue
• RGB-kleurcodes
• hexadecimale kleurwaarden

Stappen:

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op Aanpassen naast het thema dat je wilt aanpassen.
3. Klik op het tandwielpictogram en daarna op Kleuren.
4. Klik in de sectie Schema's op een bestaand schema of klik op Schema toevoegen om een nieuw kleurenschema toe te voegen.
5. Klik op het kleurstaal voor de contenttype-kleur die je wilt wijzigen.
6. 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.
7. 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.

Tip

Voor meer informatie over verlopen en CSS-achtergronden, raadpleeg Mozilla's lineaire verlopen en CSS-achtergronddocumentatie.

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

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op Aanpassen naast het thema dat je wilt aanpassen.
3. Klik op het tandwielpictogram en daarna op Kleuren.
4. Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
5. Klik op de optie kleurverloopstaal, zoals Achtergrondverloop.
6. 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.

7. Selecteer je kleurverloopopties:

   • Kies tussen een lineair of een radiaal kleurverloop. Je kunt met de knoppen de gewenste kleurverloopstijl selecteren.
   • Stel de hoek van het kleurverloop in met de pijl omhoog en omlaag. Klik op de pijl omhoog of omlaag om het hoekpercentage telkens met vijf te verhogen of te verlagen.
   • Met de schuifregelaar selecteer je de Positie van het kleurverloop. Je kunt ook een numerieke waarde in het veld invoeren.
   • 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.

8. 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:

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op Aanpassen naast het thema dat je wilt aanpassen.
3. Klik op het tandwielpictogram en daarna op Kleuren.
4. Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
5. Klik op het kleurverloop dat je wilt bewerken.
6. Klik op de pijl naast Verloop en selecteer vervolgens CSS.
7. 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.
8. Klik op Opslaan.

Een kleurverloop verwijderen

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op Aanpassen naast het thema dat je wilt aanpassen.
3. Klik op het tandwielpictogram en daarna op Kleuren.
4. Klik in de sectie Schema's op een bestaand schema dat je wilt bewerken.
5. Klik op het kleurverloop dat je wilt verwijderen.
6. Klik op Kleurverloop verwijderen.
7. Klik op Opslaan.