Kleurschema's

Deze pagina is afgedrukt op May 28, 2023. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/theme-structure/color-scheme.

Met verschillende secties van het thema, zoals tekst met opmaak, afbeeldingsbanner en collectielijst, kun je een kleurenschema selecteren om op die sectie toe te passen in de kleuren die je in je thema-instellingen instelt. Je thema heeft een standaardkleurenschema dat op elk moment in de themabewerker kan worden gewijzigd. Het toevoegen van je merkkleuren zorgt voor een samenhangende toepassing van je kleurenpalet in je onlinewinkel.

Op deze pagina

Kleurinstellingen

De achtergrond van afbeeldingen en afbeeldingspadding kunnen worden ingesteld in je themabewerker. Gebruik de vervolgkeuzelijst om te kiezen tussen Accent 1, Accent 1-verloop, Accent 2, Accent 2-verloop, Achtergrond 1, Achtergrond 1-verloop, Achtergrond 2, Achtergrond 2-verloop of Omgekeerd. Je kunt een voorbeeld van geselecteerde kleurenschema's bekijken in het voorbeeldpaneel van je themabewerker.

Instellingen Beschrijving
Tekst Kleur kan worden toegepast op sectie- of bloktekst.
Accent 1 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Accent 1-verloop Selecteer een vooraf ingesteld verloop of gebruik de kleurverloopkiezer om je accentverloop aan te passen.
Accent 2 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Accent 2-kleurverloop Selecteer een vooraf ingesteld verloop of gebruik de kleurverloopkiezer om je accentverloop aan te passen.
Achtergrond 1 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Achtergrond 1-verloop Selectere een vooraf ingesteld verloop of gebruik de verloopkiezer om je achtergrondverloop aan te passen.
Achtergrond 2 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Achtergrond 2-kleurverloop Selectere een vooraf ingesteld verloop of gebruik de verloopkiezer om je achtergrondverloop aan te passen.
Omkeren Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties. Gebruikt achtergrond 1 als tekstkleur en de tekstkleur als achtergrondkleur

Met sommige instellingen kun je ook een kleurenschema kiezen waarmee je verlopen kunt gebruiken. Je kunt in Dawn bijvoorbeeld kleurverlopen van je merk instellen en deze gebruiken in plaats van de standaard accent- en achtergrondkleuropties.

Je kleurenschema beheren

Het kleurenschema van je winkel is ingesteld binnen je thema-instellingen.

  1. Ga vanuit het Shopify-beheercentrum naar de onlinewinkel > Thema's.
  2. Zoek het thema dat je wilt bewerken en klik vervolgens op Aanpassen.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Klik op thema-instellingen.
  2. Klick op Kleuren.
  3. Als je een kleur in je thema wilt veranderen, klik je op de kleur en gebruik je de kleurkiezer, of je voert de waarde van de nieuwe kleur in het tekstveld in.
  4. Klik op Opslaan.

Gebruik de kleurkiezer voor effen kleuren om een nieuwe kleur te selecteren of om de waarde van de kleur in het tekstveld in te voeren. Het veld accepteert kleurnamen (bijvoorbeeld red, black, blue), RGB- of hexadecimale kleurwaarden.

Verlopen

Je kunt in Dawn een kleurverlopen instellen voor een visueel interessante achtergrond. De color_background-instelling 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

  1. Ga vanuit het Shopify-beheercentrum naar de onlinewinkel > Thema's.
  2. Zoek het thema dat je wilt bewerken en klik vervolgens op Aanpassen.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Klik op thema-instellingen.
  2. Klick op Kleuren.

  3. Selecteer één van de verloopopties.

  4. Selecteer je kleurverloopopties:

  • Je kunt kiezen tussen een lineair of radiaal kleurverloop. Gebruik de knoppen om je gewenste kleurverloopstijl te selecteren.
  • De hoek van je kleurverloop kan worden ingesteld met de pijlen omhoog en omlaag. Als je op omhoog of omlaag klikt, wordt het hoekpercentage met 5% vergroot of verkleind.
  • Gebruik de schuifregelaar om de positie je kleurverloop te selecteren of voer een numerieke waarde in het veld in.
  • Je kunt een specifieke hex-kleurcode invoeren of de kleurschuifregelaar gebruiken om een tint te kiezen. Recent geselecteerde kleuren worden onderaan het paneel met verloopopties weergegeven.
  • Als je wilt dat je kleurverloop ondoorzichtig is, gebruik je de schuifregelaar aan de rechterkant om de transparantie van je kleurverloop te selecteren. Je kunt ook een percentage invoeren in het veld naast de hex-kleurcode.
  1. Klik op Opslaan.

Kleurverloopkiezer in de themabewerker

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 vanuit het Shopify-beheercentrum naar de onlinewinkel > Thema's.
  2. Zoek het thema dat je wilt bewerken en klik vervolgens op Aanpassen.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Klik op thema-instellingen.
  2. Klick op Kleuren.
  3. Klik op het kleurverloop dat je wilt bewerken.
  4. Klik op de pijl naast Gradient en selecteer CSS.
  5. 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.
  6. Klik op Opslaan.
    Gradient CSS Code field in the theme editor

Een kleurverloop verwijderen

Een kleurverloop opnieuw instellen of verwijderen:

  1. Ga vanuit het Shopify-beheercentrum naar de onlinewinkel > Thema's.
  2. Zoek het thema dat je wilt bewerken en klik vervolgens op Aanpassen.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Tik in de Shopify-appop winkel.
  2. Tik in het gedeelte verkoopkanalen op onlinewinkel.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken en tik vervolgens op Aanpassen.
  5. Tik op bewerken.
  1. Klik op thema-instellingen.
  2. Klick op Kleuren.
  3. Klik op het kleurverloop dat je wilt bewerken.
  4. Klik op Kleurverlopen verwijderen
  5. Klik op Opslaan.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis