logo
Shopify Builds>Nudestix>Creator collab video listing driven by article metafields

Creator Collab Video Listing Driven by Article Metafields

A blog turned into a creator video index: each article is a creator record whose video address, platform and handle live in article metafields, rendered as a paginated grid of inline-playing cards that request no third-party iframe until someone presses play.

Shopify has no video resource and no content type for "a creator and their video." The only authorable container with a title, an image, body copy, a URL and pagination is a blog article, so this section treats each article as a creator record, carries the video address in custom.video_link, and renders every card as a poster that only instantiates its YouTube or Vimeo iframe when a shopper presses play.

The Problem

Shopify's content model has products, collections, pages, blogs and articles. It does not have a video, and it does not have "a creator." Nudestix publishes creator collaborations — a video, a handle, a short write-up and a shoppable edit per creator — and that content needed an index page where a shopper can watch without leaving the grid, and a creator team that could publish a new collab without a developer.

The obvious place to put a video is a page section with a URL setting, and that is exactly wrong here. A section setting is one video. A creator program is dozens, added over time by people who are not editing the theme, each needing its own URL, its own poster, its own copy and its own place in a list that grows. That is a content type, and the theme editor does not make content types.

The Constraint

There is no metaobject definition backing this, and no app. The container had to be something the admin already offers with a title, an image, body copy, a permanent URL and pagination — and the only thing that is all of those at once is a blog article. So an article had to be repurposed as a creator record, with the video address carried in article metafields rather than buried in body copy.

The videos live on two platforms, YouTube and Vimeo, with different embed URLs and different players. And a grid of ten creator cards must not request ten third-party iframes on load: no embed may be created until the shopper asks for it. The theme is Dawn 6.0.2, which ships a deferred-media contract for exactly that pattern, and reusing it was a condition rather than a preference — a second lazy-embed mechanism next to Dawn's would be two ways to do one thing.

What We Built

collab-listing.liquid paginates blog.articles ten at a time and renders each article as a video card.

The article as record. The card's video address comes from article.metafields.custom.video_link. A second article metafield names the hosting platform; the section downcases it and compares it to youtube, choosing a youtube.com/embed iframe with enablejsapi=1 when it matches and a player.vimeo.com iframe otherwise. The creator's handle renders from article.metafields.custom.author_name, prefixed with @. The write-up is the article's own body, stripped of markup and cut to a thirty-word excerpt. The article's featured image is the poster.

Deferred embedding. Both iframe variants are wrapped in Dawn's deferred-media contract: the card renders a poster button, and the iframe markup sits inside a <template> element that is only instantiated into the DOM when the button is pressed. Until then the browser has the poster image — served through an eight-step srcset from the article's featured image — and nothing from YouTube or Vimeo. A ten-card grid costs zero third-party requests until someone plays something.

Graceful downgrade. An article without a custom.video_link is still a creator record — it just has no video yet. Its card renders as an image link to the article: the play badge is suppressed, the <template> is not emitted, and the poster navigates to the article page.

Rhythm without configuration. Column widths alternate through {% cycle %} — two half-width cards, then three third-width cards, then repeat — so the grid reads as a magazine layout with no per-article layout field for the creator team to set or forget. Dawn's own pagination snippet handles paging.

Why This Way

Reusing blog articles gives the creator team the Shopify admin they already know: a title field, an image upload, a body editor, a publish date, a real URL, native pagination and article search. A metaobject-driven listing would have had to reimplement every one of those, and would have given each creator a record with no public URL of its own. Keeping Dawn's deferred-media contract rather than embedding iframes directly means the grid is images until it is asked to be video. {% cycle %} produces the alternating rhythm with no authored layout field to keep in sync.

The trade is that an article is not really a creator record, and the seams show in the admin. The creator team fills in metafields on an article editor designed for prose, the article's body doubles as the card's excerpt and the article page's content, and the blog is a blog — it appears in the store's RSS feed and in "blog" listings wherever the theme renders them. We took that because the alternatives were worse for the people doing the publishing: a metaobject has no URL and no pagination, and an app has no admin they already know.

Why Not an App

A video-gallery or creator-showcase app hosts the content outside Shopify, in the app's own database, and renders it through the app's own player and its own script. That breaks the thing this build depends on: every collab as a first-class article with a permanent URL that the SEO and email teams can already link to, index and track.

An app would also decide when to load its player. This grid defers every embed behind a poster until the shopper asks, using the theme's own deferred-media mechanism, and a vendor player rarely offers that choice on the theme's terms rather than its own.

