How do I add custom CSS and JavaScript safely?

Wishlist Hero takes custom code through app owned surfaces, not edited theme files, so your customization survives theme updates and reinstalls. This guide shows where each kind of customization belongs and the patterns that keep it maintainable.

Where custom code goes

Surface	What to put there
Additional HTML in the App Configuration embed	`<style>` and `<script>` blocks that should load on every page
Theme block CSS settings (per block)	Styling scoped to one block’s output
The languages and appearance settings	All text and color changes, no code needed

All three live with the app, so publishing a new theme or letting Shopify update your theme never deletes them. This is the update safe pattern: avoid editing theme.liquid or snippet files for wishlist customization.

A first example

Restyle the added state and the popup header from one place:

<style>
  .wishlisthero-quick-view.is-active svg { fill: #7c3aed; }
  .wishlist-hero-popup h2 { letter-spacing: 0.02em; }
</style>

Paste it into Additional HTML and save; the storefront picks it up on the next page load. Target the app’s own classes rather than theme classes so your rule keeps working when the theme changes.

Runtime hooks

The storefront exposes small window level hooks for values code must compute:

Hook	Purpose
`window.WH_CurrencyDisplayStyle`	Override how prices format
`window.WH_CurrencyReplacements`	Map or replace currency codes
`window.WH_CurrencyForceCustomLocale`	Force a number locale
`window.WH_CurrencyFollowUserLocale`	Follow the shopper locale for formatting
`window.WishlistHero_CustomDateFormatFunction`	Your own function for the “added on” dates
`window.WH_AsyncButtonsMode`	Batch and defer button detection on heavy pages

Set them in a script in Additional HTML before the app finishes loading.

Working with theme updates

After a theme update, the app re-syncs its bookkeeping on the theme update webhook; your app owned code needs no action
If the update changed product card markup, re-check selectors in the theme blocks; your CSS classes may need a selector update, but the code itself stays in place
Re-run the checks in Verify your installation after any theme surgery

Debugging tips

Keep one <style> block with clearly commented sections instead of many untagged blocks
Scope every rule with the app’s prefixes so future app markup cannot collide with your styles
Hard refresh after saving: settings publish to the storefront within moments, but the browser may cache the old config