Een banner met oneindig scrollen maken
Bouw een banner met oneindig scrollen waarvan de inhoud naadloos herhaalt, voor aankondigingen en promoties in tickerstijl.
Een banner met oneindig scrollen is een balk waarvan de inhoud continu van rechts naar links loopt, zoals een nieuwsticker. Gebruik hem voor terugkerende promoties, meldingen over gratis verzending of korte aankondigingen die klanten moeten opvallen.
-
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 Infinite Scroll
Section titled “Klik op Create banners en kies Infinite Scroll”Klik op Create banners. Klik in het dialoogvenster Select Type op Select naast Infinite Scroll — het type dat de bannerinhoud oneindig laat herhalen voor een naadloos scrolleffect.
Kies Infinite Scroll om een balk in tickerstijl 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 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 scrollende inhoud bewerken
Section titled “De scrollende inhoud bewerken”Section 1 begint met één element Description met voorbeeldtekst zoals
✨ Free ship on order $40+ ✨. Klik erop om rechts de instellingen te openen:- Content — een teksteditor met vet, cursief, onderstrepen, emoji, uitlijning en een HTML-weergave (
</>). De taalchip toont in welke taal je bewerkt. - Text — lettergrootte (Size) en tekstkleur (Color).
- Padding en Margin — ruimte rond het element, in pixels.
Klik op Add element om meer items aan de lus toe te voegen — Message, Heading, Line break, Button, Countdown of Image — en sleep de greep links van een rij om de volgorde te wijzigen.
Bewerk het element dat over de balk loopt of voeg meer elementen toe aan de reeks.
- Content — een teksteditor met vet, cursief, onderstrepen, emoji, uitlijning en een HTML-weergave (
-
De balk opmaken
Section titled “De balk opmaken”In het paneel Style:
- Background Type — kies Single Color, Gradient Color of Pattern Image. Banners met oneindig scrollen hebben standaard Pattern Image; gebruik Change Image om de tegel te vervangen of Remove om hem te wissen.
- Font Style — stel het lettertype, de dikte en de standaardtekstkleur in.
- Padding — bepaal de ruimte binnen de balk.
-
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 scrollsnelheid en timing instellen
Section titled “De scrollsnelheid en timing instellen”Alle vier de velden in het paneel Animation zijn in seconden:
Veld Wat het bepaalt Scroll speed Hoe lang één volledige lus duurt. Een hoger getal scrolt langzamer. 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. 
Scroll speed bepaalt de duur van één lus: verhoog de waarde om de ticker te vertragen.
-
(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, waaronder
.samita_banner_groups.infinityScroll, de wrapper die wordt gebruikt als oneindig scrollen is ingeschakeld. 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 — bepaal waar en voor wie je banner verschijnt.
- Create a basic banner — bouw in plaats daarvan een statische of wisselende aankondigingsbalk.