Pack Size Guide
{% comment %}
Pack Size Guide — HeatBriqs Firewood Briquettes
Add this file to your theme's /sections/ folder.
Then add it to any page via Customise > Add section > Pack Size Guide.
{% endcomment %}
<style>
.pg-section { padding: {{ section.settings.section_padding }}px 0; }
.pg-heading { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; text-align: {{ section.settings.heading_align }}; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 16px; }
.pg-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.pg-card.featured { border: 2px solid #ef4632; }
.pg-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pg-img-placeholder { width: 100%; aspect-ratio: 1/1; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px; }
.pg-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pg-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.pg-title { font-size: 15px; font-weight: 600; color: #ef4632; }
.pg-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.pg-badge.popular { background: #fdc714; color: #7a5800; }
.pg-badge.value { background: #ef4632; color: #fff; }
.pg-ideal { font-size: 12px; color: #888; font-style: italic; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; margin: 0; }
.pg-stats { display: flex; flex-direction: column; gap: 5px; }
.pg-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; gap: 6px; }
.pg-stat:last-child { border-bottom: none; padding-bottom: 0; }
.pg-stat-label { color: #888; white-space: nowrap; }
.pg-stat-value { font-weight: 500; text-align: right; }
.pg-burn-days { font-size: 11px; color: #aaa; font-weight: 400; }
.pg-delivery { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 2px; padding: 6px 8px; background: #f9f9f9; border-radius: 6px; color: #666; }
.pg-delivery-icon { font-size: 14px; color: #f7941d; }
.pg-note { margin-top: 1rem; font-size: 13px; color: #666; padding: 10px 14px; border-left: 3px solid #f7941d; background: #fef9f0; border-radius: 0 6px 6px 0; }
</style>
<div class="pg-section page-width">
{% if section.settings.heading != blank %}
<h2 class="pg-heading">{{ section.settings.heading }}</h2>
{% endif %}
<div class="pg-grid">
{%- comment -%} 2 PACK {%- endcomment -%}
<div class="pg-card featured">
{% if section.settings.img_2pack != blank %}
{{ section.settings.img_2pack | image_url: width: 600 | image_tag: class: 'pg-img', alt: '2 pack of HeatBriqs firewood briquettes', loading: 'lazy' }}
{% else %}
<div class="pg-img-placeholder">No image set</div>
{% endif %}
<div class="pg-body">
<div class="pg-header">
<span class="pg-title">2 pack</span>
<span class="pg-badge popular">Most popular</span>
</div>
<p class="pg-ideal">Ideal for trying out or topping up</p>
<div class="pg-stats">
<div class="pg-stat"><span class="pg-stat-label">Briquettes</span><span class="pg-stat-value">24</span></div>
<div class="pg-stat"><span class="pg-stat-label">Weight</span><span class="pg-stat-value">~20 kg</span></div>
<div class="pg-stat"><span class="pg-stat-label">Burn time</span><span class="pg-stat-value">~12 hrs <span class="pg-burn-days">(~0.5 days)</span></span></div>
</div>
<div class="pg-delivery"><span class="pg-delivery-icon">📦</span> Boxed delivery via DPD</div>
</div>
</div>
{%- comment -%} 24 PACK {%- endcomment -%}
<div class="pg-card">
{% if section.settings.img_24pack != blank %}
{{ section.settings.img_24pack | image_url: width: 600 | image_tag: class: 'pg-img', alt: '24 pack of HeatBriqs firewood briquettes', loading: 'lazy' }}
{% else %}
<div class="pg-img-placeholder">No image set</div>
{% endif %}
<div class="pg-body">
<div class="pg-header">
<span class="pg-title">24 pack</span>
</div>
<p class="pg-ideal">Ideal for occasional use</p>
<div class="pg-stats">
<div class="pg-stat"><span class="pg-stat-label">Briquettes</span><span class="pg-stat-value">288</span></div>
<div class="pg-stat"><span class="pg-stat-label">Weight</span><span class="pg-stat-value">~240 kg</span></div>
<div class="pg-stat"><span class="pg-stat-label">Burn time</span><span class="pg-stat-value">~144 hrs <span class="pg-burn-days">(~6 days)</span></span></div>
</div>
<div class="pg-delivery"><span class="pg-delivery-icon">🚚</span> Pallet delivery</div>
</div>
</div>
{%- comment -%} 48 PACK {%- endcomment -%}
<div class="pg-card">
{% if section.settings.img_48pack != blank %}
{{ section.settings.img_48pack | image_url: width: 600 | image_tag: class: 'pg-img', alt: '48 pack of HeatBriqs firewood briquettes', loading: 'lazy' }}
{% else %}
<div class="pg-img-placeholder">No image set</div>
{% endif %}
<div class="pg-body">
<div class="pg-header">
<span class="pg-title">48 pack</span>
</div>
<p class="pg-ideal">Ideal for regular use</p>
<div class="pg-stats">
<div class="pg-stat"><span class="pg-stat-label">Briquettes</span><span class="pg-stat-value">576</span></div>
<div class="pg-stat"><span class="pg-stat-label">Weight</span><span class="pg-stat-value">~480 kg</span></div>
<div class="pg-stat"><span class="pg-stat-label">Burn time</span><span class="pg-stat-value">~288 hrs <span class="pg-burn-days">(~12 days)</span></span></div>
</div>
<div class="pg-delivery"><span class="pg-delivery-icon">🚚</span> Pallet delivery</div>
</div>
</div>
{%- comment -%} 70 PACK {%- endcomment -%}
<div class="pg-card">
{% if section.settings.img_70pack != blank %}
{{ section.settings.img_70pack | image_url: width: 600 | image_tag: class: 'pg-img', alt: '70 pack of HeatBriqs firewood briquettes', loading: 'lazy' }}
{% else %}
<div class="pg-img-placeholder">No image set</div>
{% endif %}
<div class="pg-body">
<div class="pg-header">
<span class="pg-title">70 pack</span>
</div>
<p class="pg-ideal">Ideal for stocking up</p>
<div class="pg-stats">
<div class="pg-stat"><span class="pg-stat-label">Briquettes</span><span class="pg-stat-value">840</span></div>
<div class="pg-stat"><span class="pg-stat-label">Weight</span><span class="pg-stat-value">~700 kg</span></div>
<div class="pg-stat"><span class="pg-stat-label">Burn time</span><span class="pg-stat-value">~420 hrs <span class="pg-burn-days">(~18 days)</span></span></div>
</div>
<div class="pg-delivery"><span class="pg-delivery-icon">🚚</span> Pallet delivery</div>
</div>
</div>
{%- comment -%} 96 PACK {%- endcomment -%}
<div class="pg-card featured">
{% if section.settings.img_96pack != blank %}
{{ section.settings.img_96pack | image_url: width: 600 | image_tag: class: 'pg-img', alt: '96 pack of HeatBriqs firewood briquettes', loading: 'lazy' }}
{% else %}
<div class="pg-img-placeholder">No image set</div>
{% endif %}
<div class="pg-body">
<div class="pg-header">
<span class="pg-title">96 pack</span>
<span class="pg-badge value">Best value</span>
</div>
<p class="pg-ideal">Ideal for heavy or regular winter heating</p>
<div class="pg-stats">
<div class="pg-stat"><span class="pg-stat-label">Briquettes</span><span class="pg-stat-value">1,152</span></div>
<div class="pg-stat"><span class="pg-stat-label">Weight</span><span class="pg-stat-value">~960 kg</span></div>
<div class="pg-stat"><span class="pg-stat-label">Burn time</span><span class="pg-stat-value">~576 hrs <span class="pg-burn-days">(~24 days)</span></span></div>
</div>
<div class="pg-delivery"><span class="pg-delivery-icon">🚚</span> Pallet delivery</div>
</div>
</div>
</div>
{% if section.settings.note != blank %}
<p class="pg-note">{{ section.settings.note }}</p>
{% endif %}
</div>
{% schema %}
{
"name": "Pack Size Guide",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Which pack size is right for you?"
},
{
"type": "select",
"id": "heading_align",
"label": "Heading alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Centre" },
{ "value": "right", "label": "Right" }
],
"default": "left"
},
{
"type": "range",
"id": "section_padding",
"label": "Section padding (top & bottom)",
"min": 0,
"max": 80,
"step": 4,
"unit": "px",
"default": 40
},
{
"type": "header",
"content": "Pack images"
},
{
"type": "image_picker",
"id": "img_2pack",
"label": "2 pack image"
},
{
"type": "image_picker",
"id": "img_24pack",
"label": "24 pack image"
},
{
"type": "image_picker",
"id": "img_48pack",
"label": "48 pack image"
},
{
"type": "image_picker",
"id": "img_70pack",
"label": "70 pack image"
},
{
"type": "image_picker",
"id": "img_96pack",
"label": "96 pack image"
},
{
"type": "header",
"content": "Footer note"
},
{
"type": "textarea",
"id": "note",
"label": "Note text",
"default": "Burn times are approximate and based on a single pack of 12 briquettes burning for ~6 hours. Actual burn time may vary depending on your stove and usage. Pallet deliveries require suitable access for a tail-lift vehicle."
}
],
"presets": [
{
"name": "Pack Size Guide"
}
]
}
{% endschema %}