Bigcommerce

Get Started

Instala Clerk en BigCommerce siguiendo estos sencillos pasos

Configura Clerk en tu tienda 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 #

Después de seguir estos simples pasos podrás ver tu Live Demo, que te ofrece una visión personal de cómo funcionará Clerk en tu tienda online, antes de configurar el resto del sistema.

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 el seguimiento de visitantes #

Importante: En BigCommerce, debes haber iniciado sesión como Store Owner para acceder a estas configuraciones.

  1. En el administrador 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 selecciona 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' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if product.id}}'{{product.id}}'{{else}}null{{/if}},
    category: {{#if category.id}}'{{category.id}}'{{else}}null{{/if}},
    page: {{#if product.id}}null{{else}}{{#if category.id}}null{{else}}'{{page_type}}'{{/if}}{{/if}}
  });
  {{#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 que se encuentra 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 administrador 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 lo siguiente 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 que se encuentra en my.clerk.io > Developers > API Keys..

Conversion tracking code

Sincronizar datos #

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

Previsualizando elementos #

Para comenzar a previsualizar los elementos de Clerk en tu tienda online, primero debes acceder al tema donde agregaste Clerk.

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

My themes page

Una vez que encuentres 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”, tendrás 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”, selecciona “Light” aquí):

Theme style selection

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

Una vez estés en la página de vista previa, 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 deseas previsualizar, por ejemplo Homepage:

Preview page

Nota:

En el modo de vista previa, BigCommerce no permite transferir variables a una página a la que accedes haciendo clic.

Por ejemplo, si agregas productos al carrito en la Vista Previa, no estarán en el carrito una vez que hagas clic para continuar.

Para probar elementos de Clerk que requieran mover variables de una página a otra, asegúrate de “codificar manualmente” esas variables para probar.

Por ejemplo, establece tu búsqueda en 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.