HTML to Liquid Converter

Production Shopify · Broadcast as lab

Ship story-driven Broadcast sections without breaking narrative pacing

Broadcast clients buy with narrative—video heroes that play without prompting, story chapters that unfold without jarring breaks, and campaign copy that refreshes weekly. This guide is about building custom sections that preserve storytelling momentum, not dumping hardcoded video iframes into a content-first theme and breaking accessibility on mobile.

Production implementation guide · Updated 2026-08-03

Start here if your client runs Broadcast

Use this guide when the storefront's merchandising model depends on editorial pacing—Shopify Broadcast or a fork that still treats homepage as a narrative canvas, not a utilities grid.

This guide fits when

  • Content brands, food, lifestyle, or publishing stores on Broadcast who lead with video and editorial copy
  • Campaign HTML or Figma with video heroes, multi-part story layouts, and seasonal copy that changes monthly
  • Handoffs where content teams manage launch messaging without developer access for every refresh
  • Agencies paid to keep custom work feeling native to Broadcast's story-first editorial rhythm

Choose a different guide when

  • Dawn / utility-first builds — different content model and different guide
  • Prestige / luxury type-scale themes where typography > video (use the Prestige guide)
  • App embeds and checkout extensibility (different packaging)
  • Static marketing pages that never appear in the theme editor

Video settings vs hardcoded iframes (why Broadcast demands the former)

On Broadcast, hardcoded iframes are a handoff failure. Clients refresh campaign videos monthly; they need video_url settings and controls, not embed code buried in Liquid comments. Raw iframe embeds also bypass accessibility, poster fallbacks, and mobile autoplay policies that Broadcast's design assumes.

Prefer video_url settings tied to external_video_url filters, or hosted video objects. Expose autoplay, loop, and mute as toggles the merchant controls—never assume silent autoplay is always acceptable. When the brand changes direction on motion mid-campaign, your schema must let them disable it without a deploy.

video_url setting with accessible fallback poster

{% if section.settings.video_url != blank %}
  <div class="broadcast-hero__media">
    {{
      section.settings.video_url
      | external_video_url
      | external_video_tag:
        autoplay: section.settings.autoplay,
        loop: section.settings.loop,
        muted: section.settings.muted,
        controls: section.settings.show_controls
    }}
    <noscript>
      {% if section.settings.poster_image != blank %}
        {{ section.settings.poster_image | image_url: width: 2400 | image_tag }}
      {% endif %}
    </noscript>
  </div>
{% elsif section.settings.poster_image != blank %}
  <div class="broadcast-hero__poster">
    {{
      section.settings.poster_image
      | image_url: width: 2400
      | image_tag:
        loading: 'eager',
        sizes: '100vw',
        widths: '800, 1200, 1600, 2400'
    }}
  </div>
{% endif %}

Poster fallback for JS-off or autoplay-blocked environments. external_video_url handles YouTube and Vimeo; for hosted video use section.settings.video.sources.

Story block pacing (when repetition beats flat settings)

Broadcast narratives often unfold in chapters: intro video, three story beats, closing CTA. That is block territory. Each chapter needs its own heading, supporting copy, optional media, and link—flat settings scale poorly past two segments.

Story blocks let merchants reorder narrative beats, disable one chapter mid-campaign, or A/B test which story lands third. Name block types clearly: 'story_chapter' or 'narrative_beat,' not 'item' or 'card.' Seed three chapters in the preset so the editor demonstrates pacing on first insert.

Story chapter blocks with optional media per beat

<div class="broadcast-story">
  {% for block in section.blocks %}
    <article class="broadcast-story__chapter" {{ block.shopify_attributes }}>
      {% if block.settings.chapter_media != blank %}
        <div class="broadcast-story__media">
          {{
            block.settings.chapter_media
            | image_url: width: 1600
            | image_tag: loading: 'lazy', sizes: '(min-width: 750px) 50vw, 100vw'
          }}
        </div>
      {% endif %}
      <div class="broadcast-story__copy">
        {% if block.settings.chapter_heading != blank %}
          <h3 class="broadcast-story__heading">{{ block.settings.chapter_heading }}</h3>
        {% endif %}
        {% if block.settings.chapter_text != blank %}
          <div class="broadcast-story__body">{{ block.settings.chapter_text }}</div>
        {% endif %}
        {% if block.settings.chapter_link_label != blank %}
          <a href="{{ block.settings.chapter_link }}" class="broadcast-story__link">
            {{ block.settings.chapter_link_label }}
          </a>
        {% endif %}
      </div>
    </article>
  {% endfor %}
</div>

shopify_attributes critical—merchants click a chapter in the sidebar and expect the correct row to highlight on canvas.

Story chapter schema with seeded narrative preset

