Custom Styles

Overview

You can apply custom CSS styles to any Growave widget by adding a <style> element with a specific ID pattern to your storefront.

Static implementation required

Custom style elements must be present in the HTML before Growave scripts initialize. Dynamically added styles after initialization will not be applied. Always include your custom styles statically in your HTML markup.

How to use

Create a <style> element with an ID that follows the pattern gw-style-for-{WidgetName}:

<style id="gw-style-for-WishlistDrawerWidget">
    .gw-drawer-open-btn.gw-drawer-open-btn--RC {
        background-color: red !important;
    }
</style>

The styles will be automatically applied to the corresponding Growave widget. Make sure to use the exact widget name from the list below.

Rewards Widgets

Enumeration Members

Enumeration Member	Value
`REWARDS_AVAILABLE_REWARDS_B2B_PAGE_WIDGET`	`"RewardsAvailableRewardsB2bPageWidget"`
`REWARDS_AVAILABLE_REWARDS_B2B_PAGE_WIDGET_MODAL`	`"RewardsAvailableRewardsB2BPageWidgetModal"`
`REWARDS_AVAILABLE_REWARDS_CART_WIDGET`	`"RewardsAvailableRewardsCartWidget"`
`REWARDS_AVAILABLE_REWARDS_LIST_WIDGET`	`"RewardsAvailableRewardsListWidget"`
`REWARDS_AVAILABLE_REWARDS_PAGE_WIDGET`	`"RewardsAvailableRewardsPageWidget"`
`REWARDS_AVAILABLE_REWARDS_PAGE_WIDGET_MODAL`	`"RewardsAvailableRewardsPageWidgetModal"`
`REWARDS_AVAILABLE_REWARDS_PAGE_WIDGET_MODAL_V2`	`"RewardsAvailableRewardsPageWidgetModalV2"`
`REWARDS_AVAILABLE_REWARDS_PAGE_WIDGET_V2`	`"RewardsAvailableRewardsPageWidgetV2"`
`REWARDS_AVAILABLE_STORE_CREDIT_PAGE_WIDGET_MODAL`	`"RewardsAvailableStoreCreditPageWidgetModal"`
`REWARDS_CONSENT_MODAL_WIDGET`	`"RewardsConsentModalWidget"`
`REWARDS_CONSENT_PAGE_WIDGET`	`"RewardsConsentPageWidget"`
`REWARDS_CRITICAL_DRAWER_WIDGET`	`"RewardsCriticalDrawerWidget"`
`REWARDS_CUSTOMER_POINTS_BALANCE_INLINE_WIDGET`	`"RewardsCustomerPointsBalanceInlineWidget"`
`REWARDS_CUSTOMER_REWARDS_LIST_WIDGET`	`"RewardsCustomerRewardsListWidget"`
`REWARDS_DRAWER_WIDGET`	`"RewardsDrawerWidget"`
`REWARDS_DRAWER_WIDGET_V2`	`"RewardsDrawerWidgetV2"`
`REWARDS_EARN_POINTS_CART_WIDGET`	`"RewardsEarnPointsCartWidget"`
`REWARDS_EARN_POINTS_PRODUCT_PAGE_WIDGET`	`"RewardsEarnPointsProductPageWidget"`
`REWARDS_EMPTY_STATE_PAGE_WIDGET`	`"RewardsEmptyStatePageWidget"`
`REWARDS_EMPTY_STATE_PAGE_WIDGET_V2`	`"RewardsEmptyStatePageWidgetV2"`
`REWARDS_FAQ_PAGE_WIDGET`	`"RewardsFaqPageWidget"`
`REWARDS_FAQ_PAGE_WIDGET_V2`	`"RewardsFaqPageWidgetV2"`
`REWARDS_FREE_PRODUCT_SLIDER_WIDGET`	`"RewardsFreeProductSliderWidget"`
`REWARDS_HISTORY_PAGE_WIDGET`	`"RewardsHistoryPageWidget"`
`REWARDS_HISTORY_PAGE_WIDGET_V2`	`"RewardsHistoryPageWidgetV2"`
`REWARDS_HUB_B2B_WIDGET`	`"RewardsHubB2bWidget"`
`REWARDS_HUB_WIDGET`	`"RewardsPopUpRootWidget"`
`REWARDS_HUB_WIDGET_V2`	`"RewardsHubWidgetV2"`
`REWARDS_JOIN_NOW_MODAL_WIDGET`	`"RewardsJoinNowModalWidget"`
`REWARDS_LOYALTY_INFO_PAGE_WIDGET`	`"RewardsLoyaltyInfoPageWidget"`
`REWARDS_LOYALTY_INFO_PAGE_WIDGET_V2`	`"RewardsLoyaltyInfoPageWidgetV2"`
`REWARDS_POP_UP_WIDGET`	`"RewardsPopUpWidget"`
`REWARDS_POP_UP_WIDGET_V2`	`"RewardsPopUpWidgetV2"`
`REWARDS_PROGRAM_ACCOUNT_WIDGET`	`"RewardsProgramAccountWidget"`
`REWARDS_QR_CODE_MODAL_WIDGET`	`"RewardsQrCodeModalWidget"`
`REWARDS_QR_CODE_MODAL_WIDGET_V2`	`"RewardsQrCodeModalWidgetV2"`
`REWARDS_QR_CODE_WIDGET`	`"RewardsQrCodeWidget"`
`REWARDS_REFERRAL_PROGRAM_PAGE_WIDGET`	`"RewardsReferralProgramPageWidget"`
`REWARDS_REFERRAL_PROGRAM_PAGE_WIDGET_V2`	`"RewardsReferralProgramPageWidgetV2"`
`REWARDS_REFERRALS_PAGE_WIDGET`	`"RewardsReferralsPageWidget"`
`REWARDS_REFUND_DISCOUNT_MODAL_WIDGET`	`"RewardsRefundDiscountModalWidget"`
`REWARDS_VERIFY_ACCOUNT_MODAL_WIDGET`	`"RewardsVerifyAccountModalWidget"`
`REWARDS_VIP_TIERS_CARD_WIDGET`	`"RewardsVipTiersCardWidget"`
`REWARDS_VIP_TIERS_MULTI_PROGRESS_WIDGET`	`"RewardsVipTiersMultiProgressWidget"`
`REWARDS_VIP_TIERS_PAGE_WIDGET`	`"RewardsVipTiersPageWidget"`
`REWARDS_VIP_TIERS_PAGE_WIDGET_V2`	`"RewardsVipTiersPageWidgetV2"`
`REWARDS_VIP_TIERS_SINGLE_PROGRESS_WIDGET`	`"RewardsVipTiersSingleProgressWidget"`
`REWARDS_VIP_TIERS_SINGLE_PROGRESS_WIDGET_V2`	`"RewardsVipTiersSingleProgressWidgetV2"`
`REWARDS_WAYS_TO_EARN_B2B_PAGE_WIDGET`	`"RewardsWaysToEarnB2bPageWidget"`
`REWARDS_WAYS_TO_EARN_B2B_PAGE_WIDGET_MODAL`	`"RewardsWaysToEarnB2bPageWidgetModal"`
`REWARDS_WAYS_TO_EARN_LIST_WIDGET`	`"RewardsWaysToEarnListWidget"`
`REWARDS_WAYS_TO_EARN_PAGE_WIDGET`	`"RewardsWaysToEarnPageWidget"`
`REWARDS_WAYS_TO_EARN_PAGE_WIDGET_MODAL`	`"RewardsWaysToEarnPageWidgetModal"`
`REWARDS_WAYS_TO_EARN_PAGE_WIDGET_MODAL_V2`	`"RewardsWaysToEarnPageWidgetModalV2"`
`REWARDS_WAYS_TO_EARN_PAGE_WIDGET_V2`	`"RewardsWaysToEarnPageWidgetV2"`
`REWARDS_WAYS_TO_SPEND_B2B_PAGE_WIDGET`	`"RewardsWaysToSpendB2bPageWidget"`
`REWARDS_WAYS_TO_SPEND_B2B_PAGE_WIDGET_MODAL`	`"RewardsWaysToSpendB2bPageWidgetModal"`
`REWARDS_WAYS_TO_SPEND_LIST_WIDGET`	`"RewardsWaysToSpendListWidget"`
`REWARDS_WAYS_TO_SPEND_PAGE_WIDGET`	`"RewardsWaysToSpendPageWidget"`
`REWARDS_WAYS_TO_SPEND_PAGE_WIDGET_MODAL`	`"RewardsWaysToSpendPageWidgetModal"`
`REWARDS_WAYS_TO_SPEND_PAGE_WIDGET_MODAL_V2`	`"RewardsWaysToSpendPageWidgetModalV2"`
`REWARDS_WAYS_TO_SPEND_PAGE_WIDGET_V2`	`"RewardsWaysToSpendPageWidgetV2"`

