Documentació de l’aplicació Shopify
Tot el que necessites per configurar i personalitzar la conversió de divises a la teva botiga Shopify
Taula de continguts
1 Instal·lació
Instal·la des de la Shopify App Store
- Visita la pàgina de Currency.Wiki a la Shopify App Store
- Fes clic a 'Afegeix aplicació' i autoritza la instal·lació
- L’aplicació s’obrirà i et guiarà amb l’assistent de configuració
- Completa l’assistent per començar a convertir preus
Consell: L’assistent de configuració dura uns 2 minuts i et guia pas a pas.
2 Assistent de configuració
L’assistent de configuració t’ajuda a configurar l’aplicació correctament. Et guia per actualitzar el format de divisa i activar l’App Embed.
Pas 1: Benvinguda
Revisa què implica el procés i fes clic a 'Comencem'.
Pas 2: Actualitza el format de divisa
Ves a Shopify Admin → Configuració → General → Valors per defecte de la botiga. Troba la teva divisa i fes clic al menú de tres punts → 'Canvia el format de divisa'. Actualitza els camps HTML amb la nostra classe:
HTML amb divisa:
<span class="cwiki">${{amount}} USD</span>
HTML sense divisa:
<span class="cwiki">${{amount}}</span>
Important: La classe cwiki és essencial. Indica a l’aplicació quins elements són preus, així només convertim preus reals i no telèfons o IDs.
Pas 3: Activa l’App Embed
Activa l’aplicació a la secció d’App Embeds del teu tema:
- Ves a Botiga en línia → Temes → Personalitza
- Busca 'App embeds' a la barra lateral esquerra
- Troba 'Currency.Wiki App' i activa-la
- Fes clic a Desa a l’editor de temes
Pas 4: Verifica la configuració
Fes clic a 'Escaneja la meva botiga' per verificar que tot està correcte. L’assistent comprovarà la classe cwiki i l’App Embed. Si tot va bé, ja pots començar!
3 Estils del widget
Tria entre 6 estils de widget per adaptar-los al disseny de la teva botiga. Cada estil es pot personalitzar amb els colors de la teva marca.
Desplegable minimalista
Integració compacta a la capçalera amb una llista desplegable simple. Ideal per a la part superior dreta.
Botó flotant
Botó flotant apte per a mòbils amb panell expandible. Ideal per a botigues mòbils. Es posiciona a les cantonades.
Menú lateral
Panell lateral de tota l’alçada amb funció de cerca. Ideal per a botigues amb moltes divises.
Finestra emergent
Superposició centrada amb graella. Fa que la selecció de divisa sigui una experiència destacada.
Canviador en pestanyes
Pestanyes horitzontals per a divises populars. Canvi ràpid sense menús.
Insígnia de cantonada
Icona minimalista a la cantonada que s’expandeix en fer clic. Poc intrusiu per a dissenys nets.
Consell: Utilitza la pàgina de configuració del widget a l’administració per previsualitzar tots els estils amb els colors de la teva botiga.
4 Panell d’administració
El panell d’administració et dona control total sobre la conversió de divises a la teva botiga.
Inici del panell
Activa o desactiva el widget, consulta estadístiques de conversió i veu una previsualització en directe.
Configuració del widget
Tria l’estil, posició, colors, mida, radi de cantonada i opcions de banderes.
Gestió de divises
Activa/desactiva divises, reordena la llista, configura la detecció automàtica i estableix preferències de tipus de canvi.
Analítica
Consulta gràfics de conversió, divises més utilitzades i distribució internacional de clients.
Tema i aparença
Tria mode de tema (auto, clar, fosc, personalitzat), estableix colors, activa efectes de glassmorphism i configura el comportament del mode fosc.
Missatge a la compra
Activa un missatge a la cistella/compra per informar sobre la divisa de pagament.
5 Configuració avançada
La configuració avançada dona als usuaris Pro més control sobre el format i el comportament de conversió de preus.
Format de preus (Pro)
- Decimals - Controla quants decimals mostrar (0-6).
- Format numèric - Tria l’estil de format (Auto, US, EU, Indi, Espai•Punt, Espai•Coma).
- Posició del símbol - Posa el símbol de la divisa abans o després de la quantitat, o auto segons la divisa.
- Arrodoniment - Estàndard, sempre amunt, sempre avall o sense arrodonir. Opció d’arrodonir a .99.
Integració amb el tema (Pro)
Insereix manualment el widget o l’avís de cistella a qualsevol lloc del tema amb aquests fragments HTML:
Inserció del widget (afegeix a header.liquid o qualsevol secció):
<div class="cwiki-widget"></div>
Inserció d’avís de cistella (afegeix a cart.liquid):
<div class="cwiki-banner"></div>
Opcions per a desenvolupadors (Pro)
- Sobreescriptura d’estils - Afegeix CSS personalitzat per ajustar l’estil del widget.
- Listeners de clic - Reconverteix preus quan es fa clic a elements específics (ex: talles, opcions de producte).
- Elements de preu addicionals - Apunta a elements de preu addicionals més enllà de la classe .cwiki.
- Patrons d’URL - Torna a escanejar preus quan l’URL contingui cadenes específiques (per a AJAX, scroll infinit).
- Retard de conversió - Espera abans de convertir preus (per a contingut que es carrega després de la pàgina).
Atenció: Aquestes opcions són per a usuaris avançats. Prova-les en un tema de previsualització abans de publicar.
6 Resolució de problemes
Els preus no es converteixen?
Assegura’t que la classe cwiki està als ajustos de format de divisa. Ves a Configuració → General → Valors per defecte i comprova el format HTML. També verifica que l’App Embed està activat al personalitzador de temes.
El widget no es mostra?
Comprova que l’App Embed està activat a la secció d’App Embeds del teu tema. Obre el personalitzador, busca App Embeds i assegura’t que Currency.Wiki està activat. Desa i actualitza la botiga.
Els preus parpellegen en carregar?
La nostra aplicació està dissenyada per evitar parpelleig. Si ho veus, comprova si tens connectors de caché que interfereixen. Assegura’t també que l’App Embed es carrega a la capçalera del tema.
Es detecta la divisa incorrecta?
La detecció geogràfica es basa en la IP del visitant. VPNs o xarxes corporatives poden afectar-la. Els visitants sempre poden seleccionar manualment la seva divisa preferida. També pots establir una divisa per defecte als ajustos.
El widget no s’adapta al meu tema?
Utilitza els ajustos de Tema i Aparença per personalitzar colors, o activa el mode Auto per detectar-los automàticament. També pots utilitzar CSS personalitzat a Configuració Avançada.
Necessites ajuda?
El nostre equip d’assistència està preparat per ajudar-te amb qualsevol dubte de configuració.
