Shopify kleurstalen aanpassen: vormen en stijlen
Kleurstalen geinstalleerd, afbeeldingen toegewezen, alles werkt. Maar de swatches zien er niet uit zoals je wilt. Te klein. Verkeerde vorm. De rand past niet bij het design. De uitverkochte varianten zijn niet duidelijk genoeg gemarkeerd.
Rubik Variant Images geeft je volledige controle over het uiterlijk van je kleurstalen. Meer dan 100 CSS-variabelen, een visuele editor en een AI-assistent die CSS op verzoek schrijft. In dit artikel laat ik zien wat je allemaal kunt aanpassen.
In dit artikel
- De drie swatch-typen
- Vormen: rond, vierkant, afgerond
- Grootte en tussenruimte
- Rand en selectiestijlen
- Hover-effecten
- Uitverkocht-markering
- Tooltip-aanpassing
- De AI Visual Settings Assistant
- Waarom Shadow DOM belangrijk is
- Video
- Veelgestelde vragen
- Verder lezen
De drie swatch-typen
Voordat het over het uiterlijk gaat: Rubik ondersteunt drie verschillende swatch-typen. Elk type kun je onafhankelijk vormgeven.
Kleurswatches. Een cirkel of vierkant, gevuld met een effen kleur. Het beste voor opties als rood, blauw, zwart, waar de kleur zelf de informatie draagt. Rubik herkent gangbare kleurnamen automatisch en koppelt de juiste kleurcode.
Productafbeelding-swatches. Kleine thumbnails met een foto van de betreffende variant. Ideaal voor patronen, prints, stoffen of producten waarbij de snit per kleur anders oogt. De klant ziet het product, niet alleen een kleur.
Pillen-knoppen. Afgeronde rechthoeken met tekstlabel. Voor opties die zich niet visueel laten weergeven: maat (S, M, L), materiaal (katoen, linnen), model (standaard, pro).
Het bijzondere: je kunt verschillende typen per optie combineren. Kleurcirkels voor de kleuroptie, pillen voor de maat, thumbnails voor het design. Alles op dezelfde productpagina.
Vormen: rond, vierkant, afgerond
De vorm van de swatches bepaalt de eerste indruk. Rubik biedt drie basisvormen:
Cirkels (Circle). De klassieker. Ronde kleurvelden, zoals bij de meeste grote webshops. Strak en modern. Past goed bij minimalistische designs.
Vierkanten (Square). Scherpe hoeken, geometrische look. Past bij hoekige designs en shops met een technisch of industrieel karakter. Bij productafbeelding-thumbnails laten vierkanten meer van het beeld zien dan cirkels.
Afgerond (Rounded). Vierkanten met afgeronde hoeken. De middenweg. Zachter dan een vierkant, maar met meer beeldoppervlak dan een cirkel. Erg populair bij modewinkels.
De vorm stel je in via de CSS-variabele --swatch-border-radius. 50% levert een cirkel op, 0% een vierkant, alles ertussenin een tussenvorm. In de visuele editor klik je gewoon op de gewenste vorm.
Grootte en tussenruimte
Standaard zijn Rubik-swatches 34×34 pixels. Dat werkt voor de meeste shops. Maar niet voor allemaal.
Sieradenwinkels met fijne kleurnuances hebben grotere swatches nodig, zodat het verschil tussen rosegoud en geelgoud herkenbaar is. Shops met 20+ kleuren per product hebben misschien kleinere swatches nodig, zodat er niet twee rijen ontstaan.
Aanpasbare waarden: breedte en hoogte (gelijk of verschillend voor niet-vierkante vormen), tussenruimte tussen swatches (horizontaal en verticaal), afstand tot de optienaam boven de swatches.
Rand en selectiestijlen
Hoe toont de klant welke kleur momenteel geselecteerd is? Rubik biedt meerdere varianten:
Rand-accentuering. De geselecteerde swatch krijgt een dikkere rand of een andere randkleur. Standaard is een 2px rand in zwart rondom de actieve swatch.
Outline met afstand. In plaats van een rand direct op de swatch een aparte ring met wat ruimte ertussen. Dat ziet er bij kleurcirkels bijzonder goed uit, omdat de kleur niet door de rand wordt “opgegeten”.
Schaling. De geselecteerde swatch wordt iets groter dan de rest. Subtiel, maar effectief.
Niet-geselecteerde swatches kunnen een lichte rand hebben of randloos zijn. Bij witte kleurvelden op een witte achtergrond is een dunne rand zinvol, zodat de swatch uberhaupt zichtbaar is.
Hover-effecten
Wat gebeurt er als de klant met de muis over een swatch beweegt? Rubik biedt aanpasbare hover-effecten:
Randkleur bij hover. De rand verandert van kleur wanneer de cursor over de swatch beweegt. Geeft de klant visuele feedback dat de swatch klikbaar is.
Schaling bij hover. De swatch wordt bij het erover bewegen iets groter. Combineerbaar met de randwijziging. Let op: bij kleine swatches kan dit aangrenzende elementen verschuiven. transform: scale() vermijdt dat, omdat het de swatch visueel vergroot zonder de layout te wijzigen.
Tooltip bij hover. Toont de naam van de optie (bijvoorbeeld “Marineblauw”) boven de swatch. Details in het volgende onderdeel.
Uitverkocht-markering
Wat gebeurt er met swatches als een variant uitverkocht is? Drie opties:
Doorgestreepte lijn. Een diagonale lijn over de swatch. De klassieker. Direct herkenbaar, maar de kleur blijft zichtbaar.
Verminderde dekking. De swatch wordt halftransparant. Subtieler dan een lijn, maar bij vergelijkbare kleuren moeilijker te herkennen.
Volledig verbergen. De swatch verdwijnt. Alleen beschikbare varianten worden getoond. Zinvol wanneer veel varianten regelmatig uitverkocht zijn en het raster anders onoverzichtelijk wordt.
Je kunt ook instellen of uitverkochte swatches nog klikbaar zijn. Sommige shops willen dat klanten een niet-beschikbare variant kunnen selecteren om zich aan te melden voor een melding (“Weer op voorraad”).
Tooltip-aanpassing
Tooltips tonen de optienaam boven de swatch wanneer de klant er met de muis over beweegt. Bij kleurcirkels is dat handig, want anders weet de klant niet of “die derde blauwe cirkel” marineblauw, koningsblauw of staalblauw is.
Rubik laat je het volgende aanpassen: achtergrondkleur van de tooltip, tekstkleur, lettergrootte, hoekradius en positie (boven of onder de swatch). Op mobiele apparaten worden tooltips automatisch als statische tekst onder de swatch-balk weergegeven, omdat hover op touchscreens niet bestaat.
De AI Visual Settings Assistant
Niet elke webshop-eigenaar schrijft graag CSS. Daarom is er de AI Visual Settings Assistant. Beschrijf in gewone taal hoe je swatches eruit moeten zien, en de AI genereert de juiste CSS-variabelen.
Voorbeelden die werken:
- “Maak de kleurvelden rond en 40 pixels groot”
- “Zwarte rand om de geselecteerde swatch, 3 pixels breed”
- “Uitverkochte varianten met diagonale lijn markeren en half doorschijnend maken”
- “Tooltip in wit op zwarte achtergrond”
- “Dezelfde stijl als op nike.com”
De AI kent alle CSS-variabelen van Rubik en genereert alleen geldige waarden. Je ziet een preview voordat je de wijzigingen overneemt. Geen risico om iets kapot te maken.
Voor shops met CSS-ervaring is er de Advanced CSS Editor. Hier bewerk je elk van de 100+ variabelen direct. Alles wordt geisoleerd in het Shadow DOM, zodat je wijzigingen geen andere delen van de pagina beinvloeden.
Waarom Shadow DOM belangrijk is
Rubik rendert swatches in een Shadow DOM. Dat betekent: het CSS van je swatches is volledig geisoleerd van het thema-CSS. Thema-updates kunnen je swatch-stijlen niet overschrijven. En je swatch-aanpassingen kunnen het themadesign niet beschadigen.
Bij andere swatch-apps komen de stijlen in het globale CSS terecht. Elke thema-update, elke nieuwe app, elk custom CSS kan de swatches onbedoeld veranderen. Met Shadow DOM gebeurt dat niet. Je aanpassingen blijven precies zoals je ze hebt ingesteld.
Kleurstalen in actie
Bekijk hoe verschillende swatch-stijlen eruit zien op een echte Shopify-webshop:
Veelgestelde vragen
Kan ik Shopify-kleurstalen aanpassen zonder CSS-kennis?
Ja. Rubik biedt een visuele editor met klikopties voor vorm, grootte en rand. Daarnaast is er de AI Visual Settings Assistant: beschrijf in je eigen woorden hoe de swatches eruit moeten zien, en de AI genereert het passende CSS.
Kunnen kleurstalen verschillende vormen hebben?
Ja. Rubik ondersteunt cirkels, vierkanten en afgeronde vierkanten. De vorm kun je traploos instellen via de hoekradius. Verschillende opties (kleur, maat) kunnen verschillende swatch-typen en vormen hebben.
Wat is de AI Visual Settings Assistant?
Een AI-assistent in de Rubik-app die CSS genereert op basis van gewone taal. Zeg “ronde swatches, 40px groot, zwarte rand” en de AI maakt de juiste CSS-variabelen. Je ziet een preview voor het opslaan.
Hoe markeer ik uitverkochte varianten?
Drie opties: doorgestreepte lijn, verminderde dekking of volledig verbergen. Je kunt ook instellen of uitverkochte swatches klikbaar blijven (bijvoorbeeld voor “weer op voorraad”-meldingen).
Kunnen thema-updates mijn swatch-aanpassingen overschrijven?
Nee. Rubik rendert swatches in het Shadow DOM, geisoleerd van het thema-CSS. Je aanpassingen blijven bij thema-updates, app-installaties en custom-CSS-wijzigingen onaangetast.
Verder lezen
