Een aangepaste knop toevoegen aan Shopify

Als je verkoopt op Shopify, is het ontwerp van je CTA-knop van cruciaal belang. Of het nu naar een promotiepagina, een aanmelding voor een VIP-nieuwsbrief of een affiliate-link leidt, een knop die de aandacht trekt wordt vaker aangeklikt dan een knop die wegvalt in de pagina — en op een webwinkel betekenen meer klikken meer verkoop.

Shopify OS 2.0-thema’s, waaronder Dawn, hebben native knopblokken, maar ze geven je weinig controle over hoe die knoppen eruitzien. Met het blok kun je het label, de link en of de stijl effen of omlijnd is instellen, terwijl de kleuren afkomstig zijn van je globale thema-instellingen. Dat houdt je winkel consistent (wat het doel is van thema-instellingen), maar het betekent ook dat een knop die moet opvallen er precies zo uitziet als elke andere knop op je site.

Een losstaande knop met zijn eigen kleuren, hover-effect of pictogram krijgen vereist een van twee aanpakken. Je kunt een Custom Liquid-blok toevoegen in je thema-editor en de HTML en CSS zelf schrijven, of je kunt een gratis gehoste widget gebruiken die de styling afhandelt en je een embedcode geeft om te plakken.

Als je een conversiegeoptimaliseerde, aangepaste CTA-knop op je Shopify-winkel wilt zonder themacode te bewerken of een ontwikkelaar te betalen, behandelt deze gids hoe je een knop toevoegt in Shopify met beide methoden.

Watch on youtube

How to Add a Custom Button to Shopify

Optie 1: Gebruik Custom Liquid en CSS

De standaardmanier om een uniek knopontwerp in een Shopify-winkel te krijgen zonder een app van derden te installeren, is door de code zelf te schrijven. De thema-editor van Shopify bevat een Custom Liquid-sectie waar je je eigen HTML en CSS kunt toevoegen, zodat je een knop kunt definiëren en precies zo kunt stylen als je wilt zonder de bestanden van je thema rechtstreeks te bewerken.

Zo voeg je een knop toe in Shopify met Custom Liquid en CSS:

1. Ga vanuit je Shopify-beheerpaneel naar Online Store in het menu aan de linkerkant. Klik vervolgens op het potlood-pictogram naast Online Store of klik op Thema bewerken op het scherm.

2. Klik in de linker zijbalk op Sectie toevoegen, zoek naar Custom Liquid en selecteer het. Rechts verschijnt een tekstveld waar je code komt.

3. Voeg de HTML voor je knop toe samen met een <style>-blok met je CSS, en klik vervolgens op Opslaan in de rechterbovenhoek. Je wijzigingen verschijnen in de voorvertoning terwijl je werkt.

Een woord van waarschuwing bij het gebruik van deze methode: de styling zelf schrijven betekent dat je het risico loopt fouten te maken. Regels die zonder scoped selectors worden geschreven, kunnen andere elementen op de pagina beïnvloeden, en Custom Liquid die aan je header of footer wordt toegevoegd, verschijnt op elke pagina van je winkel — dus een kleine fout kan een grotere impact hebben dan alleen de knop die je aan het stylen was. Shopify raadt ook aan om je thema als back-up te dupliceren voordat je code bewerkt, wat weerspiegelt hoe het platform het risico beschouwt.

Het inhuren van een ontwikkelaar lost misschien het technische probleem op, maar voegt een kostenpost toe die moeilijker te rechtvaardigen is voor een enkele knop, vooral wanneer je een paar versies wilt testen en elke wijziging weer een nieuwe aanvraag betekent.

Optie 2: Voeg een gratis, aanpasbare knopwidget toe (aanbevolen)

Wil je de ontwerpcontrole zonder het risico? Een gehoste gratis knopwidget is een Custom Liquid-alternatief in Shopify met zijn eigen kleuren, hover-status en pictogram. Je kunt de knop aanpassen in een visuele bouwer, de embedcode kopiëren en deze in een Custom Liquid-blok in je thema-editor plakken.

De knopwidget van Jotform biedt de stylingopties die het native blok van Shopify weglaat. Je stelt de achtergrond-, tekst- en hover-kleuren onafhankelijk in, voegt een pictogram voor of na het label toe en past de hoekstraal, hoogte, opvulling en slagschaduw aan.

Zo voeg je een knop toe in Shopify met de knopwidget van Jotform: 

1. Klik op je Jotform Workspace-pagina op Aanmaken, selecteer Website Widget, zoek naar “Button” en klik vervolgens op Widget gebruiken.

2. Kies onder het tabblad Algemeen je knopactie, voer de gevraagde informatie in (e-mail, telefoonnummer, URL-link, enz.) en schrijf je knoplabel. Voeg een tweede regel of omringende tekst toe als je aanbieding context nodig heeft.

3. Stel onder het tabblad Stijlen je kleuren in, schakel een pictogram in en kies de positie ervan, en pas vervolgens de vorm en grootte aan. Het tabblad Lay-out bepaalt of de knop inline of zwevend is, en of deze op desktop, mobiel of beide verschijnt.

4. Klik op Publiceren in de bovenste navigatiebalk en klik vervolgens op Code kopiëren in de sectie Insluiten in het linkermenu.

Je kunt ook op Platforms klikken en Shopify selecteren voor platformspecifieke insluitinstructies.

5. Om je aangepaste knop in Shopify in te sluiten, open je je thema-editor, selecteer je je paginasjabloon, klik je op Sectie toevoegen of Blok toevoegen, kies je Custom Liquid, plak je je embedcode en klik je op Opslaan in de rechterbovenhoek. 

Met deze optie blijven je wijzigingen gescheiden van je globale thema-instellingen, omdat je de knop in Jotform style in plaats van rechtstreeks in je websitethema. Het testen van een andere kleur of label betekent dat je de widget bewerkt in plaats van opnieuw themacode te bewerken. Voor de volledige installatie, zie hoe je een knop aan een website toevoegt.

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

Een knop is een van de vele functies die je aan je site kunt toevoegen zonder een ontwikkelaar in te huren of te betalen voor nog een maandelijkse app. Voor een Shopify call-to-action-alternatief heeft de directory met gratis websitewidgets van Jotform meer dan 150 opties, waaronder verschillende die zich richten op dezelfde hiaten in de winkelpui als de knop.

Een Aankondigingsbalk-widget plaatst bijvoorbeeld je drempel voor gratis verzending of uitverkoopdata bovenaan elke pagina, waar shoppers het zien voordat ze afrekenen. Een Koopknop-widget stuurt shoppers rechtstreeks naar een product-, winkelwagen- of afreken-URL met een aankoop-CTA, wat geschikt is voor een campagnelandingspagina of een upsell na aankoop. En de e-commercecategorie heeft productkaarten en prijstabellen. Er is ook een Jotform-Shopify-integratie waarmee je klantinformatie naast je winkel kunt verzamelen. 

Elke widget wordt op dezelfde manier ingesloten als de knop, dus je betaalt niet voor nog een app-abonnement elke keer dat je een eenvoudige functie wilt toevoegen.

Als e-commercemerk zou je tijd en budget moeten worden besteed aan zaken als het inkopen van producten en het verbeteren van je advertentietrechters, niet aan het schrijven van Custom Liquid zodat één knop er anders uitziet dan de rest. De knopwidget van Jotform geeft je een CTA die je in een minuut opnieuw kunt stylen zonder je thema aan te raken. Probeer het vandaag nog gratis uit.