Faq

aliases:

• /platform-guides/shopify/setup/using-currency-conversion-on-shopify/
• /platform-guides/shopify/troubleshooting/handling-require.js-in-shopify-only-for-clerk-js1-users/
• /platform-guides/shopify/setup/working-with-multiple-currencies-in-your-shopify-store/
• /platform-guides/shopify/setup/installing-sliders-on-the-frontpage-with-sections-in-shopify/
• /platform-guides/shopify/troubleshooting/finding-shopify-theme-files/
• /platform-guides/shopify/getting-started/full-installation-of-clerk.io-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-import-data-when-using-http-authentication-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-fix-common-shopify-errors-when-importing-data-to-clerk.io/
• /platform-guides/shopify/setup/upgrading-to-clerk.js-2-on-shopify/
• /platform-guides/shopify/troubleshooting
• /upgrading-to-clerk.js-2-on-shopify
• /installing-sliders-on-the-frontpage-with-sections-in-shopify
• /full-installation-of-clerk.io-on-shopify
• /how-to-import-data-when-using-http-authentication-on-shopify
• /getting-started
• /handling-require.js-in-shopify-only-for-clerk-js1-users
• /using-currency-conversion-on-shopify title: Preguntas frecuentes description: “Soluciones a preguntas e incidencias comunes al usar Clerk con Shopify” weight: 7

¿Tienes problemas con tu integración de Shopify? Estas preguntas frecuentes cubren los problemas más comunes y sus soluciones, desde la conversión de moneda hasta la ubicación de los archivos de tema.

Tamaños de imagen #

Las URLs de imágenes de Shopify pueden incluir dimensiones fijas desde la sincronización, por ejemplo _600x600.

Si tu diseño necesita un tamaño de salida diferente por ubicación, puedes eliminar el tamaño fijo sincronizado y solicitar un nuevo ancho en la URL.

Ejemplo (reemplaza 600x600 con tu tamaño de imagen predeterminado configurado):

{{ product.image
  | replace '_600x600.' '.'
  | replace '?v=' '?width=350&v=' }}

Esto es útil cuando un diseño utiliza varios formatos de imagen (por ejemplo, tarjetas de productos y placements de héroe grandes) y deseas evitar sincronizar múltiples atributos de imagen.

Conversión de moneda #

La conversión de moneda integrada de Shopify facilita la lectura del símbolo de moneda y la tasa de cambio en la tienda online.

Por defecto, Clerk.js para Shopify viene con un formateador que funciona siempre que tu aplicación de terceros utiliza el objeto de moneda incorporado de Shopify.

Solución estándar #

Debes usar un formateador en tus Diseños para convertir los precios.

Este ejemplo usa nuestro lenguaje de plantillas estándar aquí.

Al usar conversiones de moneda y símbolos, Clerk.js detecta configuraciones como idioma, moneda y código de país.

Los siguientes ejemplos muestran cómo funcionan los distintos componentes.

Editor de diseños #

1. Crea un componente de Texto donde desees que se muestre el precio.
2. Agrega el siguiente código Liquid para mostrar el precio según el conversor de moneda dentro del componente de texto:

{{ currency_symbol }}{{ item.price | currency_converter }}

Modo código #

1. En my.clerk.io, ve a Search/Recommendations > Designs y haz clic en Editar diseño para tu diseño.
2. Reemplaza el formateador existente money o money_eu para precios por currency_converter.
3. Haz clic en Actualizar diseño.
4. Ahora podrás ver los precios convertidos y el símbolo de moneda en tu diseño.

Solución API personalizada #

Aviso: Esta es una solución muy personalizada para obtener conversiones de precios si no hay datos del API de Shopify. Úsala solo si tienes una configuración específica y personalizada de conversiones basada en cambios por geo-IP.

Esta es la documentación de la solución frontend en Github.

Esta sección cubre cómo obtener datos contextuales en tiempo real para mostrar dentro del contenido devuelto por la API de Clerk.

El patrón de diseño se compone de las siguientes partes:

