With Shopify’s new customer accounts, customers are redirected to the account or orders page after signing in. If you want to guide them to a different page (for example, a collection, wishlist, or Rewards page) after login through the Rewards pop-up, you can use the scripts below to customize this behavior.
Replace Sign in and Join now buttons in the Rewards pop-up
The example below replaces the default Sign in and Join now buttons for guests in the Rewards pop-up widget with custom-styled links that redirect users to specific pages after authentication:
<script>
function onSdkReady() {
const widgetNames = ["RewardsPopUpWidget"];
window.gw.registerWidgetCustomization(
(widgetConfig) => widgetNames.includes(widgetConfig.widgetName),
(widgetConfig) => {
return {
beforeWidgetInject: () => {
//Specify the redirect path and styles for the Sign in link
const redirectPathForLink = "/pages/wishlist";
const linkStyle = "style='color:#1e40af;text-decoration:underline;font-weight:500;margin-right:8px;'";
//Specify the redirect path and styles for the Sing up button
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 + ">Sign in</a>";
const joinButtonHTML = "<a href='/customer_authentication/login?return_to=" + redirectPathForButton + "' " + buttonStyle + ">Join now</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>
You can set custom URLs where users will be redirected after authentication to improve the user flow:
const redirectPathForLink = "/pages/wishlist";
const redirectPathForButton = "/collections/all";
💡 Suggestion
The “Sign in” link is typically used for existing customers, while the “Join now” button is used for new customers registering through the Rewards pop-up.
You can redirect these two groups to different pages, for example:
Existing customers →
/pages/wishlistNew customers →
/collections/allor a welcome page
Apply custom styles to Growave widgets
You can also apply custom CSS to Growave widgets using the same SDK method.
The following example hides the default icon in the Join now modal and applies the style across multiple Rewards widgets.
<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>
This script can be used to:
Hide or restyle specific widget elements
Apply consistent design updates across multiple Rewards widgets
How to add the script to your theme
Option 1 — Add directly to theme.liquid
Go to Shopify admin → Online Store → Themes → Edit code → layout/theme.liquid.
Paste the entire
<script>block (and<style>block, if needed) just before the closing</body>tag.Save the changes and test on your storefront.
Option 2 — Add as a snippet
Go to Shopify admin → Online Store → Themes → Edit code → Snippets → Add a new snippet (for example,
growave-custom-widget.liquid).Paste the script and style code inside the new snippet.
Include the snippet in your layout file:
{% render 'growave-custom-widget' %}You can also include it conditionally in specific templates, such as the Product page.
If you have any questions or need help, feel free to reach out to us at [email protected] or click the chat icon in the bottom-right corner of the Growave admin panel. We’re always happy to help! 🤗