Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

Ponga Clerk en funcionamiento en su tienda Shopify en solo unos pocos pasos. Esta guía lo guía a través de la conexión de su tienda, la instalación de seguimiento y la sincronización de sus datos.

Conectar su tienda #

El primer paso para instalar Clerk es conectar su tienda con su cuenta de Clerk.

Después de seguir estos sencillos pasos, podrá ver su Live Demo Store, que le brinda una visión general personalizada de cómo funcionará Clerk en su tienda web.

Agregar tienda #

  1. Inicie sesión en my.clerk.io. La primera vez que lo haga, verá la página Agregar Nueva Tienda.

  2. Escriba el Nombre y el Dominio de su tienda web.

  3. Elija Shopify como Plataforma y seleccione su Moneda.

  4. Haga clic en Add Store.

Instalar seguimiento de visitantes #

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

  2. Haga clic en ... > Edit code para el tema que desea modificar.

  3. Abra settings_schema.json y añada el fragmento 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. Haga clic en Save.

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

  3. Inserte su fragmento de seguimiento de visitantes de Clerk en el nuevo archivo y haga clic en Save. Reemplace INSERT_PUBLIC_API_KEY con su clave pública 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. Abra theme.liquid y agregue esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Instalar seguimiento de pedidos #

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

  2. Haga clic en Add custom pixel, nómbrelo Clerk.io, luego haga clic en Add pixel.

  3. Pegue su código de seguimiento de ventas de Clerk y haga 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. Haga clic en Connect y confirme.
Insert pixel tracking

Sincronizar datos #

Sincronizar datos conecta su tienda Shopify con Clerk, permitiendo que Clerk acceda a sus productos, pedidos, clientes y demás información de la tienda. Esto permite que Clerk ofrezca recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de su tienda. Siga los pasos de la guía de Sincronización de Datos para configurar la sincronización de datos.

Mercados e idiomas #

Si su configuración de Shopify utiliza varios idiomas, mercados o dominios, configure esto antes de publicar.

  1. Complete primero la configuración básica en esta guía.
  2. Abra my.clerk.io > Data > Configuration.
  3. Configure los ajustes específicos de mercado (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Añada ubicaciones de inventario si el stock debe ser asignado por ubicación.
  5. Inicie una nueva sincronización y verifique las URLs de productos en cada idioma/dominio de su tienda.

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

Si no está seguro de qué códigos de idioma usa su tienda, pídale al asistente Sidekick de Shopify que liste los idiomas configurados para la tienda.

Utilice la guía de mapeo detallada aquí: Shopify integration settings.

Recuerde traducir los Headlines en Element -> Edit -> Select Design para que coincidan con cada idioma.

Configuración multi-tienda #

Si su configuración abarca múltiples tiendas Shopify (no solo varios idiomas dentro de una misma tienda), cree una tienda Clerk.io por cada tienda Shopify:

  1. En my.clerk.io, haga clic en + Add new Store.
  2. Copie el contenido de la tienda principal durante la creación.
  3. Conecte y sincronice cada tienda Shopify por separado.
  4. Utilice la clave pública correspondiente por cada tienda 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.