🚀 Cómo instalar el Probador Virtual Lookam en Shopify (¡En 2 minutos!)

Añadir nuestro probador virtual con Inteligencia Artificial a tu tienda Shopify es tan fácil como copiar y pegar. Literalmente.

No necesitas ser programador ni contratar a uno. Shopify hará todo el trabajo pesado rellenando los datos de tus productos automáticamente gracias a sus variables. ¡Vamos a ello! ✨

🛠️ Paso 1: Activar el "cerebro" de Lookam

Primero, vamos a darle a tu tienda la capacidad de cargar el probador.

1. Ve a tu panel de Shopify y haz clic en Tienda online > Temas.
2. Haz clic en los tres puntitos (...) junto a tu tema actual y selecciona Editar código.
3. En la barra de búsqueda de la izquierda, busca el archivo theme.liquid y ábrelo.
4. Haz scroll hasta el final del todo. Justo encima de la etiqueta </body>, pega esta línea:

<script src="https://widget.lookam.io/tryon-widget.js" defer></script>

¡Guarda los cambios y listo! El Paso 1 está terminado. 🎉

👕 Paso 2: Colocar el "Botón Mágico" en tus productos

Ahora vamos a poner el botón de "Pruébatelo" en la página de tus productos. Lo mejor de este código es que es inteligente: detectará automáticamente la foto, el nombre y el precio de la prenda que el cliente esté mirando.

1. En el mismo editor de código de Shopify, busca el archivo donde quieras que aparezca el botón. (Normalmente se llama main-product.liquid, product-template.liquid o simplemente un bloque personalizado en tu editor visual).
2. Pega este código donde quieras que aparezca el botón:

<lookam-tryon
  api-key="PON_TU_API_KEY_AQUI"
  api-url="https://api.lookam.io"
  garments='[{
    "imageUrl": "{{ product.featured_image | image_url: width: 800 | prepend: 'https:' }}",
    "category": "clothing",
    "name": "{{ product.title | escape }}",
    "finalPrice": {{ product.price | divided_by: 100.0 }},
    "currency": "{{ cart.currency.iso_code }}"
  }]'
  mode="simple"
  locale="es"
  button-text="Pruébatelo"
></lookam-tryon>

3. ¡Importante! Cambia donde dice PON_TU_API_KEY_AQUI por la clave API de tu cuenta de Lookam.
4. Guarda los cambios.

🥂 ¡Y ya está!

Ve a tu tienda, entra en cualquier producto y verás tu nuevo botón "Pruébatelo".

Al hacer clic, nuestro widget se abrirá, leerá la foto del producto automáticamente y permitirá a tus clientes ver cómo les queda. ¡Así de simple!

💡 ¿Por qué es tan fácil? Te habrás fijado en palabras raras como {{ product.title }}. ¡Esos son los superpoderes de Shopify! Hacen que nuestro código se adapte a cada producto de tu catálogo sin que tengas que ir subiendo fotos una a una. Nosotros nos encargamos del resto.

¿Quieres ir un paso más allá? (Opcional) 📈

Si ya te funciona y quieres que tu panel de estadísticas de Lookam tenga datos súper jugosos (para ver si se prueban más los productos con descuento, de qué marca, etc.), solo tienes que añadir un par de líneas más al código anterior.

<lookam-tryon
  api-key="PON_TU_API_KEY_AQUI"
  api-url="https://api.lookam.io"
  garments='[{
    "imageUrl": "{{ product.featured_image | image_url: width: 800 | prepend: 'https:' }}",
    "category": "{{ product.type | default: 'clothing' | downcase }}",
    "name": "{{ product.title | escape }}",
    "brand": "{{ product.vendor | escape }}",
    "originalPrice": {{ product.compare_at_price | divided_by: 100.0 | default: 0 }},
    "finalPrice": {{ product.price | divided_by: 100.0 }},
    "currency": "{{ cart.currency.iso_code }}",
    "url": "{{ shop.url }}{{ product.url }}"
  }]'
  mode="simple"
  locale="{{ request.locale.iso_code | default: 'es' }}"
  button-text="Pruébatelo"
></lookam-tryon>