Documentación de la App de Shopify
Todo lo que necesitas para configurar y personalizar la conversión de divisas en tu tienda Shopify
Tabla de Contenidos
1 Instalación
Instalar desde la Tienda de Apps de Shopify
- Visita la página de Currency.Wiki en la Tienda de Apps de Shopify
- Haz clic en 'Agregar app' y autoriza la instalación
- La app se abrirá y te guiará a través del asistente de configuración
- Completa el asistente para empezar a convertir precios
Consejo: El asistente de configuración toma unos 2 minutos y te guía paso a paso.
2 Asistente de Configuración
El asistente de configuración te ayuda a configurar la app correctamente. Te guía para actualizar el formato de divisa y habilitar la inserción de la app.
Paso 1: Bienvenida
Revisa en qué consiste el proceso de configuración y haz clic en 'Comenzar'.
Paso 2: Actualizar Formato de Divisa
Ve a Shopify Admin → Configuración → General → Valores predeterminados de la tienda. Busca tu divisa y haz clic en el menú de tres puntos → 'Cambiar formato de divisa'. Actualiza los campos HTML con nuestra clase wrapper:
HTML con divisa:
<span class="cwiki">${{amount}} USD</span>
HTML sin divisa:
<span class="cwiki">${{amount}}</span>
Importante: La clase cwiki wrapper es esencial. Indica a nuestra app qué elementos de tu página son precios, así solo convertimos precios reales y no números de teléfono o IDs de pedido.
Paso 3: Habilitar Inserción de la App
Activa la app en la sección de inserciones de apps de tu tema:
- Ve a Tienda Online → Temas → Personalizar
- Busca 'App embeds' en la barra lateral izquierda
- Encuentra 'Currency.Wiki App' y actívala
- Haz clic en Guardar en el editor de temas
Paso 4: Verificar Configuración
Haz clic en 'Escanear mi tienda' para verificar que la configuración esté completa. El asistente comprobará la clase cwiki wrapper y la inserción de la app. ¡Si todo está correcto, ya puedes empezar!
3 Estilos del Widget
Elige entre 6 estilos de widget para que coincidan con el diseño de tu tienda. Cada estilo puede personalizarse con los colores de tu marca.
Desplegable Minimalista
Integración compacta en el encabezado con una lista desplegable simple. Ideal para la esquina superior derecha.
Botón Flotante
Botón flotante amigable para móviles con panel expandible. Perfecto para tiendas móviles. Se posiciona en las esquinas.
Panel Lateral
Panel deslizante de altura completa con función de búsqueda. Ideal para tiendas con muchas divisas.
Ventana Modal
Superposición centrada con diseño en cuadrícula. Hace que la selección de divisa sea una experiencia enfocada.
Pestañas en Línea
Pestañas horizontales para divisas populares. Cambio rápido sin abrir menús.
Insignia en Esquina
Ícono minimalista en la esquina que se expande al hacer clic. Lo menos intrusivo para diseños limpios.
Consejo: Usa la página de configuración de widgets en la administración de la app para previsualizar todos los estilos con los colores de tu tienda.
4 Panel de Administración
El panel de administración te da control total sobre cómo funciona la conversión de divisas en tu tienda.
Inicio del Panel
Activa o desactiva el widget, consulta estadísticas de conversión y ve una vista previa en vivo de tu widget.
Configuración del Widget
Elige el estilo, posición, colores, tamaño, radio de borde y opciones de banderas para tu widget.
Gestión de Divisas
Activa/desactiva divisas, reordena la lista, configura el comportamiento de auto-detección y ajusta preferencias de tasas de cambio.
Analítica
Consulta gráficos de conversión, ve las divisas más usadas y comprende la distribución internacional de tus clientes.
Tema y Apariencia
Elige el modo de tema (auto, claro, oscuro, personalizado), ajusta colores, activa efectos de glassmorphism y configura el comportamiento del modo oscuro.
Mensaje en el Checkout
Activa un mensaje en las páginas de carrito/checkout para informar a los clientes sobre la divisa de pago.
5 Configuración Avanzada
La configuración avanzada da a los usuarios Pro más control sobre el formato de precios y el comportamiento de conversión.
Formato de Precios (Pro)
- Decimales - Controla cuántos decimales mostrar (0-6).
- Formato de Número - Elige el estilo de formato (Auto, US, EU, Indio, Espacio•Punto, Espacio•Coma).
- Posición del Símbolo - Coloca el símbolo de la divisa antes o después de la cantidad, o auto según la divisa.
- Redondeo - Estándar, siempre arriba, siempre abajo o sin redondeo. Opción para redondear al .99 más cercano.
Integración con el Tema (Pro)
Inserta manualmente el widget o el aviso de carrito en cualquier parte de tu tema usando estos fragmentos HTML:
Inserción del widget (añadir a header.liquid o cualquier sección):
<div class="cwiki-widget"></div>
Inserción de aviso en carrito (añadir a cart.liquid):
<div class="cwiki-banner"></div>
Opciones para Desarrolladores (Pro)
- Sobrescribir Estilos - Inyecta CSS personalizado para ajustar el estilo del widget.
- Escuchadores de Clic - Reconversión de precios cuando se hace clic en elementos específicos (ej. selectores de talla, opciones de producto).
- Elementos de Precio Extra - Apunta a elementos de precio adicionales más allá del wrapper .cwiki por defecto.
- Patrones de URL - Reescanea precios cuando la URL contiene cadenas específicas (para contenido AJAX, scroll infinito).
- Retraso en Conversión - Espera antes de convertir precios (para contenido que carga después de la página lista).
Atención: Estas opciones son para usuarios avanzados. Prueba en un tema de vista previa antes de publicar.
6 Solución de Problemas
¿Los precios no se convierten?
Asegúrate de que la clase cwiki wrapper esté en la configuración de formato de divisa. Ve a Configuración → General → Valores predeterminados de la tienda y revisa el formato HTML. También verifica que la inserción de la app esté habilitada en el personalizador de tu tema.
¿El widget no se muestra?
Verifica que la inserción de la app esté habilitada en la sección App Embeds de tu tema. Abre el personalizador de tu tema, busca App Embeds y asegúrate de que Currency.Wiki esté activado. Guarda y actualiza tu tienda.
¿Los precios parpadean al cargar?
Nuestra app está diseñada para cargar sin parpadeos. Si ves parpadeos, revisa si tienes plugins de caché que puedan interferir. También asegúrate de que la inserción de la app se cargue en la cabecera de tu tema.
¿Se detecta la divisa incorrecta?
La detección geográfica se basa en la IP del visitante. VPNs o redes corporativas pueden afectar la detección. Los visitantes siempre pueden seleccionar manualmente su divisa preferida. También puedes establecer una divisa predeterminada en la configuración.
¿El widget no coincide con mi tema?
Usa la configuración de Tema y Apariencia para personalizar colores, o activa el modo Auto para detectar automáticamente los colores de tu tema. También puedes usar CSS personalizado en Configuración Avanzada para un ajuste fino.
¿Necesitas ayuda?
Nuestro equipo de soporte está listo para ayudarte con cualquier pregunta sobre la configuración.
