Phase 3:
Dynamic Blocks
Custom Shopify 2.0 Section with Heterogeneous Block Types
WinSport Theme · Product Specs Showcase · 3 Block Types
What We Built
3
Block Types
1
Custom Section
2
New Files
∞
Combinations
Product Specs Showcase — a section merchants can customize with spec rows, performance ratings, and subheadings. All add / remove / reorder from the Theme Customizer.
Block Types
Subheading
Section divider with uppercase label & border
Spec Item
Label ··· Value row with optional icon
Rating
Performance bar (0–10) with description text
- Dawn's multicolumn = single repeating block type
- This section = 3 heterogeneous types with different rendering logic
- All blocks are add / remove / reorder in Theme Customizer
Before & After
Before — Without Specs
After — With Specs Showcase
Admin Customizer
Section Specification
Block Settings
- Merchants add/remove/reorder blocks without touching code
- Each block type has its own settings panel in the sidebar
- Rating slider, icon picker — all admin-native Shopify controls
Code Highlights
{# Dynamic block rendering via case/when #}
{% for block in section.blocks %}
{% case block.type %}
{% when 'heading' %}
<h3>{{ block.settings.heading }}</h3>
{% when 'spec_item' %}
<!-- Label ··· Value row -->
{% when 'highlight' %}
<!-- Rating bar via CSS custom property -->
<div style="--rating-percent: {{ rating | times: 10 }}%;">
{% endcase %}
{% endfor %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'heading' %}
<h3>{{ block.settings.heading }}</h3>
{% when 'spec_item' %}
<!-- Label ··· Value row -->
{% when 'highlight' %}
<!-- Rating bar via CSS custom property -->
<div style="--rating-percent: {{ rating | times: 10 }}%;">
{% endcase %}
{% endfor %}
// Schema: 3 block types, each with unique settings
"blocks": [
{ "type": "heading", // Subheading divider },
{ "type": "spec_item", // Label ··· Value + icon },
{ "type": "highlight", // Rating bar 0–10 }
]
"blocks": [
{ "type": "heading", // Subheading divider },
{ "type": "spec_item", // Label ··· Value + icon },
{ "type": "highlight", // Rating bar 0–10 }
]
Key Takeaways
- Heterogeneous block types — 3 different render patterns in one section, not just repeating columns
- Admin-configurable — add, remove, reorder blocks from Theme Customizer without touching code
- Dawn patterns — dynamic padding, color schemes, scroll animations,
shopify_attributes - Design system — Cormorant headings, dotted dividers, uppercase labels match WinSport aesthetic
- Pure CSS rating bars — no JS, driven by
--rating-percentcustom property
WinSport Theme · Phase 3 Complete · Dawn v15.4.1 · Shopify 2.0