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 need help setting up or troubleshooting Growave’s default widgets, please contact us via live chat in the admin panel or email at [email protected]. We're here to help! 🤗