Bigcommerce

Get Started

Instala Clerk en BigCommerce siguiendo estos sencillos pasos

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

Conectando tu tienda #

Añadir tienda #

Después de iniciar sesión en my.clerk.io, lo primero que debes hacer es añadir tu tienda:

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

  2. Elige el Idioma y la Moneda, y selecciona BigCommerce como la Plataforma.

  3. Haz clic en Add Store.

Add new store form

Instalar seguimiento de visitantes #

Importante: En BigCommerce debes estar conectado como Propietario de la tienda para acceder a estas configuraciones.

  1. En el panel de administración de BigCommerce, ve a Storefront > My Themes y haz clic en Make a copy.

    Esto crea una copia segura del tema para instalar Clerk.

My themes page

  1. En el nuevo tema, haz clic en los tres puntos (…)

    y elige Apply para hacerlo el tema activo.

Apply theme
  1. Haz clic en Advanced > Edit Theme Files para abrir el editor de temas.
Edit theme files
  1. En la barra lateral izquierda, abre templates > layout > base.html y pega el script de seguimiento en la sección <head> justo antes de </head>.
<!-- 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 = 'https://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);

  Clerk('config', { key: 'INSERT_PUBLIC_API_KEY' });

  {{#if customer.email}}
  Clerk('call', 'log/email', { email: '{{customer.email}}' });
  {{/if}}
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Reemplaza INSERT_PUBLIC_API_KEY con tu Public Key encontrada en my.clerk.io > Developers > API Keys.

Tracking script in base.html
  1. Haz clic en Save & apply file.

Instalar seguimiento de pedidos #

  1. En el panel de administración de BigCommerce, ve a Advanced Settings > Data Solutions.

  2. Activa Affiliate Conversion Tracking y haz clic en Save.

Data solutions page

  1. Abre la pestaña Affiliate Conversion Tracking.

  2. Pega el siguiente código en la parte inferior de Conversion Tracking Code y haz clic en Save.

<!-- 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 = 'https://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);
  Clerk('config', { key: 'INSERT_PUBLIC_API_KEY' });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

<!-- Start of Clerk sales tracking -->
<script>
  Clerk('call', 'log/sale/bigcommerce', { sale: '%%ORDER_ID%%' });
</script>
<!-- End of Clerk sales tracking -->

Reemplaza INSERT_PUBLIC_API_KEY con tu Public Key encontrada en my.clerk.io > Developers > API Keys..

Conversion tracking code

Sincronizar productos #

  1. En el panel de administración de BigCommerce, ve a Advanced Settings > API Accounts.

  2. Haz clic en Create API Account y selecciona Create V2/V3 API Token.

API accounts page

  1. Nómbralo “Clerk.io” y otorga acceso de solo lectura a:

    • Content

    • Information & Settings

    • Orders

    • Order Transactions

    • Products

API account permissions

Después de configurar la cuenta API, solo necesitas sincronizar tu tienda.

API account credentials

  1. En Clerk, ve a my.clerk.io > Data > Configuration y selecciona BigCommerce como tu método de sincronización.

  2. Pega el Store Hash, Client ID, Client Secret y Access Token en la configuración de BigCommerce y guarda.

Después de guardar, inicia una sincronización de datos cuando estés listo.

Vista previa de elementos #

Para comenzar a previsualizar elementos de Clerk en tu tienda online, primero tendrás que acceder al tema en el que añadiste Clerk.

Inicia sesión en el portal de administración BigCommerce de tu tienda, luego selecciona “Storefront” > “My Themes” desde el menú lateral izquierdo:

My themes page

Una vez que hayas encontrado tu tema, haz clic en los tres puntos en la esquina inferior derecha, luego selecciona “Customize”:

Customize theme

Después de hacer clic en “Customize”, se te dará la opción de seleccionar un estilo de tema para personalizar.

Asegúrate de que este estilo coincida con el del tema que has elegido (por ejemplo, si trabajas con “Theme Light”, elige “Light” aquí):

Theme style selection

Elige el estilo del tema y luego haz clic en “Continue”.

Una vez en la página Preview, asegúrate de seleccionar “Preview” en la parte superior de la pantalla.

En la esquina superior izquierda, puedes elegir la página específica de la tienda online que te gustaría previsualizar, por ejemplo Homepage:

Preview page

Nota:

En el modo de vista previa, BigCommerce no permite llevar variables a una página después de hacer clic.

Por ejemplo, si añades productos al carrito en Preview, no estarán en el carrito después de hacer clic.

Para probar elementos de Clerk que requieran variables al cambiar de página, asegúrate de “codificar manualmente” esas variables para la prueba.

Por ejemplo, ajusta tu consulta de búsqueda a una palabra clave específica o elige un ID de producto específico añadido al carrito.

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