Style guide. Copy from here.

Video · click mode (real customer footage)

The big one

Real Obalus owner

Video · auto mode (muted loop in view)

Same rod. Same lure. Same man.

Image · hdzb-img with ratio 4x5

Real Obalus owner

Real customer photos (bogo-19/20/24/22) only with a "Real Obalus owner(s)" caption. AI lifestyle images are staged — never captioned as customers.

{% render 'hdzb-img', img: section.settings.image, alt: 'Angler with a bass', ratio: '4x5', eager: true, sizes: '(min-width: 990px) 560px, 100vw' %}
{% render 'hdzb-img', asset: 'bogo-19.jpg', alt: '…', ratio: '1x1' %}
{% assign vid = 'bogo-big-one.mp4' | file_url %}   ← filters do NOT work inside render arguments; assign first
{% render 'hdzb-video', src: vid, poster: section.settings.poster, ratio: '4x5', mode: 'click', caption: 'The big one' %}
{% render 'hdzb-video', src: section.settings.video_url, ratio: '9x16', mode: 'auto' %}
<div class="hdzb-ratio hdzb-ratio--16x9"><img src="…" alt="…" loading="lazy"></div>

Every new section: <div class="hdzb"><section class="hdzb-sec …"><div class="hdzb-wrap">. Vertical padding 56px (72px desktop) comes from --pt/--pb; the standard schema settings bg, pad_top, pad_bottom, rule, anchor are read by hdzb-section-open. Alternate white / light-grey / peach. Black only for a short, loud block.

{% render 'hdzb-section-open', s: section.settings, id: section.id, wrap: 'text' %}
  <h2 class="hdzb-h2">{{ section.settings.heading }}</h2>
  …
{% render 'hdzb-section-close' %}

{% schema %}
{ "settings": [
  { "type": "select", "id": "bg", "label": "Background", "default": "white", "options": [
    { "value": "white", "label": "White" }, { "value": "grey", "label": "Light grey" }, { "value": "peach", "label": "Peach" }, { "value": "black", "label": "Black" } ] },
  { "type": "range", "id": "pad_top", "label": "Top padding", "min": 0, "max": 96, "step": 8, "default": 56 },
  { "type": "range", "id": "pad_bottom", "label": "Bottom padding", "min": 0, "max": 96, "step": 8, "default": 56 },
  { "type": "checkbox", "id": "rule", "label": "2px black top rule", "default": false },
  { "type": "text", "id": "anchor", "label": "Anchor id" }
] }
{% endschema %}

HDZB.money(5999)                         // "$59.99" (formatted by Shopify's rules for the active currency)
HDZB.money(6000, { trim: true })         // "$60"
HDZB.usd(10000)                          // $100 in active-currency cents (uses Shopify.currency.rate)
HDZB.cart.get()                          // → cart JSON, fires 'hdzb:cart'
HDZB.cart.add(42858033381582)            // one item, opens UpCart
HDZB.cart.add([{ id: 42646296854734, quantity: 2 }, { id: 42858033381582, quantity: 1 }], { open: true, toast: 'Added' })
HDZB.cart.change(line, qty) / .remove(line) / .update({ note: '…' }) / .clear()
HDZB.cart.setDiscount('SETUP10')          // → { applied: true|false, code, cart }  (POST /cart/update.js { discount })
HDZB.cart.clearDiscount()
HDZB.cart.open() / .close() / .refresh() / .count() / .state
HDZB.setup.code / .amountCents / .apply() / .clear()   // thin alias of window.HDZS (bundle engine, Theme settings → Bundle deals)
HDZB.checkout({ discount: 'SETUP10' })   // fallback: /checkout?discount=CODE
HDZB.toast('Added to cart', { kind: 'ok' | 'err', ms: 2600 })
HDZB.lockScroll(true|false) · HDZB.trapFocus(el, { onEscape, initial, restore })
HDZB.menu.open() / .close() · HDZB.search.open() / .close()
HDZB.init(scope)                         // rails, steppers, radios, videos, sticky bars, [data-hdzb-add] buttons, image fade, reveal in new DOM
HDZB.initReveal(scope) · HDZB.bump(el) · HDZB.reducedMotion() · HDZB.dropdown.close()   // v1.1
HDZB.interest.get() / .score(handle) / .flagged() / .apply(scope) / .reset()   // v1.2 per-visitor "Low in stock" (owner decision 01.10)
<article data-hdzb-lowable data-handle="…"> … <div data-hdzb-low-slot></div>   // v1.2: your own card gets the chip too
HDZB.on('hdzb:cart', ({ cart, source }) => …)     // also window events: hdzb:cart, hdzb:cart:added, hdzb:cart:error, hdzb:discount

// Declarative:
<button data-hdzb-add data-id="VARIANT_ID" data-qty="1" data-open="false" data-toast="Added" data-busy-text="Adding…" data-fallback="/products/x">
<button data-hdzb-add data-items='[{"id":42646296854734,"quantity":2},{"id":42858033381582,"quantity":1}]'>
<div data-hdzb-rail> · <div data-hdzb-qty> · <div data-hdzb-radios> · <div data-hdzb-video data-src data-mode="auto|click"> · <div data-hdzb-sticky data-target="#buybox">