Con las nuevas cuentas de clientes de Shopify, los clientes son redirigidos a la página de su cuenta o de pedidos después de iniciar sesión. Si desea guiarlos a una página diferente (por ejemplo, una colección, la lista de deseos o la página de Recompensas) después de iniciar sesión a través del widget emergente de Recompensas, puede utilizar los scripts a continuación para personalizar este comportamiento.
Reemplazar los botones de Iniciar sesión y Unirse ahora en el widget emergente de Recompensas
El siguiente ejemplo reemplaza los botones predeterminados de Iniciar sesión y Unirse ahora para invitados en el widget emergente de Recompensas con enlaces de estilo personalizado que redirigen a los usuarios a páginas específicas después de la autenticación:
<script>
function onSdkReady() {
const widgetNames = ["RewardsPopUpWidget"];
window.gw.registerWidgetCustomization(
(widgetConfig) => widgetNames.includes(widgetConfig.widgetName),
(widgetConfig) => {
return {
beforeWidgetInject: () => {
// Especifique la ruta de redirección y los estilos para el enlace de Iniciar sesión
const redirectPathForLink = "/pages/wishlist";
const linkStyle = "style='color:#1e40af;text-decoration:underline;font-weight:500;margin-right:8px;'";
// Especifique la ruta de redirección y los estilos para el botón de Unirse ahora
const redirectPathForButton = "/collections/all";
const buttonStyle = "style='background:#1e2939;color:#ffffff;text-decoration:none;padding:7px 13px;border-radius:4px;display:inline-block;'";
const loginLinkHTML = "<a href='/customer_authentication/login?return_to=" + redirectPathForLink + "' " + linkStyle + ">Iniciar sesión</a>";
const joinButtonHTML = "<a href='/customer_authentication/login?return_to=" + redirectPathForButton + "' " + buttonStyle + ">Unirse ahora</a>";
const popupRootElement = document.querySelector(".gw-rd-popup-widget-placeholder").shadowRoot.querySelector(".gw-rd-popup-root-widget-wrapper");
if (popupRootElement) {
const checkInterval = setInterval(() => {
const popupLinkElement = popupRootElement.shadowRoot.querySelector(".gw-rd-popup-widget-login-card .gw-btn.gw-rd-action-btn--link");
const popupButtonElement = popupRootElement.shadowRoot.querySelector(".gw-rd-popup-widget-login-card .gw-btn.gw-rd-action-btn");
if (popupLinkElement && popupButtonElement) {
popupButtonElement.outerHTML = joinButtonHTML;
popupLinkElement.outerHTML = loginLinkHTML;
clearInterval(checkInterval);
}
}, 300);
}
}
}
}
)
}
if (window.gw && window.gw.sdk) {
onSdkReady();
} else {
document.addEventListener("gwSdkReady", onSdkReady);
}
</script>
Puede configurar URL personalizadas a las que se redirigirá a los usuarios después de la autenticación para mejorar el flujo de usuarios:
const redirectPathForLink = "/pages/wishlist";
const redirectPathForButton = "/collections/all";
💡 Sugerencia
El enlace de "Iniciar sesión" se utiliza normalmente para los clientes existentes, mientras que el botón "Unirse ahora" se utiliza para los nuevos clientes que se registran a través del widget emergente de Recompensas.
Puede redirigir a estos dos grupos a diferentes páginas, por ejemplo:
Clientes existentes →
/pages/wishlistNuevos clientes →
/collections/allo una página de bienvenida
Aplicar estilos personalizados a los widgets de Growave
También puede aplicar CSS personalizado a los widgets de Growave utilizando el mismo método del SDK.
El siguiente ejemplo oculta el icono predeterminado en el modal de Unirse ahora y aplica el estilo en múltiples widgets de Recompensas.
<style id="super-style-for-widget">
.gw-rd-rewards-join-now-modal-widget-placeholder .gw-rd-modal-body__icon {
display: none !important;
}
</style>
<script>
function onSdkReady() {
const widgets = [
"RewardsPopUpWidget",
"RewardsPopUpRootWidget",
"RewardsJoinNowModalWidget",
"RewardsWelcomeBannerPageWidget",
"RewardsCustomerRewardsModal",
"RewardsWaysToEarnPageWidget",
"RewardsWaysToEarnPageWidgetModal",
"RewardsWaysToSpendPageWidget",
"RewardsWaysToSpendPageWidgetModal",
"RewardsVipTiersPageWidget",
"RewardsReferralProgramPageWidget"
];
window.gw.registerWidgetCustomization(
(widgetConfig) => widgets.includes(widgetConfig.widgetName),
(widgetConfig) => {
return {
styleElement: document.querySelector("#super-style-for-widget")
};
}
);
}
if (window.gw && window.gw.sdk) {
onSdkReady();
} else {
document.addEventListener("gwSdkReady", onSdkReady);
}
</script>
Este script se puede utilizar para:
Ocultar o rediseñar elementos específicos de los widgets
Aplicar actualizaciones de diseño consistentes en múltiples widgets de Recompensas
Cómo agregar el script a su tema
Opción 1 — Agregar directamente a theme.liquid
Vaya al Administrador de Shopify → Tienda online → Temas → Editar código → layout/theme.liquid.
Pegue todo el bloque
<script>(y el bloque<style>, si es necesario) justo antes de la etiqueta de cierre</body>.Guarde los cambios y pruébelos en su tienda online.
Opción 2 — Agregar como un fragmento (snippet)
Vaya al Administrador de Shopify → Tienda online → Temas → Editar código → Snippets → Agregar un nuevo snippet (por ejemplo,
growave-custom-widget.liquid).Pegue el script y el código de estilo dentro del nuevo snippet.
Incluya el fragmento en su archivo de diseño:
{% render 'growave-custom-widget' %}También puede incluirlo condicionalmente en plantillas específicas, como la página del producto.
Si necesita ayuda para configurar o solucionar problemas con los widgets predeterminados de Growave, comuníquese con nosotros a través del chat en vivo en el panel de administración o por correo electrónico a [email protected]. ¡Estamos aquí para ayudarle! 🤗