Reviews Widgets

Enumeration Members

Enumeration Member	Value
`AVERAGE_REVIEWS_WIDGET`	`"AverageReviewsWidget"`
`LEAVE_REVIEW_BUTTON_WIDGET`	`"LeaveReviewButtonWidget"`
`LEAVE_REVIEW_PAGE_WIDGET`	`"LeaveReviewPageWidget"`
`LEAVE_REVIEW_PAGE_WIDGET_V2`	`"LeaveReviewPageWidgetV2"`
`LISTING_AVERAGE_REVIEWS_WIDGET`	`"ListingAverageReviewsWidget"`
`LISTING_AVERAGE_REVIEWS_WIDGET_V2`	`"ListingAverageReviewsWidgetV2"`
`PRODUCT_REVIEWS_MINI_SLIDER_WIDGET`	`"ProductReviewsMiniSliderWidget"`
`QUESTIONS_FORM_MODAL_WIDGET`	`"QuestionsFormModalWidget"`
`QUESTIONS_FORM_MODAL_WIDGET_V2`	`"QuestionsFormModalWidgetV2"`
`QUESTIONS_LIST_WIDGET`	`"QuestionsListWidget"`
`QUESTIONS_LIST_WIDGET_V2`	`"QuestionsListWidgetV2"`
`REVIEWS_AI_SUMMARY_WIDGET`	`"ReviewsAISummaryWidget"`
`REVIEWS_DRAWER_WIDGET`	`"ReviewsDrawerWidget"`
`REVIEWS_DRAWER_WIDGET_V2`	`"ReviewsDrawerWidgetV2"`
`REVIEWS_EDIT_FORM_MODAL_WIDGET`	`"ReviewsEditFormModalWidget"`
`REVIEWS_EDIT_FORM_MODAL_WIDGET_V2`	`"ReviewsEditFormModalWidgetV2"`
`REVIEWS_FORM_MODAL_WIDGET`	`"ReviewsFormModalWidget"`
`REVIEWS_FORM_MODAL_WIDGET_V2`	`"ReviewsFormModalWidgetV2"`
`REVIEWS_GALLERY_MODAL_WIDGET`	`"ReviewsGalleryModalWidget"`
`REVIEWS_GALLERY_WIDGET`	`"ReviewsGalleryWidget"`
`REVIEWS_LIST_HEADER_WIDGET`	`"ReviewsListHeaderWidget"`
`REVIEWS_LIST_HEADER_WIDGET_V2`	`"ReviewsListHeaderWidgetV2"`
`REVIEWS_LIST_WIDGET`	`"ReviewsListWidget"`
`REVIEWS_LIST_WIDGET_V2`	`"ReviewsListWidgetV2"`
`REVIEWS_MODAL_WIDGET`	`"ReviewsModalWidget"`
`REVIEWS_PAGE_WIDGET`	`"ReviewsPageWidget"`
`REVIEWS_PAGE_WIDGET_V2`	`"ReviewsPageWidgetV2"`
`REVIEWS_PRODUCT_PAGE_WIDGET`	`"ReviewsProductPageWidget"`
`REVIEWS_PRODUCT_PAGE_WIDGET_V2`	`"ReviewsProductPageWidgetV2"`
`REVIEWS_SLIDER_WIDGET`	`"ReviewsSliderWidget"`
`REVIEWS_SLIDER_WIDGET_V2`	`"ReviewsSliderWidgetV2"`
`REVIEWS_STAR_RATING_WIDGET`	`"ReviewsStarRatingWidget"`
`REVIEWS_TESTIMONIALS_SLIDER_WIDGET`	`"ReviewsTestimonialsSliderWidget"`
`REVIEWS_TRUST_BADGE_WIDGET`	`"ReviewsTrustBadgeWidget"`
`REVIEWS_WIDGET`	`"ReviewsWidget"`
`REVIEWS_WIDGET_V2`	`"ReviewsWidgetV2"`

