Saltar al contenido principal

Instalación de Vertex en su tienda Shopify

Esta guía le acompaña a través de la instalación del tema premium Vertex B2B para Shopify — desde la compra, pasando por la activación de B2B, configuración de metafields, hasta su primera publicación.

Tiempo estimado
  • Instalación B2C básica (solo tema, sin B2B): 5 minutos
  • Instalación B2B completa (tema + B2B nativo + metafields + primera empresa): 45–60 minutos

Antes de empezar​

Requisitos de plan de Shopify​

NecesitaPor qué
Cualquier plan de ShopifyVertex se instala en todos los planes — Basic / Shopify / Advanced / Plus
Shopify Plus O Advanced + complemento B2BSolo necesario si quiere usar las funciones B2B nativas de Shopify. Sin ellas, Vertex funciona como un pulido tema B2C de suministros industriales.
Nuevas cuentas de cliente activadasRequerido para cualquier función de cuenta — Configuración ▸ Cuentas de cliente ▸ Mostrar enlace de inicio de sesión en checkout

Paso 1 — Instalar Vertex desde la Shopify Theme Store​

  1. Vaya a Tienda online ▸ Temas en su admin de Shopify
  2. Haga clic en Añadir tema ▸ Visitar Theme Store
  3. Busque "Vertex" o navegue a la categoría B2B y mayorista
  4. Haga clic en Probar tema para instalar Vertex como un tema no publicado en su tienda
  5. Haga clic en Personalizar para abrir el editor de tema
En este punto su tienda no cambia

El tema está instalado pero no publicado. Puede previsualizar y personalizar Vertex sin afectar a su tienda en vivo. Publique (Paso 6) solo cuando esté listo.

Paso 2 — Activar el B2B nativo de Shopify (opcional, pero recomendado)​

Omita este paso si solo quiere B2C — la interfaz B2B de Vertex se oculta automáticamente cuando no hay ningún cliente B2B con sesión iniciada.

  1. Vaya a Configuración ▸ Cuentas de cliente
  2. Active Nuevas cuentas de cliente
  3. Desplácese a B2B y haga clic en Gestionar
  4. Haga clic en Activar B2B
  5. Ahora verá una nueva sección B2B en la barra lateral del admin de Shopify

→ Consulte la Guía completa de configuración B2B para crear su primera empresa, asignar catálogos, establecer condiciones NET, etc.

Paso 3 — Configurar el namespace de metafield de Vertex​

Vertex lee varios metafields gestionados por el comerciante para potenciar las mejoras de la PDP (información de representante de ventas, envío desde, búsqueda por MPN, hojas técnicas, especificaciones técnicas, historial de precios).

Puede hacerlo de dos maneras:

Opción A — Configuración manual mediante el admin de Shopify (~15 min)​

  1. Vaya a Configuración ▸ Datos personalizados
  2. Haga clic en Empresas (o Productos, según el metafield que esté añadiendo)
  3. Haga clic en Añadir definición y cree cada metafield desde la tabla en la Guía de configuración de metafields

Opción B — Configuración masiva mediante Shopify GraphQL Admin API (~5 min)​

Use las mutaciones GraphQL incluidas en la Guía de configuración de metafields para sembrar cada definición de metafield de Vertex en un solo lote.

No necesita cada metafield para empezar

El tema se degrada con elegancia cuando faltan metafields. Los bloques de la PDP (Documentos, Historial de precios, Envío desde) se ocultan automáticamente cuando su metafield de respaldo está vacío. Comience con los más impactantes (vertex.mpn para búsqueda por SKU y vertex.rep_* para la pill de representante de ventas) y añada los demás a medida que escala.

Paso 4 — Elegir un preset de color​

Vertex se entrega con 4 paletas iniciales:

PresetSectorAcento
Vertex (predeterminado)Industrial / MROÁmbar #fbbf24
ThrottleRecambios de automóvilRojo-naranja #ec5f24
OfficeITSuministro de oficina e ITAzul
InklineSuministro de impresiónVerde azulado

Para cambiar de preset:

  1. En el editor de tema, haga clic en Configuración del tema (abajo a la izquierda)
  2. Abra Colores
  3. Seleccione su paleta inicial desde el desplegable Paleta de colores inicial
  4. Toda la tienda se recolorea en el panel de vista previa

→ Consulte la Guía de presets demo para conocer las diferencias entre presets.

Paso 5 — Configurar cabecera, navegación y footer​

La cabecera + footer se configuran mediante grupos de sección en el editor de tema:

  1. En el editor de tema, haga clic en Secciones (barra lateral izquierda)
  2. Haga clic en Grupo de cabecera para configurar:
    • Barra de anuncios (tira superior oscura/ámbar con enlaces, redes sociales, teléfono)
    • Barra de saludo B2B (visible solo para clientes B2B con sesión iniciada)
    • Cabecera principal (logo, búsqueda, navegación)
  3. Haga clic en Grupo de footer para configurar:
    • Menú de footer, enlaces sociales, email de contacto, alta de newsletter, iconos de pago

→ Recorrido detallado: Guía de cabecera y footer · Referencia de configuración del tema.

Paso 6 — Previsualizar y luego publicar​

  1. En el editor de tema, haga clic en el botón Vista previa (arriba a la derecha) para ver su tienda en una nueva pestaña
  2. Recorra:
    • Página de inicio
    • Una página de colección
    • Una página de producto
    • El carrito
    • La página de inicio de sesión de cliente
  3. Si hay configurada una cuenta de prueba de comprador B2B, inicie sesión y verifique:
    • Aparece la barra de saludo ámbar con el nombre de empresa + insignia de condiciones NET
    • Los niveles de precios por volumen se renderizan en la PDP (si está asignado al catálogo de ese comprador)
    • Aparece la pill de representante de ventas en la cabecera (si está configurado el metafield vertex.rep_name)
  4. De vuelta en Tienda online ▸ Temas, encuentre Vertex en la Biblioteca de temas
  5. Haga clic en el menú ⋯ junto a Vertex ▸ Publicar

Su tienda ya está en vivo con Vertex 🎉

Solución de problemas de instalación​

"No veo la barra ámbar de saludo B2B"​

Causas (en orden de probabilidad):

  1. No ha iniciado sesión como cliente B2B. La barra ámbar solo se renderiza cuando customer.b2b? es true Y customer.current_company está establecido. Inicie sesión como un comprador B2B asociado a una empresa.
  2. El modo de tienda está configurado como solo B2C. Abra Configuración del tema ▸ B2B ▸ Modo de tienda y confirme que está en Híbrido (auto) o Solo B2B.
  3. El B2B nativo no está activado en el admin de Shopify. Confirme el Paso 2 anterior.

"Los precios muestran 'Inicie sesión para ver los precios' aunque he iniciado sesión"​

El interruptor Configuración del tema ▸ B2B ▸ Ocultar precios hasta que el cliente inicie sesión está activado. Para desactivarlo, desmarque la casilla.

"La pill de representante de ventas no aparece en la cabecera"​

La pill solo se renderiza cuando la empresa del comprador tiene un valor establecido en el metafield vertex.rep_name. Verifique en Clientes ▸ Empresas ▸ [Nombre de la empresa] ▸ Metafields que vertex.rep_name esté poblado.

→ Consulte FAQ + solución de problemas para más información.

Próximos pasos​