• Una colección que contiene todos los productos.
• Un layout alternativo para renderizar la información de la colección como JSON.
• Una clase JavaScript que recolecta los datos disponibles en la colección.
• Un snippet JavaScript que consume los datos para los IDs de productos relevantes en un resultado dado y los coloca dentro de un div en la plantilla.

Crear colección #

Para asegurarte de tener una colección con todos los productos posibles, crea una que cumpla una condición que todos los productos cumplan.

La colección debe llamarse Clerk api, ya que eso hará que reciba la ruta /collection/clerk-api en el frontend.

La condición de la colección debe ser algo similar a price > -1000000.

Crear layout alternativo #

Crea un layout alternativo para mostrar tus datos usando la colección.

Para hacerlo, primero edita el código del tema que deseas usar.

En la sección de plantillas a la izquierda, pulsa Agregar nueva plantilla.

En el popup, elige collection como tipo de recurso.

Elige liquid como tipo de archivo.

Escribe json en el campo inferior, de modo que el nombre de la plantilla creada sea collection.json.liquid.

El contenido de este archivo debe ser el archivo collection.json.liquid que se encuentra en la carpeta liquid de este proyecto.

Eres libre de agregar campos al producto en este template según sea necesario.

Agregar clase JS #

Para obtener los datos de tu colección y prepararlos para su uso, coloca todo el contenido de index.js de la carpeta class de este proyecto dentro de la etiqueta de script que contiene Clerk.js que has colocado en theme.liquid.

Debería verse algo así:

<script>
  // Clerk.js Código de inyección
  // Configuración de Clerk con clave y formateadores
  // Clase de este proyecto
  clerk_shopify_api.init()
  // Finalmente init() para la clase para asegurar que corra cuando cargue la página.
</script>

Esta clase invalidará los datos en función de timestamps y monedas, sin necesidad de cambiar el código.

El tiempo antes de invalidar es de 12 horas desde la última construcción de datos.

Cualquier cambio en el contexto de la moneda también invalida los datos.

Agregar función de plantilla #

Incluye el archivo template.js en el template de diseño utilizado.

La función toma los datos disponibles y los coloca en elementos hijos específicos dentro de cada tile de producto.

El ejemplo incluye los campos list_price y price.

Cosas a tener en cuenta: Si necesitas usar campos que no sean price y list_price, debes agregarlos en collection.json.liquid y editar template.html y template.js para que también consuman esos campos. Nunca tendrás que editar la clase descrita en el paso 3.

Buscar archivos de tema #

Shopify aloja más de 100 temas diferentes para diseñar y personalizar tu tienda online.

Cada tema funciona igual: personalizas los archivos del tema para obtener un resultado determinado en tu tienda.

Sin embargo, los nombres de los archivos cambian según el tema.

Shopify te proporciona un campo de búsqueda para encontrar rápida y fácilmente el archivo que buscas.

Si no sabes el nombre del archivo que buscas, puedes usar el campo de búsqueda para ayudarte a localizarlo.

Por ejemplo, si buscas el archivo que tiene el código de la página de búsqueda, probablemente incluya la palabra ‘search’ en el nombre del archivo.

Si no estás seguro de haber encontrado el archivo correcto, puedes comparar el HTML del archivo de tema con el HTML de la página relevante para ver si coinciden.

Esto se puede hacer en Google Chrome haciendo clic derecho en cualquier sección de la página y seleccionando ‘Inspeccionar’.

Luego puedes inspeccionar el HTML de la página y verificar si la clase/ID de los elementos coincide en el archivo y en la página.

Si necesitas más ayuda con esto, también puedes comunicarte con nuestro equipo de soporte.

Recomendaciones en el carrito lateral #

Se recomienda encarecidamente la instalación por parte de un desarrollador de Shopify.

Esta guía describe una solución altamente personalizada que puede comportarse de manera diferente en varios temas de Shopify. Está diseñada específicamente para temas donde el carrito es parte del DOM en cada página, pero permanece oculto hasta que el usuario lo abre.

Mostrar Recommendations de Clerk en el carrito lateral de Shopify es una excelente forma de destacar productos adicionales a los compradores antes de que comiencen el proceso de pago.

