De widget afstemmen op de kleuren van je thema

Bundlex kan je bundelwidget in een paar klikken afstemmen op de uitstraling van je winkel. Het paneel Widget-kleurpresets leest de kleurenschema's van je Shopify-thema en stelt kant-en-klare kleurencombinaties voor, zodat je aanbiedingen aanvoelen als een natuurlijk onderdeel van de pagina in plaats van als een los toegevoegd element.

Waar je kleurpresets vindt

Open een bundel in de editor en ga naar het tabblad Stijl. Het paneel Widget-kleurpresets staat boven de gedetailleerde instellingen voor Widgetstijl. Gebruik presets om alles tegelijk in te stellen en verfijn desgewenst afzonderlijke elementkleuren in het gedeelte Widgetstijl hieronder.

Kies een primaire kleur

De rij Primaire kleur vormt het uitgangspunt voor het hele palet. Je kunt deze op vier manieren instellen:

• Voorgestelde kleurstalen - de gekleurde stalen worden rechtstreeks uit de kleurenschema's van je Shopify-thema gehaald, zoals knopkleuren, tekst, achtergronden en dergelijke. Klik op een staal om het toe te passen.
• Standaardkleuren - het donkergrijze staal na de stalen van je thema herstelt de standaard zwart-witkleuren van de widget.
• Aangepaste kleur - klik op het staal met het pluspictogram om een kleurkiezer te openen en een hex-waarde te kiezen. Druk na het invoeren van de hex-waarde op Enter en controleer of het voorbeeld verandert.
• Willekeurige kleur - klik op het vernieuwingsstaal om een willekeurige kleur te kiezen als je gewoon opties wilt verkennen.

Welke optie je ook kiest, Bundlex bouwt de rest van de widgetkleuren er direct omheen opnieuw op en past het resultaat toe op het live voorbeeld.

Kies een accentkleur (secundaire kleur)

De Secundaire kleur is het accent voor badges, actieve statussen en markeringen. Bundlex genereert deze automatisch zodat hij bij je primaire kleur past en biedt enkele harmonie-opties als stalen waar je doorheen kunt klikken.

Als je het accent liever zelf instelt, heb je dezelfde twee overschrijvingsopties als bij de primaire rij:

• Aangepaste accentkleur - met het plusstaal open je een kiezer voor een exacte hex-waarde.
• Willekeurige harmoniekleur - het vernieuwingsstaal kiest een contrasterende kleur uit de kleurencirkel die toch bij je primaire kleur past.

Schakelaar voor transparante aanbiedingen

Naast de primaire kleur vind je een schakelaar Transparant die de achtergrond van niet-geselecteerde aanbiedingskaarten regelt:

• Uit - achtergronden van niet-geselecteerde aanbiedingen krijgen een effen kleur, bij een preset een lichte tint van je kleuren, zodat elke staffel als een eigen kaart wordt weergegeven.
• Aan - achtergronden van niet-geselecteerde aanbiedingen blijven transparant voor een strakkere, vlakke uitstraling die opgaat in de pagina.

Als je de schakelaar omzet, verandert alleen de transparantie van de achtergrond van de niet-geselecteerde aanbieding. De achtergronden van geselecteerde aanbiedingen en aanbiedingen waarover je de muis beweegt, evenals de tekst-, badge- en randkleuren, blijven hetzelfde. Als je de schakelaar uitzet, wordt de achtergrond weer volledig ondoorzichtig. Kleurstalen waarop je klikt terwijl de schakelaar aanstaat, passen de transparante versie van die preset toe.

De suggestie "Randradius toepassen"

Kleuren zijn niet het enige dat Bundlex van je thema kan overnemen. Als Bundlex detecteert dat de hoekradius van je thema afwijkt van de huidige hoeken van de widget, verschijnt er een banner Randradius toepassen met de tekst "Widgethoeken afstemmen op je thema."

1. Klik op Toepassen in de banner om de hoekradius van je thema toe te passen op de aanbiedingskaarten, aanbiedingsafbeeldingen en cross-sellafbeeldingen van de widget.
2. Of sluit de banner met het sluitpictogram als je je huidige hoeken wilt behouden.

De suggestie kan ontbreken omdat er geen verschil is gedetecteerd, het thema geen bruikbare radius biedt of je de suggestie hebt gesloten. Je kunt de hoeken nog steeds zelf instellen onder Widgetstijl.

Afzonderlijke elementen verfijnen

Nadat je je palet hebt gekozen, vouw je een element uit onder Widgetstijl. Met Aanbiedingskaart kun je de randradius, tussenruimte en geselecteerde, zwevende en niet-geselecteerde statussen afzonderlijk aanpassen. In dit voorbeeld hebben we de kaart een radius van 8 pixels gegeven. Pas eerst presets toe en voer daarna deze laatste aanpassingen uit, omdat het kiezen van een andere preset afzonderlijke kleurkeuzes kan vervangen.

Opslaan en je storefront controleren

Klik op Opslaan. Test een actieve korting op de productpagina waarop deze is gericht. Selecteer elke aanbieding, controleer het contrast van tekst en badge, kies varianten en gebruik Toevoegen aan winkelwagen. Controleer de pagina op desktop en mobiel, omdat het editorvoorbeeld niet elke thema-achtergrond of schermgrootte kan weergeven.

Ons voorbeeld gebruikt dezelfde regels voor hoeveelheidskortingen: twee tassen Ivory Small hebben na 10% korting een productsubtotaal van $43.20. Styling verandert de presentatie, niet de berekening van de korting. Controleer de winkelwagen en het afrekenen als onderdeel van je eindcontrole.

Hoe suggesties worden gegenereerd

Bundlex leest de kleurinstellingen van je thema en leidt bijpassende tinten af. De suggesties die van het thema zijn afgeleid, zijn herhaalbaar bij dezelfde thema-instellingen. De opties Willekeurige kleur en Willekeurige harmonie leveren bewust nieuwe keuzes op.

Tips

• Presets zijn een snel uitgangspunt. Nadat je er een hebt toegepast, kun je nog steeds elke afzonderlijke elementkleur aanpassen in Widgetstijl.
• Als er geen voorgestelde kleurstalen verschijnen, kon Bundlex geen kleurwaarden uit je actieve thema lezen. Je kunt nog steeds de aangepaste en willekeurige opties gebruiken.
• Gebruik het live voorbeeld om het contrast te controleren, vooral wanneer de schakelaar Transparant aanstaat, zodat badges en tekst leesbaar blijven tegen de achtergrond van je pagina.