Hoe voeg je een aangepaste banner toe aan een Shopify-website

Een opvallende promotiebanner is een van de krachtigste conversiemiddelen voor webwinkels. Het is het eerste wat een bezoeker ziet zodra hij je website opent, dus een duidelijke call-to-action (CTA) kan het aantal toevoegingen aan het winkelwagentje en je totale omzet sterk verhogen. Of je bezoekers nu naar een Black Friday-uitverkoop leidt, drempels voor gratis verzending aankondigt of leads verzamelt in ruil voor een kortingscode: een promotiebanner is daar een van de beste middelen voor.

Maar waarom zou je het bij een statische banner laten? Een aftelklok kan een gevoel van urgentie creëren, rich media geven de banner meer impact en een formulier voor het verzamelen van e-mailadressen levert direct leads op. Helaas maakt Shopify het niet makkelijk om dit allemaal toe te voegen. De OS 2.0-thema’s van Shopify bevatten standaard de secties ‘aankondigingsbalk’ en ‘afbeeldingsbanner’, maar die zijn beperkt tot platte tekst bovenaan de pagina en twee statische afbeeldingen, wat tekst en twee knoppen op de banner. 

Wil je een promobanner op Shopify plaatsen met een formulier voor het verzamelen van leads dat er op mobiel en desktop anders uitziet, of met een aftelklok of video? Dan kan dat niet zonder zelf Liquid en JavaScript te schrijven. Shopify Magic, de AI-bouwer van Shopify, kan een aangepaste Liquid-banner voor Shopify genereren, maar biedt hier geen ondersteuning bij. En als je de code die Shopify Magic heeft gemaakt niet begrijpt, kunnen de snelheid en toegankelijkheid van je winkel eronder lijden. 

Dan houden de meeste webwinkeliers twee opties over: een betaalde app van een externe partij installeren vanuit de Shopify App Store, of een gratis, lichtgewicht, serverloze widget gebruiken die de laadsnelheid van je pagina en de structuur van je thema beschermt. 

Laten we bekijken hoe je een banner toevoegt aan een Shopify-website.

Optie 1: Installeer een speciale Shopify App Store-integratie

Een Shopify-aankondigingsbalk toevoegen aan je winkel met een banner- of pop-upapp van een externe partij is effectief, maar heeft ook nadelen. Daarover straks meer.

Zo stel je het in: 

1. Ga naar de Shopify App Store en zoek naar een banner- of pop-upapp. Ik koos voor Essential Announcement Bar, maar je kunt elke app kiezen die je wilt. 

2. Klik op Installeren. 

3. Doorloop de onboarding of installatiehandleiding, zodat je de basis van de plug-in begrijpt. 

4. Configureer je banner of pop-up in de app. Je kunt de tekst, het ontwerp, de plaatsing en andere functies aanpassen. Klik als je klaar bent op Publiceren.

De aankondigingsbalk of pop-up verschijnt nu in je winkel. Tot zover gaat het goed. 

Elke app die je voor je Shopify-winkel installeert, voegt echter zijn eigen CSS en JavaScript toe aan je webwinkel. Dat kan van invloed zijn op je Core Web Vitals, je site trager maken, vertraging veroorzaken tijdens het afrekenproces en je SEO-ranking beïnvloeden. Eén app toevoegen is zelden een probleem, maar bij tientallen apps merk je het echt. Als je iets zonder app kunt oplossen, houd je meer ruimte over voor de apps die je echt nodig hebt. 

Bovendien kunnen apps van externe partijen in Shopify een betaald abonnement vereisen. Een gratis versie heeft meestal een beperkt aantal functies, werkt alleen voor de eerste 1.500 weergaven per maand, bevat een watermerk of is om een andere reden niet erg effectief. Wil je geavanceerde functies, of gewoon een nette banner zonder branding die veel verkeer tijdens de feestdagen aankan? Dan moet je meestal een maandelijks abonnement afsluiten. 

Wil je er zeker van zijn dat je banner doet wat je nodig hebt en zichtbaar is voor al je klanten, zonder een maandelijks bedrag te betalen? Dan is er een betere optie. 

Optie 2: Voeg een gratis, interactieve bannerwidget toe (aanbevolen)