"blocks": [
  {
    "type': 'chapter",
    "name': 'Story chapter",
    "settings": [
      { "type": "text", "id": "chapter_heading", "label": "Chapter heading" },
      { "type": "richtext", "id": "chapter_text", "label": "Chapter body copy" },
      { "type": "image_picker", "id": "chapter_media", "label": "Chapter image or still" },
      { "type": "text", "id": "chapter_link_label", "label": "Chapter link label" },
      { "type": "url", "id": "chapter_link", "label": "Chapter link destination" }
    ]
  }
],
"presets": [
  {
    "name': 'Story chapters",
    "blocks": [
      {
        "type': 'chapter",
        "settings": {
          "chapter_heading': 'Sourced from small farms",
          "chapter_text': '<p>Every ingredient begins with a relationship.</p>"
        }
      },
      {
        "type': 'chapter",
        "settings": {
          "chapter_heading': 'Roasted in small batches",
          "chapter_text': '<p>We roast twice a week to keep profiles fresh.</p>"
        }
      },
      {
        "type': 'chapter",
        "settings": {
          "chapter_heading': 'Shipped within 48 hours",
          "chapter_text': '<p>Your order leaves the roastery within two days.</p>"
        }
      }
    ]
  }
]

Three seeded chapters with on-brand copy teach repetition and pacing immediately—empty block lists confuse Broadcast merchants.

When to choose Broadcast instead of Dawn

Dawn is the OS 2.0 reference—fast, accessible, minimal styling. Broadcast is Dawn's narrative cousin: it trades Dawn's utilitarian restraint for editorial pacing, video-led heroes, and content-first layouts. Choose Broadcast when the brand's competitive edge is storytelling, not product density.

Technically, both are OS 2.0 section-based themes with JSON templates. The difference is design contract: Dawn expects compact grids and fast SKU browsing; Broadcast expects video heroes, scrolling chapters, and copy that sells the *why* before the *what*. If your client's homepage is three videos and four paragraphs before a product appears, that is Broadcast territory.

Figure — Broadcast vs Dawn decision matrix
  • Choose Broadcast: brand leads with video narratives, editorial copy is the primary merchandising tool, homepage tells a story before listing products, content teams refresh campaign messaging weekly.
  • Choose Dawn: product catalog is the hero, fast SKU browsing matters more than narrative, homepage is a grid of collections and quick CTAs, technical speed and lighthouse scores are launch blockers.
  • Fork consideration: if you need Dawn speed with Broadcast narrative pacing, expect custom CSS and layout work to bridge—neither theme's defaults will fit perfectly.

Theme choice is a content model decision, not a subjective style preference.

Scoped CSS for Broadcast without overriding story rhythm

Broadcast's design language is generous vertical spacing and restrained type. Custom CSS must scope under #shopify-section-{{ section.id }} to avoid leaking, but scoping alone is not enough—hardcoded tight margins or aggressive heading sizes will make your section feel imported, not native.

Limit CSS to layout mechanics: flexbox/grid for chapter arrangement, media aspect control, and spacing toggles exposed as settings. Do not rebuild Broadcast's type scale in your scoped block—inherit it. If the brand demands a one-off display size, document it in the schema as an intentional exception so the next developer does not 'fix' it.

Layout-only scoped CSS—no type override

{%- style -%}
  #shopify-section-{{ section.id }} .broadcast-story {
    display: grid;
    gap: {{ section.settings.chapter_gap }}px;
    padding-block: {{ section.settings.section_padding }}px;
  }
  #shopify-section-{{ section.id }} .broadcast-story__media {
    position: relative;
    aspect-ratio: {{ section.settings.media_ratio }};
    overflow: hidden;
  }
  #shopify-section-{{ section.id }} .broadcast-story__media img,
  #shopify-section-{{ section.id }} .broadcast-story__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
{%- endstyle -%}

Spacing and aspect ratio as merchant settings. Type size, line-height, and font-family inherited from Broadcast defaults.

Autoplay, mute, and accessibility (production video mistakes)

Broadcast's narrative power comes from video, but autoplaying video is also an accessibility and usability minefield. Silent autoplay can work on immersive hero bands; autoplaying *with sound* violates WCAG and angers mobile users. Always expose mute and autoplay as schema toggles, never assume one setting fits all campaigns.

Captions and transcripts are not optional on content-first commerce. If the video carries narrative weight (product story, founder message, ingredient sourcing), the copy must be available to screen readers and users in sound-off environments. Provide a richtext setting for video transcript or summary beneath the player.

Accessible video schema with transcript fallback

{
  "type': 'video_url",
  "id': 'hero_video",
  "label': 'Hero video URL",
  "accept": ["youtube", "vimeo"]
},
{
  "type': 'image_picker",
  "id': 'video_poster",
  "label': 'Video poster image (fallback)"
},
{
  "type': 'checkbox",
  "id': 'autoplay",
  "label': 'Autoplay video on load",
  "default": false,
  "info': 'Autoplay requires muted or mobile browsers will block."
},
{
  "type': 'checkbox",
  "id': 'muted",
  "label': 'Mute video by default",
  "default": true
},
{
  "type': 'checkbox",
  "id': 'show_controls",
  "label': 'Show video controls",
  "default": true
},
{
  "type': 'richtext",
  "id': 'video_transcript",
  "label': 'Video transcript or summary (for accessibility)"
}

