Adding a block to your theme

Six of the Hype Discounts blocks are placed in your theme by hand: the gift banner, progress bar, product banner, product price, volume selector, and volume table. Each one carries an App block ID that ties the theme placement to the campaign. Copy the ID from the Hype admin, add the block in the theme editor, and paste the ID in.

Add the block

1. Open the campaign in Hype Discounts and go to its Blocks page.
2. Choose the Storewide or Product page tab and click Add campaign block.
3. Pick the block type. Only the block types your discount type supports are listed.
4. Under Step 1, click Copy next to App block ID.
5. Under Step 2, click Click here to open your theme editor's Products page in a new tab. The link opens the theme you selected in Hype's settings.
6. In the theme editor, click Add block inside the section where the block should appear, and pick the Hype block named in Step 2 — for example Hype: Gift Banner.
7. Under Step 3, paste the App block ID into the block's App identifier field in the theme editor.
8. Click Save in the theme editor.
9. Return to Hype and click Next. Hype checks your theme for a block carrying that identifier before it lets you edit the block's wording.

The theme editor link always opens the Products template, because that is where most Hype blocks belong. You can add the block to a different template or section instead — drag it where you want it and paste the same App block ID.

"We're unable to locate an App Block with this ID"

When you click Next, Hype reads the templates of your selected theme and looks for a block whose App identifier matches. If it finds none, you see:

We're unable to locate an App Block with this ID in your theme. Please make sure the App Block has been added and saved in the theme editor, then try again. If the issue continues, our support team will be happy to help.

Work through these in order:

1. Confirm you clicked Save in the theme editor. An unsaved block does not exist yet as far as Hype is concerned.
2. Confirm you pasted the ID into App identifier and not into another field.
3. Confirm you edited the same theme Hype is checking. Hype checks the theme chosen under Settings → Theme; if that is blank it checks your live theme.
4. Check for stray spaces at the start or end of the pasted value.

You can continue past the warning and save the block's settings, but nothing will render on the storefront until the identifiers match.

Demo and trial themes

If the selected theme is a demo or trial theme, Hype cannot read its templates. It shows an information banner saying the block cannot be verified, and it treats the check as passed. Make sure the identifier is correct yourself, or use custom code.

Theme upgrade required

App blocks exist only in Online Store 2.0 themes, which store templates as JSON files. When Hype checks your theme and finds no JSON template, Step 2 reads Theme upgrade required to use app blocks. and the deep link is disabled. A warning banner names the theme: Your theme "X" does not support app blocks.

Either move to an Online Store 2.0 theme, or tick I want to use it in my custom code in Step 1. That skips the theme editor entirely: you place the matching custom element in your Liquid yourself and pass the App block ID to it.

Orphan blocks

A Hype block that sits in your theme but no longer matches any campaign is an orphan. The App Blocks card on the Blocks page opens a list of every active Hype block in the theme with its template. An orphan is flagged:

This block is not linked to any campaign and won't be visible on your storefront. You can remove it from the theme editor.

Orphans are harmless — they render nothing — but they clutter your theme. Click Edit on the row to open that block in the theme editor and delete it. Orphans usually appear after you delete a campaign, or after you paste a new App block ID over an old one.

Related

• Storefront blocks overview
• Variables you can use in block text