Shopify App Documentatie
Alles wat je nodig hebt om valutaomrekening in je Shopify-winkel in te stellen en aan te passen
Inhoudsopgave
1 Installatie
Installeren vanuit Shopify App Store
- Bezoek de Currency.Wiki-apppagina in de Shopify App Store
- Klik op 'App toevoegen' en autoriseer de installatie
- De app wordt geopend en begeleidt je door de installatiewizard
- Voltooi de wizard om direct prijzen om te rekenen
Tip: De installatiewizard duurt ongeveer 2 minuten en begeleidt je stap voor stap.
2 Installatiewizard
De installatiewizard helpt je de app correct te configureren. Je wordt begeleid bij het bijwerken van je valutaformaat en het inschakelen van de app-insluiting.
Stap 1: Welkom
Bekijk wat het installatieproces inhoudt en klik op 'Aan de slag'.
Stap 2: Werk valutaformaat bij
Ga naar Shopify Admin → Instellingen → Algemeen → Winkelstandaarden. Zoek je valuta en klik op het menu met drie stippen → 'Valutaopmaak wijzigen'. Werk de HTML-velden bij met onze wrapperklasse:
HTML met valuta:
<span class="cwiki">${{amount}} USD</span>
HTML zonder valuta:
<span class="cwiki">${{amount}}</span>
Belangrijk: De cwiki-wrapperklasse is essentieel. Hiermee weet onze app welke elementen op je pagina prijzen zijn, zodat alleen echte prijzen worden omgerekend en geen telefoonnummers of order-ID's.
Stap 3: App-insluiting inschakelen
Schakel de app in via de app-insluitingen van je thema:
- Ga naar Online winkel → Thema's → Aanpassen
- Zoek 'App-insluitingen' in de linkerzijbalk
- Zoek 'Currency.Wiki App' en zet deze AAN
- Klik op Opslaan in de thema-editor
Stap 4: Controleer installatie
Klik op 'Scan mijn winkel' om te controleren of de installatie compleet is. De wizard controleert op de cwiki-wrapperklasse en app-insluiting. Als alles goed is, ben je klaar!
3 Widgetstijlen
Kies uit 6 widgetstijlen die passen bij het ontwerp van je winkel. Elke stijl kan worden aangepast met je merkkleuren.
Minimale dropdown
Compacte header-integratie met een eenvoudige dropdownlijst. Ideaal voor plaatsing rechtsboven.
Zwevende badge
Mobielvriendelijke zwevende knop met uitklapbaar paneel. Ideaal voor mobile-first winkels. Plaatsbaar in hoeken.
Zijbalkpaneel
Uitschuifbaar paneel over de volledige hoogte met zoekfunctie. Ideaal voor winkels met veel valuta's.
Modale popup
Gecentreerde overlay met rasterindeling. Maakt valutaselectie een gerichte ervaring.
Inline tabwisselaar
Horizontale tabs voor populaire valuta's. Snel wisselen zonder menu's te openen.
Hoekbadge
Minimalistisch hoekicoon dat uitklapt bij klikken. Minst opvallend voor strakke ontwerpen.
Tip: Gebruik de Widget-instellingenpagina in je appbeheer om alle stijlen te bekijken met de kleuren van je winkel.
4 Beheer-dashboard
Het beheer-dashboard geeft je volledige controle over hoe valutaomrekening werkt in je winkel.
Dashboard Home
Schakel de widget aan/uit, bekijk conversiestatistieken en zie een live voorbeeld van je widget.
Widgetinstellingen
Kies je widgetstijl, positie, kleuren, grootte, randradius en vlagweergave-opties.
Valutabeheer
Valuta's in- of uitschakelen, lijstvolgorde aanpassen, gedrag van automatische detectie instellen en voorkeuren voor wisselkoersen bepalen.
Analytics
Bekijk conversiegrafieken, zie welke valuta's het meest worden gebruikt en begrijp je internationale klantverdeling.
Thema & uiterlijk
Kies themamodus (auto, licht, donker, aangepast), stel kleuren in, activeer glassmorphism-effecten en configureer gedrag van donkere modus.
Afrekenmelding
Activeer een melding op winkelwagen/afrekenpagina's om klanten te informeren over de afrekenvaluta.
5 Geavanceerde instellingen
Geavanceerde instellingen geven Pro-gebruikers meer controle over prijsopmaak en conversiegedrag.
Prijsopmaak (Pro)
- Decimalen - Bepaal hoeveel decimalen worden weergegeven (0-6).
- Getalnotatie - Kies notatiestijl (Auto, VS, EU, Indiaas, Spatie•Punt, Spatie•Komma).
- Symboolpositie - Plaats het valutasymbool voor of na het bedrag, of automatisch per valuta.
- Afronding - Standaard, altijd omhoog, altijd omlaag of geen afronding. Optie om af te ronden op .99.
Thema-integratie (Pro)
Voeg de widget of winkelwagenmelding handmatig overal in je thema in met deze HTML-snippets:
Widget-insluiting (toevoegen aan header.liquid of een sectie):
<div class="cwiki-widget"></div>
Winkelwagenmelding (toevoegen aan cart.liquid):
<div class="cwiki-banner"></div>
Ontwikkelaarsopties (Pro)
- Stijloverrides - Voeg aangepaste CSS toe om de widgetstijl aan te passen.
- Klikluisteraars - Prijzen opnieuw omrekenen wanneer specifieke elementen worden aangeklikt (bijv. maatkeuze, productopties).
- Extra prijselementen - Richt je op extra prijselementen naast de standaard .cwiki-wrapper.
- URL-patronen - Opnieuw scannen op prijzen wanneer de URL bepaalde strings bevat (voor AJAX-inhoud, eindeloos scrollen).
- Conversievertraging - Wacht voor het omrekenen van prijzen (voor inhoud die na paginagereedheid laadt).
Let op: Deze opties zijn voor gevorderde gebruikers. Test op een preview-thema voordat je publiceert.
6 Probleemoplossing
Prijzen worden niet omgerekend?
Controleer of de cwiki-wrapperklasse in je valutaformaatinstellingen staat. Ga naar Instellingen → Algemeen → Winkelstandaarden en controleer de HTML-opmaak. Controleer ook of de app-insluiting is ingeschakeld in je thema-aanpasser.
Widget wordt niet weergegeven?
Controleer of de app-insluiting is ingeschakeld in de App Embeds van je thema. Open eventueel je thema-aanpasser, zoek App Embeds en zorg dat Currency.Wiki is ingeschakeld. Sla op en vernieuw je winkel.
Prijzen flikkeren bij laden?
Onze app is ontworpen voor flikkervrij laden. Zie je toch flikkering, controleer dan of je cache-plugins hebt die mogelijk storen. Zorg ook dat de app-insluiting in het head-gedeelte van je thema laadt.
Verkeerde valuta gedetecteerd?
Geo-detectie is gebaseerd op het IP-adres van de bezoeker. VPN's of bedrijfsnetwerken kunnen de detectie beïnvloeden. Bezoekers kunnen altijd handmatig hun voorkeurvaluta kiezen. Je kunt ook een standaard fallback-valuta instellen in de instellingen.
Widget past niet bij mijn thema?
Gebruik de instellingen voor Thema & uiterlijk om kleuren aan te passen, of schakel Automodus in om automatisch je themakleuren te detecteren. Je kunt ook aangepaste CSS gebruiken in Geavanceerde instellingen voor nauwkeurige styling.
Hulp nodig?
Ons supportteam staat klaar om te helpen met vragen over installatie of configuratie.
