De uitstraling van elk widgetelement aanpassen

Het gedeelte Widgetstijl splitst de widget op de productpagina op in afzonderlijke elementen, zodat je elk element apart kunt opmaken. Open dit gedeelte in de bundel-editor en je vindt een reeks accordeonpanelen, één per element, waarin je kleuren, lettertypen, randen, tussenruimte, badges en meer beheert.

Hoe het gedeelte Widgetstijl werkt

Open het tabblad Stijl van de bundel en zoek Widgetstijl. Klik op de kop van een paneel om de instellingen voor dat element weer te geven. Als je de muis over een kop beweegt, wordt het bijbehorende element in het voorbeeld gemarkeerd. Sommige panelen verschijnen alleen wanneer de bijbehorende functie beschikbaar is in de bundel.

De meeste panelen bevatten dezelfde basisinstellingen: een kleurkiezer, een tekengrootte en een keuzelijst voor de tekenstijl. Panelen voor een kader, zoals de aanbiedingskaart of een badge, bevatten ook een achtergrondkleur, randkleur, randbreedte en hoekradius. Je wijzigingen worden samen met de rest van de bundel opgeslagen.

De panelen, element voor element

Koptekst

Regelt de tekstkleur, tekengrootte en tekenstijl van de koptekst van de widget. Voer hoger in het tabblad Stijl koptekst in om Uitlijning van koptekst weer te geven, met de opties Links, Midden, Midden met doorhalingslijn of Rechts. Wanneer de uitlijning is ingesteld op Midden met doorhalingslijn, verschijnt in dit paneel een extra instelling voor de kleur en dikte van de lijn.

Aanbiedingskaart

Dit is het kader rond elke aanbieding, oftewel elke staffel. Dit is het grootste paneel, omdat het drie visuele statussen omvat:

• Aanbieding niet geselecteerd: achtergrondkleur, randkleur en randbreedte voor de standaardstatus.
• Aanbieding bij hover: dezelfde drie instellingen die worden toegepast wanneer een klant de muis over de kaart beweegt.
• Geselecteerde aanbieding: dezelfde drie instellingen voor de momenteel gekozen aanbieding.

Het paneel stelt ook gedeelde kaarteigenschappen in: de hoekradius, de ruimte tussen kaarten, de horizontale en verticale binnenruimte en een Radio-optie om de radioknop weer te geven of te verbergen. Het geanimeerde achtergrondeffect wordt afzonderlijk ingesteld met de schakelaar Decoratie hoger in het tabblad Stijl (Bubbels, Ringen, Harten, Sterexplosie, Percentage, Sterren, Klok of Geld) en verschijnt alleen bij de geselecteerde aanbieding. De kleuren van de aanbiedingskaart bepalen ook het uiterlijk van de radioknop.

Titel en subtitel van de aanbieding

Twee afzonderlijke panelen, elk met een kleur, tekengrootte en tekenstijl voor de titelregel en de subtitelregel van de aanbieding.

Kortingslabel

Stelt het kortingslabel in met een tekstkleur, achtergrondkleur, tekengrootte en tekenstijl. Let op: deze instellingen zijn ook van invloed op extra badges voor cadeaus.

Afbeelding van de aanbieding

Bepaalt de grootte, hoekradius, randkleur, randdikte en Schaduw van de aanbiedingsafbeelding (Geen, Klein, Gemiddeld of Groot). Je stelt hier ook in hoe de afbeelding wordt weergegeven:

• Origineel: behoudt de oorspronkelijke beeldverhouding van de afbeelding.
• Vierkant: snijdt de afbeelding bij tot een vierkant.
• Vierkant (bovenkant): snijdt de afbeelding bij tot een vierkant en behoudt het bovenste gedeelte.
• Vierkant (passend): past de volledige afbeelding binnen een vierkant zonder bijsnijden.

Hoeveelheidsbadge

Stelt het kleine aantal in dat op de aanbiedingsafbeelding kan worden weergegeven. Je kunt de tekstkleur, achtergrondkleur, hoekradius, tekengrootte, tekenstijl en Positie instellen (Rechtsboven, Linksboven, Rechtsonder of Linksonder). Dit aantal wordt op de aanbiedingsafbeelding weergegeven wanneer "Hoeveelheidsbadge weergeven" is ingeschakeld.

Variantlabel

