De positie van een badge wijzigen
Plaats een badge binnen of buiten de productafbeelding, gebruik vooraf ingestelde of aangepaste posities en stel de ruimte eromheen nauwkeurig af.
Gebruik de sectie Position om een tekst- of afbeeldingsbadge over de productafbeelding te plaatsen, onder een element op de productpagina of naast een eigen element van je thema.
De sectie Position openen
Section titled “De sectie Position openen”-
Open Badges & Labels
Section titled “Open Badges & Labels”Open in Shopify-beheer Sami Product Labels > Badges & Labels.
-
Maak een badge of selecteer er een
Section titled “Maak een badge of selecteer er een”Om een badge te maken, klik je op Create badge en kies je Text badge of Image badge.
Om een bestaande badge te bewerken, klik je in de rij van die badge op Edit badge/label.
-
Vouw Position uit
Section titled “Vouw Position uit”Blijf in de badge-editor op het tabblad Design, scrol naar Position en vouw de sectie uit.
Open het tabblad Design en vouw Position uit.
De badge in de productafbeelding plaatsen
Section titled “De badge in de productafbeelding plaatsen”Selecteer Inside product image als de badge over de productafbeelding moet staan.
Kies waar de instelling geldt
Section titled “Kies waar de instelling geldt”Gebruik Badge placement om een van deze modi te kiezen:
- Use the same position for collection page and product page: één positie geldt voor beide paginatypen.
- Set different position for collection page and product page: gebruik de tabbladen Listing pages en Product page om elke positie afzonderlijk in te stellen.
Pas overal één positie in de afbeelding toe of stel Listing pages en Product page afzonderlijk in.
Kies een vooraf ingestelde positie
Section titled “Kies een vooraf ingestelde positie”Selecteer onder Badge position een van de negen punten in het positieraster.
| Positie | Plaatsing op de afbeelding |
|---|---|
| Top left | Linkerbovenhoek |
| Top center | Midden van de bovenrand |
| Top right | Rechterbovenhoek |
| Center left | Midden van de linkerrand |
| Center | Midden van de afbeelding |
| Center right | Midden van de rechterrand |
| Bottom left | Linkeronderhoek |
| Bottom center | Midden van de onderrand |
| Bottom right | Rechteronderhoek |
Selecteer een van de negen vooraf ingestelde posities in de productafbeelding.
Een aangepaste positie instellen met een percentage
Section titled “Een aangepaste positie instellen met een percentage”Zet Use Custom Position aan als de negen vooraf ingestelde posities niet nauwkeurig genoeg zijn. De editor vervangt het raster door:
- Een verticaal ankerpunt: Top of Bottom.
- Een horizontaal ankerpunt: Left of Right.
- Een schuifregelaar met percentage voor de afstand tot elk geselecteerd ankerpunt.
Gebruik de knoppen voor het wijzigen van de positie om van ankerpunt te wisselen en pas daarna de schuifregelaars aan terwijl je het voorbeeld controleert.
Kies het verticale en het horizontale ankerpunt en stel daarna de percentages voor de afstand in.
De badge buiten de productafbeelding plaatsen
Section titled “De badge buiten de productafbeelding plaatsen”Selecteer Outside product image als de badge naast de productinformatie moet verschijnen in plaats van over de afbeelding.
Open Predefined position en kies een van deze opties:
| Optie | Plaatsing op de productpagina |
|---|---|
| Below the product image | Direct onder de productafbeelding |
| Below the product title | Direct onder de producttitel |
| Below the product price | Direct onder de productprijs |
| Below the product quantity | Direct onder het veld voor het aantal |
| Below the add to cart button | Direct onder de knop voor in de winkelwagen |
| Below the buy now button | Direct onder de knop voor nu kopen |
| Custom | Naast een element dat in je thema wordt aangeduid met een ID of klasse |
Kies onder Badge position links, midden of rechts uitgelijnd voor de badge.
Kies een element op de productpagina en lijn de badge daarna links, in het midden of rechts uit.
De badge plaatsen met een themaselector
Section titled “De badge plaatsen met een themaselector”Kies Custom bij Predefined position om een element uit je thema te targeten. Voer het relevante ID of de relevante klasse in bij elk veld dat je nodig hebt:
| Veld | Paginatype |
|---|---|
| Position in product page | Productpagina’s |
| Position in home page | Startpagina |
| Position in collection page | Collectiepagina’s |
| Position in other page | Andere paginatypen |
Voer bijvoorbeeld .product-form in voor een klasse of #ProductInfo voor een ID. Voeg een waarde toe voor elk paginatype waarvoor de badge deze aangepaste plaatsing nodig heeft.
Voer het ID of de klasse van het thema in voor elk paginatype dat een aangepaste badgepositie nodig heeft.
Marge en opvulling aanpassen
Section titled “Marge en opvulling aanpassen”Vouw Margin uit om de buitenruimte in pixels te wijzigen. De editor toont de zijden die bij de geselecteerde positie horen.
Vouw Padding uit om de ruimte tussen de inhoud van de badge en de randen te wijzigen. Je kunt de waarden voor boven, onder, links en rechts onafhankelijk van elkaar instellen.
Stel de badge nauwkeurig af met marge- en opvulwaarden in pixels.
Bekijken en opslaan
Section titled “Bekijken en opslaan”Gebruik de voorbeeldopties om Collection page en Product page te controleren en wissel daarna tussen Desktop view en Mobile view. Klik op Save als de badge op de bedoelde plek staat.
Volgende stappen
Section titled “Volgende stappen”- Badgegrootte wijzigen: pas de grootte van de badge aan voor verschillende schermformaten en paginatypen.
- Badgestijl wijzigen: pas lettertypen, kleuren, randen en achtergronden aan.
- Weergave per apparaat en pagina: bepaal op welke apparaten en pagina’s de badge wordt getoond.