1. Edita el código de tu tema de Shopify en Online Store > Themes > Edit code.
2. Busca el archivo donde está la plantilla del carrito lateral (normalmente llamado cart-drawer.liquid o similar).
3. Inserta un snippet de Recommendations de Clerk desde Recommendations > Elements.
4. Cambia el nombre de la clase de clerk para controlar el renderizado. Por ejemplo, llamándola clerk_m:

<span
  class="clerk_m"
  data-template="@cart-others-also-bought"
  data-products="[{% for item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

1. Junto con el snippet anterior, incluye un script para renderizar las Recommendations de Clerk cuando el usuario abre el carrito. Un enfoque es utilizar un MutationObserver. El siguiente script incluye todos estos elementos, dándote un ejemplo de cómo hacerlo:

<script>
    // Selecciona el nodo a observar por mutaciones
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Clases a agregar al carrito lateral, cuando se abre
    const targetNodeClasses = "drawer animate active";

    // Opciones para el observer (qué mutaciones observar)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Función para obtener los datos del carrito
    async function fetchCartData() {
        const response = await fetch("/cart.js");
        const data = await response.json();
        let itemsID = [];
        let cartItems = data.items;
        for (var i = 0; i < cartItems.length; i++) {
            itemsID.push(cartItems[i].product_id);
        }
        return itemsID;
    }

    // Callback para ejecutar al observar mutaciones
    const callback = async (mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.type === "attributes") {
                if (targetNode.className == targetNodeClasses && !cartFetched) {
                    cartFetched = true;
                    try {
                        const itemsID = await fetchCartData();
                          if (JSON.stringify(previousitemsID) != JSON.stringify(itemsID)) {
                            await Clerk('content', '.clerk_m', 'param', { products: itemsID })
                            previousitemsID = itemsID
                          }
                    } catch (error) {
                        console.error(error);
                    } finally {
                        cartFetched = false;
                    }
                }

            }
        }
    };

    // Crear instancia del observer y vincularla a la función de callback
    const clerk_observer = new MutationObserver(callback);

    // Comenzar a observar el nodo objetivo por mutaciones configuradas
    clerk_observer.observe(targetNode, config);
</script>

Tu archivo de carrito lateral debe verse así:

Autenticación HTTP #

La autenticación HTTP suele usarse en sitios de pruebas para evitar visitas no deseadas.

Esto bloqueará el importador de Clerk y mostrará un error 401 Unauthorized en el registro de sincronización.

Puedes solucionarlo insertando la información de autenticación en la URL de importación.

En my.clerk.io > Data > Configuration, actualiza tu URL de importación así:

https://USER:PASS@www.ewoksRus.com

Errores comunes de sincronización #

Al importar datos con la integración de Shopify, el servidor de tu tienda es responsable de enviar datos de productos, categorías y ventas a Clerk.

Sin embargo, en algunos casos la configuración del servidor puede impedir que el importador tenga acceso, causando un error en Data Sync.

A continuación se muestra una lista de los errores más comunes y cómo resolverlos.

401 Unauthorized #

Este error ocurre si tu tienda o entorno de desarrollo requiere autenticación HTTP para ingresar.

Esto se resuelve insertando el nombre de usuario y la contraseña como parte de la URL de importación:

http://username:password@awesomeshop.myshopify.com

Error de permisos #

Este error suele aparecer si no has otorgado acceso de lectura a Store content like articles, blogs, comments, pages and redirects en tu aplicación privada.

Para solucionarlo:

1. Inicia sesión en Shopify y ve a Apps > Manage Private Apps > Clerk.io (o el nombre que hayas dado a la app).
2. Desplázate a Admin API Permissions y haz clic en Revisar permisos deshabilitados de Admin API.
3. Busca Store content like articles, blogs, comments, pages and redirects y elige Acceso de lectura:

1. Desplázate arriba de la página y haz clic en Guardar.

Manejo de require.js #

Esta guía solo aplica si usas Clerk.js 1.

