Why does the offer only appear after I refresh the cart drawer?

Because your theme's cart drawer redrew its contents without telling Hype, or changed the cart in a way Hype cannot see. Hype's blocks update themselves whenever the cart changes; a drawer that renders its own HTML on top of them, or that updates the cart through its own code path, leaves the block showing what it had a moment ago until the page or the drawer is drawn again.

How Hype knows the cart changed

Hype watches the browser for calls to Shopify's cart endpoints — /cart/add.js, /cart/update.js, /cart/change.js and /cart/clear.js, with or without the .js. When it sees one, it refetches the cart and re-renders every Hype block on the page: the progress bar recalculates, the gift banner reopens, the free gift is added.

Themes that use Shopify's standard cart endpoints work with no configuration. Two kinds do not:

• Drawers that do not use those endpoints. A drawer built on the Storefront API, or one that posts to its own app endpoint, changes the cart invisibly. Hype has nothing to react to.
• Drawers that redraw themselves afterwards. The theme fetches fresh drawer HTML from Shopify and replaces everything inside, including whatever Hype had rendered.

The free gift case

When a gift is auto-added, Hype adds it to the cart itself, after your theme has already drawn the drawer. A theme that redraws the drawer only in response to its own add-to-cart code has no reason to redraw for Hype's, so the gift line is there in the cart but not on screen until the drawer is reopened or the page reloads. The order total is correct throughout, and the gift is in the cart at checkout.

What to do

1. Reproduce it once and note whether the cart page (/cart) shows the offer correctly. If it does, the problem is the drawer specifically.
2. Contact support with your store URL, your theme name, and whether the drawer is part of the theme or a separate app. There is a small script we can add to the Custom JS field of the Hype: Discounts app embed that re-renders the drawer after Hype changes the cart. It has to be matched to your theme, which is why it is not a setting.
3. If your drawer is a custom one built for your store, send us 10 to 15 lines of the Liquid around it, or a preview link to a duplicate theme.

One thing to avoid

Do not paste Hype blocks into a drawer built out of custom elements without testing the result. We have seen a theme drop all of its cart line items — the subtotal stays, the products vanish — when a block was placed inside its drawer markup. Test on a duplicate theme first.

Related

• Adding a block to your theme
• Why isn't my free gift added to the cart automatically?