Autoplay defaults to false; muted defaults to true. Transcript field is always visible in the editor so accessibility is not forgotten.

Figure — Broadcast video autoplay decision tree
  • Autoplay muted + controls visible = safe for hero bands, passes accessibility if transcript provided.
  • Autoplay unmuted = mobile Safari blocks it; desktop users startled; WCAG violation if no captions.
  • No autoplay + poster + controls = safest for narrative sections below fold.
  • No poster fallback = blank hero on slow networks or autoplay block.

Narrative video is a brand asset; accessibility is not negotiable on content-first stores.

Example: narrative video hero with editable overlay

Video heroes are signature Broadcast requests: full-viewport media with overlay heading, supporting paragraph, and CTA. Build it with external_video_url or hosted video object, expose autoplay and mute as toggles, and keep overlay copy as flat settings—it is not repeating content.

Video hero with conditional autoplay and poster

<section class="broadcast-hero">
  <div class="broadcast-hero__media">
    {% if section.settings.hero_video != blank %}
      {{
        section.settings.hero_video
        | external_video_url
        | external_video_tag:
          autoplay: section.settings.autoplay,
          loop: true,
          muted: section.settings.muted,
          controls: section.settings.show_controls,
          class: 'broadcast-hero__video'
      }}
    {% elsif section.settings.poster_image != blank %}
      {{
        section.settings.poster_image
        | image_url: width: 2400
        | image_tag: loading: 'eager', class: 'broadcast-hero__poster'
      }}
    {% endif %}
  </div>
  {% if section.settings.heading != blank or section.settings.text != blank %}
    <div class="broadcast-hero__overlay">
      {% if section.settings.heading != blank %}
        <h1 class="broadcast-hero__heading">{{ section.settings.heading }}</h1>
      {% endif %}
      {% if section.settings.text != blank %}
        <p class="broadcast-hero__text">{{ section.settings.text }}</p>
      {% endif %}
      {% if section.settings.cta_label != blank %}
        <a href="{{ section.settings.cta_link }}" class="broadcast-hero__cta">
          {{ section.settings.cta_label }}
        </a>
      {% endif %}
    </div>
  {% endif %}
</section>

Overlay unmounts when heading and text both blank—lets merchants toggle between pure video and narrated hero without layout breaks.

Practice on a Broadcast (or Broadcast-fork) theme

Do this in a Broadcast copy or close fork before using any generator. The point is narrative judgment—detecting when video settings or story pacing fight the theme—not file generation speed.

  1. 01

    Audit a native Broadcast video section

    Open a native Broadcast hero or story section. Note how video is configured, whether autoplay is default, and how overlay copy scales. Write three rules your custom section must not violate.

  2. 02

    Build the video hero

    video_url setting, autoplay/mute toggles, poster fallback, overlay copy as settings, transcript richtext. Test on mobile with autoplay blocked.

  3. 03

    Build the story chapters section

    Blocks-based, ≥3 seeded chapters, shopify_attributes, blank-safe media and copy. Reorder in the editor and confirm DOM follows.

  4. 04

    Break it on purpose

    Autoplay unmuted on iOS, clear all chapter copy, remove poster image—document what fails and how users experience it.

  5. 05

    Handoff rehearsal

    Insert both sections from Add section on a clean template and walk through a five-minute merchant script: change video, reorder chapters, toggle autoplay.

Accelerate drafts after you can explain the output

Once you can defend Broadcast's video settings, story block pacing, and accessibility discipline by hand, the converter can speed up first Liquid drafts from campaign HTML. You still owe autoplay toggles, blank-safe chapters, and transcript settings before handoff.

Supporting acceleration only — Broadcast quality is judged by narrative flow and accessibility, not export speed.

Open converter workspace

Continue studying for story-driven Shopify delivery

Next reading for teams shipping on content-first Shopify themes—not a list of keyword landings.

Beginner

Language and section mental models before narrative constraints.

Intermediate

Schema craft and block-based narrative flows.

Advanced

Delivery judgment for content-first brands.

Editorial review

Reviewed by the HTML to Liquid Converter team

Dhruv Goyani, Shopify Developer at HTML to Liquid Converter

Dhruv Goyani

3 years web design + 3 years Shopify development experience

LinkedIn profile →
Nishad Kikani, Lead Shopify Developer at HTML to Liquid Converter

Nishad Kikani

2 years web design + 6 years Shopify development experience

LinkedIn profile →

Content is reviewed by the HTML to Liquid Converter Shopify development team before publication. Technical accuracy is validated against current Shopify Online Store 2.0 conventions and active client theme work.

Last updated:

Questions or corrections? Contact us.