En algunas configuraciones, Require.js impide la carga de Clerk.js, lo que hace que no se muestren sliders ni resultados de búsqueda.

Cuando esto ocurre, se mostrará el siguiente error en la consola:

Uncaught ReferenceError: Clerk is not defined

Existen dos maneras de gestionar Require.js. Ambas requieren hacer cambios en el tracking-script, que normalmente se inserta en index.liquid.

Incluir en Require.js #

La mejor opción es intentar que Require.js reconozca Clerk.

Puedes hacerlo insertando require(['clerk'], function() {}); al final del script de tracking:

Ignorar Require.js #

Si la solución anterior no funciona, puedes ignorar Require.js.

Hazlo insertando window.__clerk_ignore_requirejs = true; en la parte superior del tracking-script:

Tras utilizar una de estas opciones, Require.js será compatible con Clerk.

Actualización a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y flexible de nuestra librería JavaScript.

Hace que instalar Clerk en cualquier tienda online sea más sencillo.

Sin embargo, como las dos versiones funcionan de forma ligeramente distinta, debes seguir estos pasos para actualizar correctamente.

Las dos diferencias principales de Clerk.js 2 son:

• Los diseños en my.clerk.io usan el lenguaje de plantillas Liquid, aunque también pueden crearse fácilmente con el Editor de Diseños.
• El script debe insertarse justo antes de la etiqueta </head> en la plantilla de tu tienda online.

Crear diseños #

Como Clerk.js 2 usa un enfoque distinto para los Diseños, necesitas crear nuevos.

Puedes crear tus Diseños de Clerk.js 2 de dos maneras:

• Usa el intuitivo Editor de Diseños para crear nuevos diseños, como se indica en los siguientes puntos.
• Convierte tus Diseños antiguos. Sigue esta guía para ver cómo hacerlo.

Opción Editor de Diseños #

1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
2. En la pantalla siguiente, ponle un Nombre a tu diseño (recomendamos incluir “V2” para indicar que usas Clerk.js 2).
3. Elige el tipo de diseño.
4. Haz clic en Publicar diseño cuando termines y ve a Pasos 2 en la guía.
5. En el Editor de Diseños, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc. para editarlo, o añade nuevos elementos al diseño para agregar más información sobre los productos.
6. Haz clic en Publicar. Esto hará temporalmente que no se muestren en tu tienda online hasta que termines el Paso 2. Elige el nuevo diseño para todos los Elements que deban actualizarse.
7. Ve a Recommendations/Search > Elements y cambia tu Element de Clerk para que use tu nuevo diseño.

Ya estás listo para pasar a Clerk.js 2.

Reemplazar el script #

1. Localiza el archivo de plantilla que se utiliza para mostrar todas las páginas de la tienda online, y donde se encuentra el script original de Clerk.js cerca del final.
2. Elimina el script antiguo del archivo:

1. Ve a my.clerk.io > Developers > Tracking Code.. Esta página contiene ahora tu código de seguimiento Clerk.js 2.
2. Copia ese código e insértalo justo antes de la etiqueta </head> en la plantilla:

1. Guarda tu plantilla.

¡Felicidades! Ahora estás ejecutando la configuración mejorada de Clerk.js 2.

Puedes ver la documentación completa para Clerk.js 2 aquí: https://docs.clerk.io/docs/clerkjs-quick-start

Acceso a eventos de clientes #

Cuando te ayudamos a configurar o solucionar problemas de seguimiento de pedidos a través de píxeles de Shopify, podemos pedirte acceso al área de eventos de clientes en el panel de Shopify.

Sigue estos pasos para otorgar los permisos necesarios:

1. En Shopify, ve a Settings > Users and permissions.
2. Haz clic en el usuario llamado Clerk.io (o el usuario al que deseas actualizar).
3. Desplázate a Store settings y habilita:

• Ver eventos de clientes
• Gestionar y agregar píxeles personalizados

4. Haz clic en Save.

Estos permisos permiten a nuestro equipo ver la sección de eventos del cliente y gestionar el pixel de Clerk para verificar que el seguimiento de pedidos funcione correctamente.