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: FAQ description: “Soluciones a preguntas y problemas comunes al usar Clerk con Shopify” weight: 7

¿Tienes problemas con tu integración de Shopify? Este FAQ cubre los problemas más comunes y sus soluciones, desde la conversión de moneda hasta la ubicación de los archivos de temas.

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 por el tamaño de imagen predeterminado que configuraste):

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

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

Conversión de moneda #

La Conversión de Moneda incorporada de Shopify facilita leer el símbolo de la moneda y la tasa de cambio desde la tienda online.

Por defecto, Clerk.js para Shopify viene con un formatter que funciona siempre que tu app de terceros use el objeto de moneda integrado de Shopify.

Solución estándar #

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

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

Al utilizar 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 diferentes componentes.

Editor de Diseños #

1. Crea un componente de Texto donde quieras que se muestre el precio.
2. Añade el siguiente código Liquid para mostrar el precio basado en el currency converter 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 Edit Design para tu diseño.
2. Sustituye el formatter money o money_eu existente por currency_converter.
3. Haz clic en Update Design.
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 precio si no hay datos desde la API de Shopify. Úsalo solo si tienes una configuración específica y personalizada para conversiones de precio basadas en cambios de 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 contenga todos los productos.
• Un layout alternativo para renderizar la información de la colección como JSON.
• Una clase JavaScript que recopila 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 una colección #

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

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

La condición para la colección debería ser algo como price > -1000000.

Crear layout alternativo #

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

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

En la sección de plantillas al lado izquierdo, presiona Add new Template.

En la ventana emergente, selecciona collection para el tipo de recurso.

Selecciona liquid para el 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 debería ser el archivo collection.json.liquid que se encuentra en la carpeta liquid de este proyecto.

Puedes agregar los campos que quieras al producto en esta plantilla según sea necesario.

Añadir clase JS #

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

Debe verse algo así:

<script>
  // Clerk.js Injection Code
  // Clerk Config with Key and Formatters
  // Class from this project
  clerk_shopify_api.init()
  // Finalmente init() para la clase, para asegurarse de que se ejecute cuando la página cargue.
</script>

Esta clase invalidará los datos según timestamps y monedas, sin que tengas que cambiar el código.

El tiempo antes de la invalidación es de 12 horas desde la última vez que se creó la data.

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

Añadir función de plantilla #

Incluye el template.js en la plantilla de diseño utilizada.

La función obtiene los datos cuando están disponibles y los coloca en elementos hijos específicos dentro de cada ficha de producto.

El ejemplo incluye los campos list_price y price.

A tener en cuenta: Si necesitas usar campos diferentes de price y list_price, agrégalos en collection.json.liquid y luego edita template.html y template.js para consumir también esos campos. Nunca deberías tener que editar la Clase descrita en el paso 3.

Localizar archivos de tema #

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

Cada tema funciona de la misma manera: personalizas los archivos de tema para lograr un resultado determinado en tu tienda.

Sin embargo, los nombres de los archivos de tema cambian de un tema a otro.

Shopify te ofrece un campo de búsqueda para encontrar fácil y rápidamente el archivo de tema que estás buscando.

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

Por ejemplo, si estás buscando el archivo que tiene el código para la página de búsqueda, probablemente incluya ‘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 en la página relevante para ver si coinciden.

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

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

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

Recomendaciones en el drawer del carrito #

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 según el tema de Shopify. Está diseñada específicamente para temas donde el carrito forma parte del DOM en cada página, pero permanece oculto hasta que el usuario lo abre.

Mostrar las recomendaciones de Clerk en el drawer del carrito en Shopify es una excelente forma de mostrar productos adicionales a los clientes antes de que comiencen el proceso de checkout.

1. Edita el código de tu tema de Shopify en Online Store > Themes > Edit code.
2. Localiza el archivo donde está la plantilla del drawer del carrito (normalmente llamado cart-drawer.liquid o similar).
3. Inserta un snippet de Clerk Recommendations desde Recommendations > Elements.
4. Cambia 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 line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>

