Los códigos personalizados en el checkout, también llamados snippets, te permiten insertar código de desarrollo en el proceso de compra y adaptarlo a las necesidades de tu negocio. Con ellos, podés mostrar avisos, información sobre el envío u orientaciones antes del pago, por ejemplo.
En este tutorial te mostramos cómo funcionan los códigos personalizados en el checkout y cómo incluirlos en tu tienda.
Helpjuice Success Callout Title
Los códigos personalizados en el checkout están disponibles solo para tiendas del plan Tiendanube Evolución. Si tu tienda usa otro plan, esta funcionalidad no está disponible.
Por el momento, no es posible modificar libremente los campos, los botones ni la estructura original del checkout con los códigos personalizados.
¿Qué es posible hacer mediante códigos personalizados?
Los códigos personalizados funcionan dentro de los componentes y límites soportados por Nube SDK. Esto significa que podés agregar pequeños elementos en puntos definidos del checkout y también definir la apariencia de esos elementos.
Algunos ejemplos de lo que podés incluir:
- Avisos y comunicados para quien está finalizando la compra;
- Información sobre el envío y los plazos de entrega;
- Orientaciones antes de la etapa de pago;
- Mensajes en la pantalla de confirmación del pedido.
Helpjuice Warning Callout Title
Te recomendamos tener conocimientos técnicos de desarrollo para escribir y probar los códigos personalizados en la tienda. Si no trabajás con esto o no tenés conocimientos técnicos, te sugerimos contactar a una persona desarrolladora o a un especialista que trabaje con Tiendanube para esa implementación.
¿Cómo agregar un código personalizado en el checkout?
Para insertar un código personalizado en el proceso de compra de tu tienda, seguí estos pasos:
1. Ingresar desde administrador de tu tienda Tiendanube a "Configuración > Opciones del checkout".
2. Buscar la sección "Códigos personalizados" y hacer clic en "Agregar código", dentro de "Desarrollo".
3. En el panel "Desarrollo", que se abre a la derecha, completar el campo "Scripts" con el código JSX basado en la librería Nube SDK.
4. Si querés permitir la edición del contenido y el diseño de ese código desde "Códigos personalizados", completar el campo "Configuración (opcional)" con el JSON correspondiente.
5. Hacer clic en "Guardar" para cerrar la ventana lateral. Y después en "Guardar" de nuevo para finalizar.
¡Listo!
El código personalizado empieza a aplicarse en el checkout de tu tienda. Para ver el resultado, simulá una compra de prueba y recorré el proceso de compra completo. Te sugerimos hacerlo desde una ventana de incógnito.
Helpjuice Info Callout Title
Como el código se aplica en una etapa crítica de la compra, te recomendamos probar cada cambio antes de dejarlo activo. En implementaciones más sensibles, podés contar con el acompañamiento de tu analista comercial asignado.
Para conocer las demás configuraciones del proceso de compra de tu tienda, accedé al tutorial: ¿Qué es el checkout de mi tienda?
Preguntas frecuentes sobre códigos personalizados en el checkout
¿Necesito solicitar la habilitación de los códigos personalizados en el checkout?
No. Las tiendas con plan Tiendanube Evolución tienen acceso directo a la funcionalidad desde el administrador, sin necesidad de contactarnos para solicitar la habilitación. En los demás planes, la funcionalidad no está disponible.
¿Necesito saber programar para usar los códigos personalizados en el checkout?
Sí. El campo "Scripts" espera código JSX basado en la librería Nube SDK, por lo que se necesitan conocimientos de desarrollo para escribirlo y probarlo.
¿Dónde encuentro la documentación técnica de Nube SDK?
En la propia sección "Códigos personalizados" del administrador está el link "Más sobre códigos personalizados", que lleva directo a la documentación para desarrolladores.
Ahí vas a encontrar los componentes disponibles, los puntos del checkout en los que se puede renderizar contenido y los ejemplos de uso de la librería.