Wil je een dynamische, goed converterende banner met rich media, coupons, formulieren en aftelklokken, zonder een maandelijks abonnement te betalen, je site te vertragen of je zorgen te maken over Core Web Vitals? Dan is het slimst om een betrouwbare gehoste embed te gebruiken, zoals de Jotform Banner Widget. Al het zware werk gebeurt buiten je Shopify-winkel, dus je krijgt een vlekkeloze, responsieve banner zonder de nadelen van een geïnstalleerde app van een externe partij. Het is de beste gratis bannerwidget voor Shopify. 

Zo stel je het in:

1. Ga naar de Jotform Banner Widget en log in op je Jotform-account. Heb je er nog geen? Dan kun je je gratis aanmelden.

2. Voeg een badge, kop en beschrijving toe aan je banner. Je kunt de hele banner klikbaar maken en functies toevoegen, zoals een CTA-knop, aftelklok, coupon en een formulier voor het verzamelen van e-mailadressen. 

3. Gebruik het tabblad Stijl om het uiterlijk van je banner aan te passen. Je kunt een eigen lettertype instellen, aangepaste CSS gebruiken en de Jotform-branding uitschakelen.

4. Gebruik het tabblad Lay-out om te bepalen hoe de onderdelen op je banner worden weergegeven. Je kunt ook instellen of de banner zichtbaar is op desktops, mobiele apparaten of beide. 

5. Ga naar het tabblad Instellingen, waar je je banner een titel kunt geven. Je kunt de banner ook in- of uitschakelen, wat handig is als je uitverkoopbanners voor de feestdagen van tevoren wilt maken. 

6. Ga naar Publiceren, en klik vervolgens op Code kopiëren om de embedcode voor je banner te pakken. 

7. Ga terug naar Shopify. Selecteer in de zijbalk Webshop en vervolgens Thema bewerken. 

8. Klik op Sectie toevoegen en vervolgens op Custom Liquid. 

9. Plak de embedcode in het vak Custom Liquid. Daarna kun je de aankondigingsbanner plaatsen waar je maar wilt en ook het uiterlijk ervan instellen. 

10. Klik als je klaar bent op Opslaan, en je banner staat live op je site. 

Het grootste voordeel van de Jotform Banner Widget is dat je ongeëvenaarde visuele controle over de banner krijgt, zonder dat je een betaald abonnement of programmeerkennis nodig hebt. Met de gebruiksvriendelijke editor kun je de achtergrondafbeelding van de banner aanpassen of zelfs een YouTube- of Vimeo-video insluiten. Je kunt ook CTA-knoppen, een aftelklok of een aanmeldformulier voor e-mail toevoegen, allemaal zonder kosten.

Om je aangepaste banner voor Shopify te installeren, kopieer je de embedcode en plak je die in Shopify. Omdat Jotform de banner buiten je eigen server host, botst deze niet met de globale sitestijlen van Shopify en heeft hij geen invloed op de laadsnelheid van je pagina’s. Je krijgt een krachtige banner waarmee je campagnes soepel blijven draaien. 

Geef je Shopify-winkel een boost met slimme, serverloze widgets

De gids met Jotform Website Widgets staat vol met handige gratis websitewidgets, waaronder de Jotform Banner Widget. Met Jotform-widgets kan je Instagram-feedwidget je product in gebruik laten zien, laten testimonials zien hoe populair het is, kunnen verkoopmeldingen elke verkoop in de schijnwerpers zetten en kan een maattabel mensen helpen het product te vinden dat goed past. Tal van andere gratis tools kunnen je conversies voor toevoegen aan winkelwagen maximaliseren, terwijl je winkel snel laadt en lichtgewicht blijft.

Doordat Jotform Website Widgets een deel van het gedoe bij verkopen op Shopify wegnemen, kun je je tijd en budget richten op het inkopen van geweldige producten, online marketing en het opbouwen van een succesvolle webwinkel. Je hoeft niet te betalen voor een eenvoudige banner op een productpagina. 

Wil je meer doen met Shopify? Bekijk dan de volledige Jotform + Shopify-integratie. Daarmee kun je formulieren aan je Shopify-winkel toevoegen, betalingen accepteren en nog veel meer.