No Products in the Cart
<section id="journal-feed-{{ section.id }}" class="gbj-journal-section">
<div class="gbj-journal-shell">
<header class="gbj-journal-header">
<div>
{% if section.settings.kicker != blank %}
<p class="gbj-journal-kicker">{{ section.settings.kicker }}</p>
{% endif %}
{% if section.settings.heading != blank %}
<h1 class="gbj-journal-heading">{{ section.settings.heading }}</h1>
{% endif %}
</div>
{% if section.settings.badge_text != blank %}
<span class="gbj-journal-badge">{{ section.settings.badge_text }}</span>
{% endif %}
</header>
{% if section.settings.intro != blank %}
<div class="gbj-journal-intro rte">
{{ section.settings.intro }}
</div>
{% endif %}
{% if section.blocks.size > 0 %}
<div class="gbj-journal-grid">
{% for block in section.blocks %}
{% assign cta_label = block.settings.cta_label %}
{% if cta_label == blank %}
{% case block.settings.post_type %}
{% when 'article' %}
{% assign cta_label = 'Read publication' %}
{% when 'blog' %}
{% assign cta_label = 'Read article' %}
{% else %}
{% assign cta_label = 'View update' %}
{% endcase %}
{% endif %}
<article class="gbj-journal-card" {{ block.shopify_attributes }}>
{% if block.settings.image != blank %}
<a
{% if block.settings.link != blank %}
href="{{ block.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="gbj-journal-image-link"
{% if block.settings.link != blank %}target="_blank" rel="noopener noreferrer"{% endif %}
>
{{
block.settings.image
| image_url: width: 1200
| image_tag:
class: 'gbj-journal-image',
loading: 'lazy',
widths: '360, 540, 720, 900, 1200',
sizes: '(min-width: 990px) calc((100vw - 96px)/2), 100vw',
alt: block.settings.image_alt
}}
</a>
{% endif %}
<div class="gbj-journal-content">
<div class="gbj-journal-meta">
{% if block.settings.source != blank %}
<span>{{ block.settings.source }}</span>
{% endif %}
{% if block.settings.source != blank and block.settings.date != blank %}
<span class="gbj-journal-dot"></span>
{% endif %}
{% if block.settings.date != blank %}
<time datetime="{{ block.settings.iso_date | escape | default: block.settings.date | escape }}">{{ block.settings.date }}</time>
{% endif %}
</div>
{% if block.settings.title != blank %}
<h2 class="gbj-journal-title">
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" target="_blank" rel="noopener noreferrer">
{{ block.settings.title }}
</a>
{% else %}
{{ block.settings.title }}
{% endif %}
</h2>
{% endif %}
{% if block.settings.summary != blank %}
<div class="gbj-journal-summary rte">
{{ block.settings.summary }}
</div>
{% endif %}
{% if block.settings.link != blank %}
<div class="gbj-journal-footer">
<a href="{{ block.settings.link }}" target="_blank" rel="noopener noreferrer" class="gbj-journal-cta">
<span>{{ cta_label }}</span>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M14 5l7 7m0 0l-7 7m7-7H3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"></path>
</svg>
</a>
</div>
{% endif %}
</div>
</article>
{% endfor %}
</div>
{% else %}
<div class="gbj-journal-empty">
<p>Add entries from the Theme Customizer to populate this journal feed.</p>
</div>
{% endif %}
</div>
</section>
<style>
#journal-feed-{{ section.id }} {
--bg: {{ section.settings.bg_color }};
--surface: {{ section.settings.card_bg }};
--text: {{ section.settings.text_color }};
--muted: {{ section.settings.muted_color }};
--heading: {{ section.settings.heading_color }};
--border: {{ section.settings.border_color }};
--accent: {{ section.settings.accent_color }};
--badge-bg: {{ section.settings.badge_bg }};
--badge-text: {{ section.settings.badge_text_color }};
background: var(--bg);
color: var(--text);
padding: 56px 0 88px;
}
#journal-feed-{{ section.id }} * {
box-sizing: border-box;
}
#journal-feed-{{ section.id }} .gbj-journal-shell {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
#journal-feed-{{ section.id }} .gbj-journal-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
padding-bottom: 26px;
border-bottom: 1px solid var(--border);
margin-bottom: 26px;
}
#journal-feed-{{ section.id }} .gbj-journal-kicker {
margin: 0 0 10px;
font-size: 11px;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
#journal-feed-{{ section.id }} .gbj-journal-heading {
margin: 0;
color: var(--heading);
font-size: clamp(30px, 5vw, 56px);
line-height: 0.95;
letter-spacing: -0.04em;
font-weight: 700;
}
#journal-feed-{{ section.id }} .gbj-journal-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 14px;
border: 1px solid var(--border);
background: var(--badge_bg, var(--badge-bg));
color: var(--badge-text);
border-radius: 999px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
}
#journal-feed-{{ section.id }} .gbj-journal-intro {
max-width: 760px;
margin: 0 0 38px;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
#journal-feed-{{ section.id }} .gbj-journal-intro p {
margin: 0;
}
#journal-feed-{{ section.id }} .gbj-journal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 42px 36px;
}
#journal-feed-{{ section.id }} .gbj-journal-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
#journal-feed-{{ section.id }} .gbj-journal-image-link {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #f3f3f3;
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 6px;
margin-bottom: 22px;
}
#journal-feed-{{ section.id }} .gbj-journal-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms ease;
}
#journal-feed-{{ section.id }} .gbj-journal-card:hover .gbj-journal-image {
transform: scale(1.02);
}
#journal-feed-{{ section.id }} .gbj-journal-content {
display: flex;
flex-direction: column;
min-height: 100%;
}
#journal-feed-{{ section.id }} .gbj-journal-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
color: var(--muted);
font-size: 10px;
line-height: 1.3;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
#journal-feed-{{ section.id }} .gbj-journal-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--muted) 60%, transparent);
}
#journal-feed-{{ section.id }} .gbj-journal-title {
margin: 0 0 12px;
color: var(--heading);
font-size: clamp(21px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: -0.025em;
font-weight: 700;
}
#journal-feed-{{ section.id }} .gbj-journal-title a {
color: inherit;
text-decoration: none;
}
#journal-feed-{{ section.id }} .gbj-journal-title a:hover {
color: color-mix(in srgb, var(--heading) 82%, white);
}
#journal-feed-{{ section.id }} .gbj-journal-summary {
color: var(--text);
font-size: 14px;
line-height: 1.75;
margin-bottom: 22px;
}
#journal-feed-{{ section.id }} .gbj-journal-summary p {
margin: 0;
}
#journal-feed-{{ section.id }} .gbj-journal-footer {
margin-top: auto;
}
#journal-feed-{{ section.id }} .gbj-journal-cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--heading);
font-size: 11px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 3px;
transition: opacity 180ms ease, transform 180ms ease;
}
#journal-feed-{{ section.id }} .gbj-journal-cta:hover {
opacity: 0.72;
}
#journal-feed-{{ section.id }} .gbj-journal-cta svg {
width: 14px;
height: 14px;
transition: transform 180ms ease;
}
#journal-feed-{{ section.id }} .gbj-journal-cta:hover svg {
transform: translateX(2px);
}
#journal-feed-{{ section.id }} .gbj-journal-empty {
padding: 44px 24px;
border: 1px dashed var(--border);
border-radius: 12px;
text-align: center;
color: var(--muted);
}
@media screen and (max-width: 989px) {
#journal-feed-{{ section.id }} .gbj-journal-grid {
gap: 32px 24px;
}
}
@media screen and (max-width: 749px) {
#journal-feed-{{ section.id }} {
padding: 40px 0 64px;
}
#journal-feed-{{ section.id }} .gbj-journal-shell {
padding: 0 16px;
}
#journal-feed-{{ section.id }} .gbj-journal-header {
flex-direction: column;
align-items: start;
margin-bottom: 20px;
padding-bottom: 20px;
}
#journal-feed-{{ section.id }} .gbj-journal-grid {
grid-template-columns: 1fr;
gap: 32px;
}
#journal-feed-{{ section.id }} .gbj-journal-title {
font-size: 24px;
}
}
</style>
{% schema %}
{
"name": "GBJ Journal Feed",
"settings": [
{
"type": "text",
"id": "kicker",
"label": "Kicker",
"default": "Press & Updates"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "GEHNABOX Journal"
},
{
"type": "text",
"id": "badge_text",
"label": "Badge text",
"default": "Live Broadcast"
},
{
"type": "richtext",
"id": "intro",
"label": "Intro text",
"default": "<p>Explore new launches, editorial stories, jewellery trends, and brand milestones from GEHNABOX.</p>"
},
{
"type": "color",
"id": "bg_color",
"label": "Background color",
"default": "#fcfcfc"
},
{
"type": "color",
"id": "card_bg",
"label": "Card background",
"default": "#fcfcfc"
},
{
"type": "color",
"id": "text_color",
"label": "Body text color",
"default": "#4a4a4a"
},
{
"type": "color",
"id": "muted_color",
"label": "Muted text color",
"default": "#8a8a8a"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#111111"
},
{
"type": "color",
"id": "border_color",
"label": "Border color",
"default": "#e5e5e5"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent color",
"default": "#b08d57"
},
{
"type": "color",
"id": "badge_bg",
"label": "Badge background",
"default": "#ffffff"
},
{
"type": "color",
"id": "badge_text_color",
"label": "Badge text color",
"default": "#666666"
}
],
"blocks": [
{
"type": "entry",
"name": "Journal entry",
"settings": [
{
"type": "select",
"id": "post_type",
"label": "Entry type",
"options": [
{ "value": "article", "label": "External publication" },
{ "value": "blog", "label": "Blog post" },
{ "value": "update", "label": "Company update" }
],
"default": "blog"
},
{
"type": "text",
"id": "source",
"label": "Source name",
"default": "GBJ Journal"
},
{
"type": "text",
"id": "date",
"label": "Display date",
"default": "July 28, 2026"
},
{
"type": "text",
"id": "iso_date",
"label": "Optional ISO date",
"info": "Example: 2026-07-28"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "How Independent Jewellery Retail Is Evolving With Digital Storytelling"
},
{
"type": "richtext",
"id": "summary",
"label": "Summary",
"default": "<p>A new editorial note on how modern jewellery brands can blend trust, design, and commerce across retail, content, and customer experience touchpoints.</p>"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "cta_label",
"label": "Custom CTA label",
"info": "Leave blank to use the automatic label."
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "image_alt",
"label": "Image alt text",
"default": "GEHNABOX journal entry image"
}
]
}
],
"presets": [
{
"name": "GBJ Journal Feed",
"blocks": [
{
"type": "entry"
}
]
}
]
}
{% endschema %}