Een basisbanner maken
Bouw een basisbanner met inhoudselementen, geef de balk een stijl, voeg een sluitknop of doorklinklink toe en kies waar de banner verschijnt.
Een basisbanner is een balk die je opbouwt uit content elements — koppen, berichten, knoppen, aftellers en afbeeldingen — gegroepeerd in een of meer secties. De editor heeft twee tabbladen: Design (inhoud en stijl) en Placement (waar en voor wie de balk verschijnt).
-
De pagina Banners openen
Section titled “De pagina Banners openen”Open in je Shopify-beheer de app Sami Product Labels, klik in de zijbalk van de app op Extra Features en ga dan naar het tabblad Banners.
Open Banners via de zijbalk van Sami Product Labels.
-
Klik op Create banners en kies Basic
Section titled “Klik op Create banners en kies Basic”Klik op Create banners. Klik in het dialoogvenster Select Type op Select naast Basic — het type dat een of meerdere inhoudsgroepen ondersteunt.
Kies Basic om een standaard aankondigingsbalk te bouwen.
-
De banner een naam geven
Section titled “De banner een naam geven”De editor opent op volledig scherm op het tabblad Design. Vervang New Banner in het naamveld boven de voorvertoning door een naam van maximaal 50 tekens. Deze naam is intern: hij identificeert de banner in je lijst en wordt nooit aan klanten getoond.
Naast de naam vind je ook een taalkiezer, schakelaars voor de voorvertoning op desktop en mobiel en de statusschakelaar Active / Draft.
De werkbalk boven de voorvertoning bevat de bannernaam, de taal, het apparaat voor de voorvertoning en de status.
-
De inhoud opbouwen
Section titled “De inhoud opbouwen”Onder Content toont Section 1 de elementen waaruit de balk bestaat. Klik op een element om de tekst en stijl te bewerken, sleep de greep links om de volgorde te wijzigen, of gebruik de pictogrammen rechts in een rij om het element te verbergen, te dupliceren of te verwijderen.
Klik op Add element om een nieuw element toe te voegen:
Element Wat het toevoegt Message Een regel bodytekst. Heading Een grote kop. Line break Verticale ruimte tussen elementen. Button Een call-to-action-knop met een eigen link. Countdown Een timer met dagen, uren, minuten en seconden. Image Een afbeelding of logo. 
Voeg de elementen van de balk toe, wijzig de volgorde en bewerk ze.
-
(Optioneel) Meer inhoudsgroepen toevoegen
Section titled “(Optioneel) Meer inhoudsgroepen toevoegen”Klik op Add Group om Section 2, Section 3 enzovoort te maken. Elke sectie is een apart bericht en de banner wisselt tussen de secties af. Je regelt de timing onder Animation in de volgende stappen.
Laat het bij één sectie als je maar één vast bericht wilt tonen.
-
De balk opmaken
Section titled “De balk opmaken”In het paneel Style:
- Background Type — kies Single Color, Gradient Color of Pattern Image en stel daarna de kleur of afbeelding in.
- Font Style — stel het lettertype, de grootte, de dikte en de tekstkleur in.
- Padding — bepaal de ruimte binnen de balk.
Stel de achtergrond, de lettertypen en de padding voor de hele balk in.
-
Een sluitknop toevoegen of de balk klikbaar maken
Section titled “Een sluitknop toevoegen of de balk klikbaar maken”Beide opties staan in het paneel Button en zijn standaard uitgeschakeld:
- Vink Include Close Button aan om een kruisje op de balk te plaatsen waarmee klanten de balk kunnen sluiten. Er verschijnen twee velden: Color en Hover Color.
- Vink Bar Clickable aan om de hele balk een link te maken. Er verschijnt een veld Link URL: voer de bestemming in en gebruik de schakelaar ernaast om de link in een nieuw tabblad te openen.
Als je elk selectievakje inschakelt, verschijnen de bijbehorende instellingen: de kleuren van de sluitknop of de link-URL.
-
De timing van de animatie instellen
Section titled “De timing van de animatie instellen”Kies in het paneel Animation een Horizontal- of Vertical-overgang en stel daarna de timing in seconden in:
Veld Wat het bepaalt Disappear After Hoe lang de balk in beeld blijft voordat hij verdwijnt. Interval Between Bar Display De pauze voordat de balk weer verschijnt. Time For The Bar To Fade In De duur van de fade-in-animatie. Time Per Group Hoe lang elke sectie zichtbaar is voordat de volgende volgt. -
(Optioneel) Aangepaste CSS toevoegen
Section titled “(Optioneel) Aangepaste CSS toevoegen”Open Advance Section om je eigen CSS te schrijven in het vak Custom CSS (Developer Zone). De lijst CSS reference eronder toont de beschikbare selectors. Klik op een selector om die in te voegen.
-
Kiezen waar de banner verschijnt
Section titled “Kiezen waar de banner verschijnt”Ga naar het tabblad Placement en kies een weergavepositie:
Positie Gedrag Top Duwt de pagina-inhoud naar beneden. Top Sticky Duwt de inhoud naar beneden en blijft zichtbaar tijdens het scrollen. Top Overlay Overlapt de bovenkant van de pagina-inhoud. Overlay Sticky Overlapt de inhoud en blijft zichtbaar tijdens het scrollen. Bottom Sticky Vast onderaan de pagina. Custom Plaats de balk waar je wilt met een shortcode. Onder de positiekiezer beperk je het publiek met Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions en Visibility date. Het paneel Shortcode geeft je het fragment dat je in je thema plakt als je Custom kiest.
Zie Configure display conditions voor een volledige uitleg van elk type voorwaarde.
Kies een weergavepositie en voeg daarna voorwaarden toe om te bepalen wie de banner ziet.
-
Opslaan en activeren
Section titled “Opslaan en activeren”Zet de statusschakelaar boven de voorvertoning op Active en klik rechtsboven op Save. Laat de status op Draft staan om verder te werken zonder te publiceren.
Volgende stappen
Section titled “Volgende stappen”- Configure display conditions — stel gedetailleerde targetingregels voor je banner in.
- Create an infinite scroll banner — probeer in plaats daarvan een scrollende balk in tickerstijl.