Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

Pon Clerk en funcionamiento en tu tienda de Shopify en solo unos pocos pasos. Esta guía te guía a través de la conexión de tu tienda, la instalación del seguimiento y la sincronización de tus datos.

Conectando tu tienda #

El primer paso para instalar Clerk es conectar tu Tienda con tu cuenta de Clerk.

Después de seguir estos simples pasos, podrás ver tu Live Demo Store, que te brinda una visión general personal de cómo funcionará Clerk en tu tienda online.

Agregar tienda #

  1. Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página de Agregar nueva tienda.

  2. Escribe el Nombre y Dominio de tu tienda online.

  3. Elige Shopify como la Plataforma y selecciona tu Moneda.

  4. Haz clic en Add Store.

Instalar seguimiento de visitantes #

  1. En el backend de Shopify, ve a Online Store > Themes.

  2. Haz clic en ... > Edit code para el tema que deseas modificar.

  3. Abre settings_schema.json y añade el snippet de configuración de Clerk al final, justo antes del último ].

Settings schema file
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

  1. Haz clic en Save.

  2. Bajo Snippets, haz clic en Add a new snippet llamado clerk-tracking.liquid y haz clic en Done.

  3. Inserta tu snippet de seguimiento de visitantes de Clerk en el nuevo archivo y haz clic en Save. Reemplaza INSERT_PUBLIC_API_KEY con tu Public Key de my.clerk.io > Developers > API Keys.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
  })(window, document);
  let publicKey = 'INSERT_PUBLIC_API_KEY';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Abre theme.liquid y añade esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Instalar el seguimiento de pedidos #

  1. En Shopify, ve a Settings > Customer Events.

  2. Haz clic en Add custom pixel, asígnale el nombre Clerk.io, luego haz clic en Add pixel.

  3. Pega tu código de seguimiento de ventas de Clerk y haz clic en Save.

analytics.subscribe("clerk_pixel_context", (event) => {
  browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
  const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
  const pixelContext = await JSON.parse(pixelContextRaw);
  const checkout = event.data.checkout;
  fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
    method: "POST",
    mode: "cors",
    body: JSON.stringify({
      sale: checkout.order.id,
      key: pixelContext.localeApiKey,
      visitor: pixelContext.visitor,
    }),
  });
});
  1. Haz clic en Connect y confirma.
Insert pixel tracking

Sincronizar datos #

La sincronización de datos conecta tu tienda de Shopify con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de tu tienda. Esto permite que Clerk ofrezca recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de tu tienda. Sigue los pasos de la guía de sincronización de datos para configurar la sincronización de datos.

Mercados y locales #

Si tu configuración de Shopify utiliza varios idiomas, mercados o dominios, configúralos antes de lanzar.

  1. Completa primero la configuración básica en esta guía.
  2. Abre my.clerk.io > Data > Configuration.
  3. Configura los ajustes específicos por mercado (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Añade ubicaciones de inventario si el stock debe limitarse por ubicación.
  5. Inicia una nueva sincronización y verifica las URLs de productos en cada idioma/dominio de la tienda.

Shop Locale/Shopify Locale debe usar el código de idioma estándar de Shopify, por ejemplo da para Dinamarca y sv para Suecia.

Si no estás seguro de qué códigos de localización utiliza tu tienda, pide al asistente Sidekick de Shopify que liste los idiomas configurados para la tienda.

Utiliza la guía de mapeo detallado aquí: Configuración de integración Shopify.

Recuerda traducir los Títulos en Element -> Edit -> Select Design para coincidir con cada idioma.

Configuración multi-tienda #

Si tu configuración abarca varias tiendas de Shopify (no solo varios idiomas dentro de una sola tienda), crea una tienda Clerk.io por cada tienda de Shopify:

  1. En my.clerk.io, haz clic en + Add new Store.
  2. Copia el contenido de la tienda principal durante la creación.
  3. Conecta y sincroniza cada tienda de Shopify por separado.
  4. Usa la clave pública correspondiente por escaparate en el seguimiento.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.