De stijl van een badge wijzigen
Pas lettertypen, kleuren, achtergronden, randen, doorzichtigheid en rotatie aan voor tekst- en afbeeldingsbadges.
Gebruik het tabblad Design om te wijzigen hoe een badge eruitziet. Tekstbadges hebben opties voor lettertype, kleur, achtergrond, rand, doorzichtigheid en rotatie. Afbeeldingsbadges hebben opties voor doorzichtigheid en rotatie van de geselecteerde afbeelding.
Een badge openen in de editor
Section titled “Een badge openen in de editor”-
Open Badges & Labels
Section titled “Open Badges & Labels”Open in Shopify-beheer Sami Product Labels > Badges & Labels.
-
Selecteer een badge
Section titled “Selecteer een badge”Zoek de badge die je wilt bijwerken en klik in de rij op Edit badge/label.
Om een nieuwe badge op te maken, klik je op Create badge en kies je Text badge of Image badge.
Klik op Edit badge/label bij de badge die je wilt aanpassen.
-
Blijf op het tabblad Design
Section titled “Blijf op het tabblad Design”De editor opent op Design. De beschikbare secties hangen af van of je een tekstbadge of een afbeeldingsbadge hebt geselecteerd.
Een tekstbadge aanpassen
Section titled “Een tekstbadge aanpassen”Een lettertype en tekstkleur kiezen
Section titled “Een lettertype en tekstkleur kiezen”Gebruik de opties onder Badge text om de tekst aan te passen:
- Font picker: kies een lettertype uit de ingebouwde lijst.
- Use Custom Font Style: schakel deze optie in om een lettertypefamilie in te voeren bij Font en kies daarna een beschikbare lettertypestijl of dikte, zoals Regular of Bold.
- Text color: open de kleurkiezer en kies een kleur die goed leesbaar blijft tegen de achtergrond van de badge.
Kies een ingebouwd lettertype of schakel Use Custom Font Style in en stel daarna de tekstkleur in.
Tekstgrootte en letterafstand stel je in bij Size. Zie De grootte van een badge wijzigen voor die opties.
Een achtergrond kiezen
Section titled “Een achtergrond kiezen”Vouw Style uit en selecteer een Fill type:
| Fill type | Gebruik het voor |
|---|---|
| Solid | Eén achtergrondkleur of een kleurvoorinstelling. |
| Shape | Een sjabloonvorm met een effen of verloopkleur. |
| Image | Een textuur, patroon of afbeelding als achtergrond van de tekstbadge. |
Vouw Style uit en selecteer het achtergrondtype voor de tekstbadge.
Een effen achtergrond gebruiken
Section titled “Een effen achtergrond gebruiken”Selecteer Solid en kies een Background color. Je kunt ook een van de voorinstellingen onder Choose template selecteren.
Een vorm of verloopachtergrond gebruiken
Section titled “Een vorm of verloopachtergrond gebruiken”Selecteer Shape en stel het volgende in:
- Choose from library: open de sjabloongalerij en filter ontwerpen op categorieën zoals Sales, Autotext, Stock, Free shipping, Pre-order en meer.
- Start color en End color: gebruik dezelfde kleur voor een vlakke weergave of twee verschillende kleuren voor een verloop.
- Gradient direction: kies Left to right, Top to bottom, Diagonal of Radial.
- Choose template: pas direct vanuit de editor een vormvoorinstelling toe.
Kies een vorm, stel de kleuren in en selecteer de richting van het verloop.
Een afbeeldingsachtergrond gebruiken
Section titled “Een afbeeldingsachtergrond gebruiken”Selecteer Image en klik op Select Image om een eigen achtergrond te kiezen. De editor accepteert PNG-, JPG- of SVG-bestanden tot 5 MB. Klik op Remove om de geselecteerde achtergrond te wissen.
Selecteer een afbeelding om als achtergrond van een tekstbadge te gebruiken.
Een rand toevoegen of de hoeken afronden
Section titled “Een rand toevoegen of de hoeken afronden”Vouw Border & corners uit. Beide opties kunnen onafhankelijk van elkaar worden ingeschakeld:
| Optie | Beschikbare opties |
|---|---|
| Add border | Stel Border width in van 0 tot 8 px, kies een Border color en selecteer Solid, Dotted of Dashed. |
| Round corners | Stel Corner radius in van 0 tot 100 px. |
Voeg een rand toe, rond de hoeken af of gebruik beide instellingen samen.
Een afbeeldingsbadge opmaken
Section titled “Een afbeeldingsbadge opmaken”Afbeeldingsbadges tonen niet de opties voor lettertype, achtergrond of Border & corners van de tekstbadge. Gebruik Content bovenaan het tabblad Design om de afbeelding van de badge te wijzigen en gebruik daarna Advanced settings om de doorzichtigheid of rotatie aan te passen.
Zie De grootte van een badge wijzigen en De positie van een badge wijzigen voor de afmetingen en plaatsing van afbeeldingen.
Doorzichtigheid of rotatie aanpassen
Section titled “Doorzichtigheid of rotatie aanpassen”Deze effecten zijn beschikbaar voor zowel tekstbadges als afbeeldingsbadges:
- Vouw Advanced settings uit.
- Schakel onder Effects de gewenste optie in.
- Pas de waarde aan terwijl je het live voorbeeld controleert.
| Effect | Bereik |
|---|---|
| Adjust opacity | 0% tot 100% |
| Rotate badge | 0° tot 360° |
Schakel Adjust opacity of Rotate badge in en stel daarna de waarde van het effect in.
Bekijken en opslaan
Section titled “Bekijken en opslaan”Gebruik de voorbeeldwerkbalk om de badge te controleren op Collection page en Product page en wissel daarna tussen Desktop view en Mobile view. Klik op Save als de badge in elk benodigd voorbeeld goed eruitziet.
Volgende stappen
Section titled “Volgende stappen”- De grootte van een badge wijzigen: pas de grootte van de badge aan en stel tekstgrootte of letterafstand in.
- De positie van een badge wijzigen: verplaats de badge en pas de marge of opvulling aan.
- Een animatie aan een badge toevoegen: pas een animatie-effect toe en stel de snelheid en het aantal herhalingen in.
- Eigen CSS gebruiken: stel de badge nauwkeurig af met eigen CSS.