Como hacer un login de google en Shopify

📄 Paso 2: Editar el tema Dawn (login.liquid)

Ve a tu panel Shopify:

1. Online Store → Themes → “Dawn” → Actions → Edit Code

2. Abre el archivo: sections/main-login.liquid o templates/customers/login.liquid

3. Agrega este código justo debajo del formulario o donde prefieras mostrar el botón:

<div id="g_id_onload"
     data-client_id="TU_CLIENT_ID_DE_GOOGLE"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>

<div style="width: 100%; display: flex; justify-content: center; align-items: center; ">
  <div class="g_id_signin"
       data-type="standard"
       data-size="large"
       data-theme="outline"
       data-text="sign_in_with"
       data-shape="rectangular"
       data-logo_alignment="left"
       >
  </div>
</div>


<script src="https://accounts.google.com/gsi/client" async defer></script>

<script>
  function handleCredentialResponse(response) {
    // Decodificamos el token JWT
    const token = response.credential;
    const payload = JSON.parse(atob(token.split('.')[1]));
    
    const email = payload.email;
    const name = payload.name;

    // Guardar temporalmente en localStorage
    localStorage.setItem("google_email", email);
    localStorage.setItem("google_name", name);

    // Redirigir al registro
    window.location.href = "/account/register";
  }
</script>

---

🧩 Paso 3: Prefill en /account/register (opcional)

1. Edita el archivo customers/register.liquid

2. Agrega este script al final del archivo:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const email = localStorage.getItem("google_email");
    const name = localStorage.getItem("google_name");

    if (email) {
      const emailField = document.querySelector('input[name="customer[email]"]');
      if (emailField) emailField.value = email;
    }

    if (name) {
      const firstNameField = document.querySelector('input[name="customer[first_name]"]');
      if (firstNameField) firstNameField.value = name.split(" ")[0];

      const lastNameField = document.querySelector('input[name="customer[last_name]"]');
      if (lastNameField) lastNameField.value = name.split(" ").slice(1).join(" ");
    }
  });
</script>

Esto rellena automáticamente el formulario de registro con el nombre y correo que el usuario usó en su cuenta de Google.

---

✅ Resultado final

• El usuario ve el botón “Sign in with Google”

• Al hacer clic:

  • Se captura su nombre y correo electrónico

  • Se le redirige a /account/register

  • Se rellena el formulario automáticamente

• El usuario solo necesita poner una contraseña y hacer clic en "Crear cuenta"