SOP-JOURNAL-01: Journal Content Management System (v1.0)¶
Phase: A, foundational
Automation coverage: Manual (content creation), automated (display/templating)
Priority: Medium
Goal: Maintain the Protocol Raw Journal as an educational content hub that builds trust with raw-curious customers through evidence-based articles.
Purpose¶
The Journal exists to educate potential customers and remove barriers to purchase. It is NOT a marketing channel. Content should be factual, helpful, and aligned with the "systematic, not emotional" brand voice.
Strategic role: Support the Trust Ceiling thesis by demonstrating expertise and transparency without selling.
Content pillars: 1. Verification - How our testing/proof system works 2. Guidance - Practical advice for real-world situations 3. Nutrition - Evidence-based answers to completeness concerns 4. Transition - What to expect when switching to raw
Technical Architecture¶
File Structure (Shopify Theme)¶
assets/
journal.css # All Journal styles
snippets/
journal-card.liquid # Reusable article card component
icon-arrow.liquid # Arrow icon
icon-clock.liquid # Clock/time icon
icon-qr.liquid # QR code icon (featured card)
sections/
journal-hero.liquid # Landing page hero
journal-featured.liquid # Featured article card with QR visual
journal-grid.liquid # Article grid (3-column)
journal-cta.liquid # Proof Portal CTA
article-hero.liquid # Article page header
article-content.liquid # Article body wrapper
article-takeaway.liquid # Dark "Key Takeaway" card
article-related.liquid # Related articles grid
article-cta.liquid # Calculator CTA
templates/
blog.journal.json # Blog listing page template
article.journal.json # Individual article template
URL Structure¶
| Page | URL |
|---|---|
| Journal landing | /blogs/journal |
| Individual article | /blogs/journal/{article-handle} |
Templates¶
blog.journal.json - Controls the Journal landing page layout: - Journal Hero (title, subtitle) - Journal Featured Article (configurable via Customizer) - Journal Article Grid (excludes featured article) - Journal CTA (links to Proof Portal)
article.journal.json - Controls individual article pages: - Article Hero (category, read time, title) - Article Content (body text) - Article Key Takeaway (dark card with memorable quote) - Article Related (other articles grid) - Article CTA (Calculator link)
Metafield Structure¶
Location: Settings → Metafields and metaobjects → Articles
| Definition Name | Namespace.Key | Type | Purpose |
|---|---|---|---|
| Category | journal.category |
Single line text | Article category label (VERIFICATION, GUIDANCE, NUTRITION, TRANSITION) |
| Read Time | journal.read_time |
Single line text | Estimated reading time (e.g., "5 min") |
| Excerpt | journal.excerpt |
Multi-line text | Custom excerpt for article cards |
| Key Takeaway | journal.key_takeaway |
Multi-line text | Memorable quote for dark card at end of article |
Important: If Key Takeaway is empty, the dark card section will not render.
Adding a New Article¶
Step 1: Create the Article¶
- Online Store → Blog posts → Add blog post
- Title: Clear, specific headline (not clickbait)
- Blog: Select "Journal"
- Content: Write in HTML mode (see Content Guidelines below)
- Theme template: Select
article.journal
Step 2: Set URL and SEO¶
| Field | Guidelines |
|---|---|
| URL handle | Lowercase, hyphens, descriptive (e.g., how-to-read-your-batch-safety-report) |
| Page title | {Article Title} \| Protocol Raw (max 60 chars) |
| Meta description | Compelling summary, include key benefit (max 155 chars) |
Step 3: Fill Metafields¶
Scroll down to Metafields section and complete:
| Field | Example |
|---|---|
| Category | VERIFICATION |
| Read Time | 5 min |
| Excerpt | 1-2 sentences summarising the article for card display |
| Key Takeaway | Single memorable sentence that captures the article's core message |
Step 4: Publish and Verify¶
- Set visibility to "Visible"
- Save
- Preview at
/blogs/journal/{handle} - Check: Hero displays correctly, content renders, Key Takeaway card appears, Related articles show
Configuring the Featured Article¶
- Online Store → Themes → Customize
- Use page selector dropdown → Blogs → Journal
- Click Journal Featured Article section
- Select the article to feature
- Toggle "Show QR visual element" (recommended ON for Batch Report article)
- In Journal Article Grid section, set same article as "Exclude Article"
- Save
Content Guidelines¶
Voice and Tone¶
Do: - Be factual and specific - Use evidence and data - Acknowledge legitimate concerns - Write for an intelligent adult - Use British English spelling
Don't: - Use marketing hype or superlatives - Attack competitors - Be defensive about raw feeding - Use emotional manipulation - Evangelise or preach
Formatting Rules¶
HTML structure for articles:
<p>Opening paragraph that hooks the reader.</p>
<p>Continue with context and setup.</p>
<h2>First Major Section</h2>
<p>Section content...</p>
<h3>Subsection if Needed</h3>
<p>More content...</p>
<div class="article-callout">
<p><strong>What this means for you:</strong> Key insight or practical takeaway.</p>
</div>
<p>Continuing content...</p>
<h2>Next Major Section</h2>
Callout boxes: Use for key insights, practical takeaways, or important clarifications. Limit to 2-3 per article.
Lists in prose: Write as natural sentences, not bullet points.
✓ Good: "Your batch report shows results for three tests: Salmonella, Listeria, and Enterobacteriaceae."
✗ Avoid: Bullet-pointed lists unless genuinely necessary for clarity.
Avoid em dashes: Use commas, parentheses, or separate sentences instead.
✓ Good: "UKAS (the United Kingdom Accreditation Service) is the sole national body..."
✗ Avoid: "UKAS—the United Kingdom Accreditation Service—is the sole national body..."
Category Definitions¶
| Category | Use For | Example Topics |
|---|---|---|
| VERIFICATION | Proof system, testing, QR codes | Batch reports, lab certificates, UKAS accreditation |
| GUIDANCE | Practical advice, real-world situations | Vet conversations, handling concerns, storage |
| NUTRITION | Completeness, formulation, FEDIAF | Nutritional analysis, DIY vs commercial, supplements |
| TRANSITION | Switching to raw, what to expect | First month, stool changes, adjustment period |
Read Time Calculation¶
Approximately 200 words per minute: - 1000 words = 5 min - 1200 words = 6 min - 1400 words = 7 min - 1600 words = 8 min
Round to nearest minute.
Design System Alignment¶
The Journal follows the Protocol Raw Web Design System v1.0.
Colours¶
| Element | Colour | Variable |
|---|---|---|
| Category labels | Burnt Sienna | #B85C3A |
| Section labels | Warm Gray | #918A85 |
| Card hover border | Forest Green | #2D5144 |
| Key Takeaway background | Espresso | #2B2523 |
| Body backgrounds | Cream, Warm Linen, Stone | #F9F7F4, #EBE8E3, #C4BCB0 |
Typography¶
| Element | Font | Size | Weight |
|---|---|---|---|
| Hero title | Montserrat | 56px | 700 |
| Article title | Montserrat | 44px | 700 |
| Section headings (h2) | Montserrat | 28px | 700 |
| Subsection headings (h3) | Montserrat | 22px | 700 |
| Body text | Inter | 18px | 400 |
| Category labels | Inter | 11-12px | 600 |
Signature Element¶
Each article page has one signature moment: the Key Takeaway card.
- Dark background (Espresso)
- White dot texture overlay
- Burnt Sienna label
- Cream text (Montserrat 700, 28px)
- Centred, max-width 480px
This is the one thing readers should remember after leaving.
Current Articles (Launch Set)¶
| # | Title | Handle | Category |
|---|---|---|---|
| 1 | How to Read Your Batch Safety Report | how-to-read-your-batch-safety-report |
VERIFICATION |
| 2 | How to Talk to Your Vet About Raw Feeding | how-to-talk-to-your-vet-about-raw-feeding |
GUIDANCE |
| 3 | Is Raw Dog Food Nutritionally Complete? | is-raw-dog-food-nutritionally-complete |
NUTRITION |
| 4 | The First Month of Raw Feeding | the-first-month-of-raw-feeding |
TRANSITION |
Featured article: #1 (Batch Report) - supports the hero QR feature
Troubleshooting¶
Article template not appearing in dropdown¶
Cause: Template file missing or has errors
Fix:
1. Edit code → Templates → check article.journal.json exists
2. Open file, check for red error indicators
3. Verify all referenced sections exist in Sections folder
Key Takeaway card not showing¶
Cause: Metafield empty or not set
Fix:
1. Edit article → scroll to Metafields
2. Ensure journal.key_takeaway has content
3. Save and refresh
Styling not applied¶
Cause: CSS not loading
Fix:
1. Edit code → Assets → verify journal.css exists
2. Check article-hero.liquid contains {{ 'journal.css' | asset_url | stylesheet_tag }}
3. Hard refresh browser (Ctrl+Shift+R)
Featured article not showing¶
Cause: Not configured in Customizer
Fix: 1. Customize theme → navigate to Journal blog 2. Click Journal Featured Article section 3. Select article from dropdown 4. Save
Callout boxes showing raw HTML¶
Cause: Content pasted in visual mode, not HTML mode
Fix:
1. Edit article
2. Click <> or "Show HTML" button
3. Check callout divs are properly formatted
4. Switch back to visual mode
Future Considerations¶
Planned Articles (Post-Launch)¶
- Storage and handling guide
- Understanding FEDIAF guidelines
- Raw feeding for puppies
- Seasonal feeding adjustments
Potential Enhancements¶
- Article search/filter functionality
- Reading progress indicator
- Social sharing buttons (low priority)
- Email capture for new article notifications (via Customer.io)
Related Documentation¶
- Web Design System v1.0: Visual patterns, components, typography
- Visual Identity Guide v2.1: Brand positioning, voice guidelines
- Website Structure: Overall site architecture and page purposes
Version History¶
| Version | Date | Changes |
|---|---|---|
| 1.0 | December 2024 | Initial release with 4 launch articles |
End of Document