Implementation Notes

  • The platform metafield is downcased and compared to youtube; anything else — including a blank value — selects the Vimeo embed, so the section always emits one of the two known players.
  • The YouTube embed carries enablejsapi=1, so the player exposes its API to the page once instantiated.
  • The poster image is the article's featured image, served with an eight-step srcset ladder rather than one size.
  • Column widths alternate through {% cycle %} across col-md-6, col-md-6, col-md-4, col-md-4, col-md-4, so the two-then-three rhythm repeats every five cards.
  • The excerpt is the article body passed through strip_html and truncated to thirty words, so the creator team writes one body and gets both the card copy and the article page from it.
  • The section is placed on both page.collab-listing.json and blog.collab.json, so the same grid serves a landing page and the blog's own index.

Edge Cases

  • An article with no custom.video_link renders as an image link to the article, with the play badge and the <template> both suppressed.
  • An article with no featured image falls back to placeholder_svg_tag, so a half-finished creator record renders a placeholder rather than a broken card.
  • custom.author_name is blank-guarded, so the @handle line only appears when a handle has been set.
  • Pagination markup renders only when paginate.pages is greater than one; a program with fewer than eleven creators gets no empty pager.
  • With JavaScript disabled, the <noscript> path renders a plain anchor over an aspect-ratio-padded poster, so the card is still a link to the article and still holds its shape.

Platform Primitives Used

  • metafields — article metafields hold the video address, the platform and the creator handle; the article's own fields hold everything else.
  • liquid-schema-settings — the section's schema exposes its own settings; the per-creator content deliberately lives on the article rather than in blocks.
  • deferred-media — Dawn's poster-and-<template> contract, reused so no iframe exists until it is asked for.
  • liquid-pagination — blog.articles paginated ten at a time through Dawn's own pagination snippet.

Integrations in Play

  • YouTube — one of the two embed targets; the iframe is instantiated from a <template> on play, with enablejsapi=1.
  • Vimeo — the other embed target, and the fallback when the platform metafield does not name YouTube.

Where It Runs

Two templates on two surfaces: blog.collab, the blog index for the collab blog, and page.collab-listing, a landing page that mounts the same section. One section and one card serve both entry points, so a creator published to the blog appears on the landing page in the same breath, with no second listing to maintain.

What This Demonstrates

  • Editorial blog and content hub — the primary capability: a Shopify blog turned into a creator index, with metafields as the schema.
  • Video and shoppable media modules — YouTube and Vimeo handled in one section with deferred loading and poster frames.
  • UGC galleries and shoppable social — creator content with @handle attribution presented as a merchandising surface.

How We Know

One Liquid section from the theme, roughly 280 lines. Documented from the code; no client-side record of the decision survives. The content-modelling choice — a blog as a creator CMS, with metafields as the schema — is legible in the section, but who asked for it and how many collab articles are live are not in this corpus, and we have not claimed either.

Related Builds

The Buy-vs-Build Question

A creator-showcase app buys hosting, a player and an admin, and takes the content out of Shopify to do it. Building on the blog bought real URLs, native pagination and an admin the team already used, and cost an article editor doing a job it was not designed for. How far the blog can be stretched before an external system wins is the subject of the editorial hub and blog at scale decision page.

Provenance & Evidence

  • Client: Nudestix — nudestix.com
  • Surfaces: Blog, landing page
  • Templates served: two — blog.collab, page.collab-listing
  • Complexity: Medium
  • Attribution: Deploi-authored. The section and the metafield convention are ours. It runs in a theme built on Dawn 6.0.2 and reuses Dawn's deferred-media and pagination snippets unchanged.
  • Status: Live, verified 2026-09-06
  • Evidence: One Liquid section from the theme
  • Confidence: Moderate — documented from the code; no client-side record of the decision survives
  • Primary capability: Editorial blog and content hub

Want a Creator Program Your Team Can Publish Without a Ticket?

You dream it. We build it. If your creator content lives in a spreadsheet and a vendor's dashboard, Contact us today and we'll show you what it looks like as first-class Shopify content.

More builds

Metafield-driven editorial article template (TSB blog)

A long-form article template assembled entirely from article metafields — deck, takeaways, science callouts, references, FAQ, author credentials, related reading and in-content commerce — in a single section with no theme-editor settings, so an editor never touches the theme to publish a fully structured post.

Three Ships

Accessible play/pause web component for autoplaying hero video

A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.

Nudestix

Deferred LyveCom shoppable-video mounting on the product page

An integration layer that loads LyveCom's widget script once per page and mounts each carousel only when its container is about to enter the viewport — so a paid shoppable-video app stays off the product page's first paint, and a theme-editor reload doesn't mount it twice.

LUS Brands

Metafield-driven two-level FAQ accordion grafted into a help-center app's shell

The help-center page kept the app's shell. The answers inside it moved into a Shopify page metafield, and a two-level accordion we wrote renders them — deep-linkable, keyboard-operable and reusable elsewhere in the theme.

LUS Brands