Storefront blocks overview

Storefront blocks are the parts of Hype Discounts your shoppers actually see: the announcement bar, the pop-up toast, the gift banner, the cart progress bar, the product banner, the discounted price, and the two volume discount blocks. You configure the wording in the Hype admin, and you place the visual block in your theme through the Shopify theme editor.

The app embed comes first

Nothing renders until the Hype: Discounts app embed is turned on. Go to Online Store → Themes → Customize → App embeds and enable Hype: Discounts. That embed loads the Hype script on every page of your storefront and passes your campaign data to it.

The Hype: Discounts embed has these settings:

• Enable debug logs — off by default. Turn it on to print Hype's diagnostic messages to the browser console.
• API Proxy link — defaults to /apps/hype. Leave it alone unless support asks you to change it.
• Hide Decimals for Whole Numbers — off by default. When on, a whole-number price shows as $10 instead of $10.00.
• Custom CSS and Custom JS — optional code that loads whenever Hype is enabled.

Two more blocks are app embeds rather than section blocks, because they float above the page rather than sitting inside it: Hype: Toast and Hype: Announcement Bar. Enable those in App embeds too, and only when a campaign uses them.

In the Hype admin, the campaign's Blocks page shows an App Embeds card ("You have x/y embeds active") and an App Blocks card so you can check the state of both without leaving the app.

The blocks that exist

Blocks are split across two tabs in the admin, Storewide and Product page, and each block type is only offered for the discount types it can render.

A campaign can have only one announcement bar and one toast. Adding a second of either shows Block type already exists!

Section blocks need an App block ID and an Online Store 2.0 theme

The six app blocks in the table above are section blocks. They are placed inside a section of a template, so Hype has to know which placement belongs to which campaign. That link is the App block ID: the admin generates one, you paste it into the block's App identifier field in the theme editor, and Hype matches them up. The full walkthrough is in Adding a block to your theme.

App blocks only work on Online Store 2.0 themes — themes that store their templates as JSON files. If your theme is an older Liquid theme, the admin checks it when you open the block setup and shows Theme upgrade required to use app blocks. Your options are to update to an Online Store 2.0 theme or to tick I want to use it in my custom code and place the element yourself.

The announcement bar and the toast do not need an App block ID. They are injected into the page by their app embeds when a campaign becomes active.

The placement anchor

The theme editor also lists a block called Hype: Placement anchor with a single setting, Placement name (default: Hype placement). Its purpose is to mark an exact spot in your theme that an app's Placement settings can point at. As of today this anchor is used by Hype Bundles; Hype Discounts campaign blocks are still positioned by where you drop them in the theme editor, so you do not need to add an anchor for a discount campaign.

Related

• Adding a block to your theme
• Variables you can use in block text