Skip to content

Instantly share code, notes, and snippets.

@Accudio

Accudio/1-README.md

Last active August 13, 2026 16:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Accudio/e8c0bb8d3ffcfb64fd2700b236f821d9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Accudio/e8c0bb8d3ffcfb64fd2700b236f821d9 to your computer and use it in GitHub Desktop.
Download ZIP
MOCAP Templating Demo
Raw
1-README.md

Mocap Templating demo

Files

  • 2-product-card.liquid — the source component.
  • 3-products.json — example data for four products.
  • 4-product-card.html — static output of the template for one product.
  • 5-collection.html — a full page (header, 12 cards, footer).
Raw
2-product-card.liquid
<article class="product-card">
<a class="product-card__link" href="{{ product.url }}">
<div class="product-card__media">
{% render "image", url: product.image.url, alt: product.image.alt %}
{% if product.price.compareAtMin %}
<span class="product-card__badge product-card__badge--sale">Sale</span>
{% elsif product.availability == "sold_out" %}
<span class="product-card__badge product-card__badge--sold-out">Sold out</span>
{% endif %}
</div>
<div class="product-card__info">
<h3 class="product-card__title">{{ product.title }}</h3>
<p class="product-card__price">
{% if product.price.min != product.price.max %}
<span class="product-card__price-from">From £{{ product.price.min }}</span>
{% elsif product.price.compareAtMin %}
<span class="product-card__price-current">£{{ product.price.min }}</span>
<span class="product-card__price-compare">£{{ product.price.compareAtMin }}</span>
{% else %}
<span class="product-card__price-current">£{{ product.price.min }}</span>
{% endif %}
</p>
{% if product.availability == "sold_out" %}
<p class="product-card__stock">Currently unavailable</p>
{% endif %}
</div>
</a>
</article>
Raw
3-products.json
{
"products": [
{
"id": "prod_001",
"slug": "screw-end-cap",
"title": "Screw End Cap",
"description": "Threaded plastic end cap for sealing tube and pipe ends.",
"url": "/products/screw-end-cap/",
"availability": "in_stock",
"price": {
"currency": "GBP",
"min": 0.03,
"max": 0.05,
"compareAtMin": null
},
"image": {
"url": "https://cdn.example.com/images/screw-end-cap.jpg",
"alt": "Screw end cap, threaded plastic"
},
"variants": [
{
"id": "var_001",
"title": "M6",
"options": { "size": "M6" },
"sku": "SEC-M6",
"price": 0.03,
"compareAtPrice": null,
"available": true
},
{
"id": "var_002",
"title": "M8",
"options": { "size": "M8" },
"sku": "SEC-M8",
"price": 0.04,
"compareAtPrice": null,
"available": true
},
{
"id": "var_003",
"title": "M10",
"options": { "size": "M10" },
"sku": "SEC-M10",
"price": 0.05,
"compareAtPrice": null,
"available": true
}
]
},
{
"id": "prod_002",
"slug": "screw-insert",
"title": "Screw Insert",
"description": "Moulded plastic insert with internal threading.",
"url": "/products/screw-insert/",
"availability": "in_stock",
"price": {
"currency": "GBP",
"min": 0.03,
"max": 0.03,
"compareAtMin": null
},
"image": {
"url": "https://cdn.example.com/images/screw-insert.jpg",
"alt": "Screw insert, moulded plastic"
},
"variants": [
{
"id": "var_004",
"title": "Default",
"options": {},
"sku": "SI-STD",
"price": 0.03,
"compareAtPrice": null,
"available": true
}
]
},
{
"id": "prod_003",
"slug": "plastic-tube-container",
"title": "Plastic Tube Container",
"description": "Injection-moulded tube container with snap-fit lid.",
"url": "/products/plastic-tube-container/",
"availability": "sold_out",
"price": {
"currency": "GBP",
"min": 0.08,
"max": 0.08,
"compareAtMin": null
},
"image": {
"url": "https://cdn.example.com/images/plastic-tube-container.jpg",
"alt": "Plastic tube container with snap-fit lid"
},
"variants": [
{
"id": "var_005",
"title": "50ml",
"options": { "size": "50ml" },
"sku": "PTC-50",
"price": 0.08,
"compareAtPrice": null,
"available": false
}
]
},
{
"id": "prod_004",
"slug": "pull-seal-end-cap",
"title": "Pull Seal End Cap",
"description": "Tamper-evident end cap with pull-tab seal.",
"url": "/products/pull-seal-end-cap/",
"availability": "in_stock",
"price": {
"currency": "GBP",
"min": 0.04,
"max": 0.04,
"compareAtMin": null
},
"image": {
"url": "https://cdn.example.com/images/pull-seal-end-cap.jpg",
"alt": "Pull seal end cap with tamper-evident tab"
},
"variants": [
{
"id": "var_006",
"title": "Default",
"options": {},
"sku": "PSC-STD",
"price": 0.04,
"compareAtPrice": null,
"available": true
}
]
}
]
}
Raw
4-product-card.html
<!-- Static output of 2-product-card.liquid, rendered for "Screw Insert" -->
<article class="product-card">
<a class="product-card__link" href="/products/screw-insert/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-insert.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-insert.jpg?width=200 200w,
https://cdn.example.com/images/screw-insert.jpg?width=400 400w,
https://cdn.example.com/images/screw-insert.jpg?width=600 600w,
https://cdn.example.com/images/screw-insert.jpg?width=800 800w,
https://cdn.example.com/images/screw-insert.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-insert.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw insert, moulded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw Insert</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.03</span>
</p>
</div>
</a>
</article>
Raw
5-collection.html
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Product Range — MOCAP</title>
</head>
<body>
<header>
<a href="/">MOCAP</a>
<nav>
<a href="/products/">Products</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</nav>
</header>
<main>
<section>
<h1>Product Range</h1>
<p>Standard injection-moulded components, available in bulk with volume pricing.</p>
</section>
<section>
<article class="product-card">
<a class="product-card__link" href="/products/screw-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/screw-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/screw-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/screw-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw end cap, threaded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-from">From £0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/screw-insert/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-insert.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-insert.jpg?width=200 200w,
https://cdn.example.com/images/screw-insert.jpg?width=400 400w,
https://cdn.example.com/images/screw-insert.jpg?width=600 600w,
https://cdn.example.com/images/screw-insert.jpg?width=800 800w,
https://cdn.example.com/images/screw-insert.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-insert.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw insert, moulded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw Insert</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/plastic-tube-container/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/plastic-tube-container.jpg?width=800"
srcset="
https://cdn.example.com/images/plastic-tube-container.jpg?width=200 200w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=400 400w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=600 600w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=800 800w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1000 1000w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Plastic tube container with snap-fit lid"
>
<span class="product-card__badge product-card__badge--sold-out">Sold out</span>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Plastic Tube Container</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.08</span>
</p>
<p class="product-card__stock">Currently unavailable</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/pull-seal-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Pull seal end cap with tamper-evident tab"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Pull Seal End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.04</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/screw-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/screw-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/screw-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/screw-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw end cap, threaded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-from">From £0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/screw-insert/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-insert.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-insert.jpg?width=200 200w,
https://cdn.example.com/images/screw-insert.jpg?width=400 400w,
https://cdn.example.com/images/screw-insert.jpg?width=600 600w,
https://cdn.example.com/images/screw-insert.jpg?width=800 800w,
https://cdn.example.com/images/screw-insert.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-insert.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw insert, moulded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw Insert</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/plastic-tube-container/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/plastic-tube-container.jpg?width=800"
srcset="
https://cdn.example.com/images/plastic-tube-container.jpg?width=200 200w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=400 400w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=600 600w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=800 800w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1000 1000w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Plastic tube container with snap-fit lid"
>
<span class="product-card__badge product-card__badge--sold-out">Sold out</span>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Plastic Tube Container</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.08</span>
</p>
<p class="product-card__stock">Currently unavailable</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/pull-seal-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Pull seal end cap with tamper-evident tab"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Pull Seal End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.04</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/screw-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/screw-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/screw-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/screw-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw end cap, threaded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-from">From £0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/screw-insert/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/screw-insert.jpg?width=800"
srcset="
https://cdn.example.com/images/screw-insert.jpg?width=200 200w,
https://cdn.example.com/images/screw-insert.jpg?width=400 400w,
https://cdn.example.com/images/screw-insert.jpg?width=600 600w,
https://cdn.example.com/images/screw-insert.jpg?width=800 800w,
https://cdn.example.com/images/screw-insert.jpg?width=1000 1000w,
https://cdn.example.com/images/screw-insert.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Screw insert, moulded plastic"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Screw Insert</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.03</span>
</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/plastic-tube-container/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/plastic-tube-container.jpg?width=800"
srcset="
https://cdn.example.com/images/plastic-tube-container.jpg?width=200 200w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=400 400w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=600 600w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=800 800w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1000 1000w,
https://cdn.example.com/images/plastic-tube-container.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Plastic tube container with snap-fit lid"
>
<span class="product-card__badge product-card__badge--sold-out">Sold out</span>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Plastic Tube Container</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.08</span>
</p>
<p class="product-card__stock">Currently unavailable</p>
</div>
</a>
</article>
<article class="product-card">
<a class="product-card__link" href="/products/pull-seal-end-cap/">
<div class="product-card__media">
<img
class="product-card__image"
src="https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800"
srcset="
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=200 200w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=400 400w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=600 600w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=800 800w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1000 1000w,
https://cdn.example.com/images/pull-seal-end-cap.jpg?width=1200 1200w
"
sizes="(min-width: 768px) 25vw, 50vw"
alt="Pull seal end cap with tamper-evident tab"
>
</div>
<div class="product-card__info">
<h3 class="product-card__title">Pull Seal End Cap</h3>
<p class="product-card__price">
<span class="product-card__price-current">£0.04</span>
</p>
</div>
</a>
</article>
</section>
</main>
<footer>
<nav>
<a href="/delivery/">Delivery &amp; Returns</a>
<a href="/contact/">Contact</a>
<a href="/privacy/">Privacy Policy</a>
</nav>
<p>&copy; 2026 MOCAP. All rights reserved.</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment