De grootte van een badge wijzigen
Pas de grootte van tekst- en afbeeldingsbadges aan voor desktop, mobiel, productpagina's en overzichtspagina's.
Gebruik de sectie Size in de badge-editor om een badge overal te vergroten of verkleinen, of om voor elk apparaat en paginatype een andere grootte in te stellen.
De sectie Size openen
Section titled “De sectie Size openen”-
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 waarvan je de grootte wilt wijzigen en klik in de rij op Edit badge/label.
Om de grootte van een nieuwe badge in te stellen, klik je op Create badge en kies je Text badge of Image badge.
-
Vouw Size uit
Section titled “Vouw Size uit”Blijf in de badge-editor op het tabblad Design, scrol naar Size en vouw de sectie uit.
Open een badge, blijf op Design en vouw Size uit.
Eén grootte gebruiken op desktop en mobiel
Section titled “Eén grootte gebruiken op desktop en mobiel”Laat onder Responsive size de optie Use same size on desktop and mobile geselecteerd als de badge op elk apparaat en in elk ondersteund paginavoorbeeld dezelfde afmetingen moet hebben.
- Stel voor een tekstbadge Width en Height afzonderlijk in.
- Gebruik voor een afbeeldingsbadge met Lock aspect ratio ingeschakeld de schuifregelaar Size of het veld Width. De hoogte verandert automatisch mee, zodat de verhoudingen van de afbeelding behouden blijven.
Gebruik één set afmetingen voor desktop en mobiel.
Elk apparaat en paginatype aanpassen
Section titled “Elk apparaat en paginatype aanpassen”Selecteer Customize desktop and mobile separately als de badge in verschillende situaties andere afmetingen nodig heeft.
- Kies Desktop of Mobile.
- Kies Product page size of Listing pages size.
- Stel de afmetingen voor die combinatie in.
- Herhaal dit zo nodig voor de andere combinaties van apparaat en pagina.
| Selectie | Waar de grootte geldt |
|---|---|
| Desktop > Product page size | Productpagina’s op desktop |
| Desktop > Listing pages size | Overzichtspagina’s, inclusief collectiepagina’s, op desktop |
| Mobile > Product page size | Productpagina’s op mobiel |
| Mobile > Listing pages size | Overzichtspagina’s, inclusief collectiepagina’s, op mobiel |
Selecteer een apparaat en paginatype en stel de grootte voor die combinatie in.
Een eenheid voor de grootte kiezen
Section titled “Een eenheid voor de grootte kiezen”Elke afmeting kan een van deze eenheden gebruiken:
| Eenheid | Gebruik het wanneer |
|---|---|
| px | Je een exacte afmeting in pixels nodig hebt. |
| % | De badge moet meeschalen met het beschikbare gebied van de productafbeelding. Bekijk het resultaat op elk paginatype en apparaat. |
Bij een tekstbadge hebben Width en Height elk een eigen eenheidskeuze. Ze hoeven niet dezelfde eenheid te gebruiken.
De grootte van een tekstbadge aanpassen
Section titled “De grootte van een tekstbadge aanpassen”Tekstbadges hebben extra opties onder Width en Height:
- Auto-fit text to badge uit: stel Text size in als vaste lettergrootte in pixels.
- Auto-fit text to badge aan: de app past de grootte van de tekst automatisch aan zodat die in de achtergrond van de badge past, en Text size wordt een percentageregelaar.
- Letter spacing: vergroot of verklein de ruimte tussen tekens in pixels.
Schakel Auto-fit text to badge in om veranderende tekst binnen de achtergrond van de badge te houden.
De verhoudingen van een afbeeldingsbadge behouden of wijzigen
Section titled “De verhoudingen van een afbeeldingsbadge behouden of wijzigen”Bij afbeeldingsbadges is Lock aspect ratio standaard ingeschakeld.
- Laat het ingeschakeld om de afbeelding te schalen met één regelaar Size of Width terwijl de verhoudingen van het origineel behouden blijven.
- Zet het alleen uit als je Width en Height onafhankelijk van elkaar moet instellen. Als je ze wijzigt naar een andere verhouding, kan de afbeelding uitgerekt of samengedrukt worden.
Laat Lock aspect ratio ingeschakeld om een afbeeldingsbadge te schalen zonder vervorming.
Bekijken en opslaan
Section titled “Bekijken en opslaan”Gebruik de voorbeeldwerkbalk om te wisselen tussen Product page en Collection page en controleer daarna zowel Desktop view als Mobile view. Klik op Save als de badge in elk benodigd voorbeeld goed eruitziet.
Volgende stappen
Section titled “Volgende stappen”- Badgepositie wijzigen: plaats je badge op de juiste plek op productafbeeldingen of pagina-elementen.
- Badgestijl wijzigen: pas lettertypen, kleuren, randen en visuele effecten aan.