Wishlist Widgets

Enumeration Members

Enumeration Member	Value
`ADD_TO_WISHLIST_BUTTON_WIDGET`	`"AddToWishlistButtonWidget"`
`ADD_TO_WISHLIST_MODAL_WIDGET`	`"AddToWishlistModalWidget"`
`ADD_TO_WISHLIST_PRODUCT_CARD_WIDGET`	`"AddToWishlistProductCardWidget"`
`ADD_TO_WISHLIST_PRODUCT_CARD_WIDGET_V2`	`"AddToWishlistProductCardWidgetV2"`
`ADD_TO_WISHLIST_PRODUCT_PAGE_WIDGET`	`"AddToWishlistProductPageWidget"`
`ADD_TO_WISHLIST_PRODUCT_PAGE_WIDGET_V2`	`"AddToWishlistProductPageWidgetV2"`
`CREATE_WISHLIST_MODAL_WIDGET`	`"CreateWishlistModalWidget"`
`EDIT_WISHLIST_MODAL_WIDGET`	`"EditWishlistModalWidget"`
`GO_TO_WISHLIST_PAGE_HEADER_WIDGET`	`"GoToWishlistPageHeaderWidget"`
`SAVE_FOR_LATER_MODAL_WIDGET`	`"SaveForLaterModalWidget"`
`SAVE_FOR_LATER_MODAL_WIDGET_V2`	`"SaveForLaterModalWidgetV2"`
`SAVE_GUEST_ITEM_MODAL_WIDGET`	`"SaveGuestItemModalWidget"`
`SAVE_WISHLIST_MODAL_WIDGET`	`"SaveWishlistModalWidget"`
`SAVE_WISHLIST_MODAL_WIDGET_V2`	`"SaveWishlistModalWidgetV2"`
`SHARED_WISHLIST_PAGE_WIDGET`	`"SharedWishlistPageWidget"`
`SHARED_WISHLIST_PAGE_WIDGET_V2`	`"SharedWishlistPageWidgetV2"`
`WISHLIST_DRAWER_WIDGET`	`"WishlistDrawerWidget"`
`WISHLIST_DRAWER_WIDGET_V2`	`"WishlistDrawerWidgetV2"`
`WISHLIST_PAGE_WIDGET`	`"WishlistPageWidget"`
`WISHLIST_PAGE_WIDGET_V2`	`"WishlistPageWidgetV2"`
`WISHLISTS_ITEMS_TOTAL_COUNT_INLINE_WIDGET`	`"WishlistsItemsTotalCountInlineWidget"`
`WISHLISTS_MANAGE_APPROVERS_MODAL_WIDGET`	`"WishlistsManageApproversModalWidget"`
`WISHLISTS_WIDGET`	`"WishlistsWidget"`
`WISHLISTS_WIDGET_V2`	`"WishlistsWidgetV2"`

Example Usage

Here are some practical examples of styling different widgets:

<style id="gw-style-for-RewardsPopUpWidget">
    .gw-rd-popup-widget-launcher-btn.gw-btn {
        background-color: red !important;
    }
</style>

<style id="gw-style-for-ReviewsProductPageWidget">
    .gw-rv-product-page-widget__title .gw-rv-product-page-widget__title-text {
        font-size: 2rem;
    }
</style>

<style id="gw-style-for-AddToWishlistProductPageWidget">
    .gw-wl-add-to-wishlist-product-page-widget {
        padding: 10px 0;
    }
</style>

Overview​

How to use​

Rewards Widgets​

Enumeration Members

Reviews Widgets​

Enumeration Members

Wishlist Widgets​

Enumeration Members

Example Usage​

Overview

How to use

Rewards Widgets

Reviews Widgets

Wishlist Widgets

Example Usage