1. Junto con el snippet anterior, incluye un script para renderizar las recomendaciones de Clerk cuando el usuario abra el carrito. Un método es usar un MutationObserver. El siguiente script incluye todos estos elementos, dándote un ejemplo de cómo abordarlo:

<script>
    // Select the node that will be observed for mutations
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Add all of the class names of the cart drawer, when it is opened
    const targetNodeClasses = "drawer animate active";

    // Options for the observer (which mutations to observe)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Function to fetch cart data
    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 function to execute when mutations are observed
    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;
                    }
                }

            }
        }
    };

    // Create an observer instance linked to the callback function
    const clerk_observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    clerk_observer.observe(targetNode, config);
</script>

Tu archivo del drawer de carrito debería verse así:

Autenticación HTTP #

La autenticación HTTP suele usarse en sitios de staging para evitar visitantes no deseados.

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

Puedes solucionarlo introduciendo 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 online es el responsable de enviar los datos de productos, categorías y ventas a Clerk.

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

A continuación, una lista de los errores más comunes y cómo arreglarlos.

401 Unauthorized #

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

Esto se soluciona introduciendo el Username y Password como parte de la Import URL:

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

Error de permisos #

Este error normalmente ocurre si no has dado Read Access a Store content like articles, blogs, comments, pages and redirects en tu App Privada.

Para solucionarlo:

1. Inicia sesión en Shopify y ve a Apps > Manage Private Apps > Clerk.io (o el nombre que le hayas puesto a la App).
2. Desplázate hasta Admin API Permissions, y haz clic en Review disabled Admin API permissions.
3. Busca Store content like articles, blogs, comments, pages and redirects y elige Read access:

1. Desplázate a la parte superior de la página y haz clic en Save.

Manejo de require.js #

Esta guía sólo aplica al usar Clerk.js 1.

En algunas configuraciones, Require.js evita que Clerk.js se cargue, lo que significa que no se mostrarán sliders ni resultados de búsqueda.

Cuando esto sucede, verás el siguiente error en la consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambas requieren que hagas cambios en el tracking-script, que normalmente se inserta en index.liquid.

Incluir en Require.js #

El mejor enfoque es intentar que Require.js reconozca Clerk.

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

Ignorar Require.js #

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

Puedes hacerlo insertando window.__clerk_ignore_requirejs = true; en la parte superior del tracking script:

Tras usar uno de estos métodos, Require.js será compatible con Clerk.

Actualizar 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 fácil.

Sin embargo, ya que las dos versiones funcionan de manera ligeramente diferente, debes seguir estos pasos para actualizar correctamente.

Las dos diferencias principales en Clerk.js 2 son:

• Los Diseños en my.clerk.io utilizan el lenguaje de plantillas Liquid, aunque también se pueden crear fácilmente usando el Editor de Diseños.
• El script debe ser insertado justo antes de la etiqueta </head> en la plantilla de tu tienda.

Crear diseños #

Dado que Clerk.js 2 tiene un enfoque distinto a los Diseños, tienes que 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 describe en los siguientes puntos.
• Convierte tus Diseños antiguos. Sigue esta guía para ver cómo hacerlo.

Opción Editor de Diseño #

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

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

Sustituye el script #

1. Localiza el archivo de plantilla que se usa para mostrar todas las páginas de la tienda, donde está el script original de Clerk.js cerca del pie.
2. Elimina el antiguo script del archivo:

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

1. Guarda la plantilla.

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

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

Acceso a Eventos de Cliente #

Cuando te ayudamos a configurar o solucionar problemas de seguimiento de pedidos mediante píxeles de Shopify, es posible que solicitemos acceso al área de eventos de cliente en tu panel de administrador de Shopify.

Sigue estos pasos para otorgar los permisos necesarios:

1. En Shopify, ve a Settings > Users and permissions.
2. Haz clic en el miembro del staff llamado Clerk.io (o el usuario de staff que quieras actualizar).
3. Desplázate a Store settings y habilita:
   • View customer events
   • Manage and add custom pixels
4. Haz clic en Save.

Estos permisos permiten a nuestro equipo ver la sección de eventos de cliente y gestionar el pixel de Clerk, así podemos verificar que el seguimiento de pedidos funciona correctamente.