Stelt de kleur, tekengrootte en tekenstijl in van titels van variantopties (bijvoorbeeld Maat of Kleur) en hun rijnummers.

Vervolgkeuzemenu

Gebruik voor vervolgkeuzemenu's voor varianten het afzonderlijke paneel Vervolgkeuzemenu om tekst, achtergrond, rand, hoeken en binnenruimte aan te passen.

Aanbiedingsbadge

De badge is de opvallende aanduiding, zoals "Meest populair", bij een aanbieding. Naast de gebruikelijke tekstkleur, achtergrondkleur, tekengrootte en tekenstijl biedt dit paneel een selector voor Badgevorm met veel voorinstellingen:

• Standaard, Gevouwen, Pilvorm
• Pijl rechts, Pijl links
• Vierkant
• Banner, Afgeronde banner
• Hoeklint, Zijlint, Alternatief zijlint, Afgerond zijlint

Prijs

Het paneel Prijs bevat drie tekststijlen, elk met een eigen kleur, tekengrootte en tekenstijl:

• Hoofdprijs: de actieve verkoopprijs.
• Vergelijkingsprijs: de doorgestreepte prijs van vóór de korting.
• Tekst per artikel: de tekst met de prijs per eenheid.

Bundel

Productbundels hebben ook een paneel Bundel voor de tekst van producttitels, de rand tussen bundelitems en het plusteken tussen producten.

Voordelen

Stelt de lijst met voordelen in. Hier stel je een gedeelde tekengrootte en tekenstijl in, plus een afzonderlijke Tekstkleur en Pictogramkleur, zodat de pictogrammen en tekst van elkaar kunnen verschillen.

Cadeau en upsell

Stelt het blok voor gratis cadeaus in twee statussen in, elk met een achtergrondkleur, titel kleur, tekengrootte en tekenstijl:

• Cadeau bij geselecteerde aanbieding: het cadeaublok bij de gekozen aanbieding.
• Cadeau bij niet-geselecteerde aanbieding: het cadeaublok bij andere aanbiedingen.

Een derde groep, Cadeauafbeelding, bepaalt de breedte en hoekradius van de cadeauafbeelding.

Afbeeldingen van cadeau- en mix-&-matchpop-ups

Open Stijl > Modale stijl > Cadeaumodaal en zoek Afbeelding passend maken. Je kunt deze instellingen ook openen via Modale stijl aanpassen naast een cadeau- of mix-&-matchselector. Kies Origineel om de volledige verhoudingen van de foto te behouden of Vierkant voor uniforme miniaturen. De instelling wordt gedeeld door pop-ups voor cadeaukeuze en bundelverzamelingen binnen deze korting; de afbeeldingen in de hoofdwidget gebruiken de afzonderlijke instellingen voor de aanbiedingsafbeelding.

Voettekst

Stelt de kleur, tekengrootte en tekenstijl in van de voettekst van de widget.

Container en maximale breedte

Het paneel Container bepaalt de totale breedte van de widget via de instelling Maximale breedte:

• Shopify-standaard (44rem): beperkt de widget tot 44rem binnen de beschikbare ruimte.
• Volledige breedte (100%): laat de widget uitrekken tot de breedte van de container.
• Aangepast: toont een veld Breedte waarin je een pixelwaarde invoert.

Dit paneel bevat ook een Waarschuwingskleur voor de tekst van de waarschuwing voor een lage voorraad.

Gebruik hier Bovenmarge en Ondermarge om de ruimte rond de widget van deze korting aan te passen voordat je aangepaste CSS toevoegt.

Volledige breedte vult de bovenliggende container van de widget. Hiermee kun je een smalle kolom met productinformatie in je thema niet breder maken.

Tips voor bewerken

• Bekijk tijdens het werken het livevoorbeeld. Wanneer je de muis over een paneelkop beweegt, wordt het bijbehorende element gemarkeerd. Zo kun je controleren of je het juiste onderdeel bewerkt voordat je een waarde wijzigt.
• Stel de drie statussen van de aanbiedingskaart (niet geselecteerd, hover, geselecteerd) samen in, zodat de geselecteerde status duidelijk opvalt ten opzichte van de rest.
• Als je stijlen nodig hebt die niet in de panelen beschikbaar zijn, kun je via het paneel Aangepaste CSS onderaan de sectie CSS toevoegen om widgetstijlen te overschrijven.