Issue Station
Sign In
Tools hereToolbox

openclaw - 💡(How to fix) Fix [Ballast] Apply V8 design system to live Shopify store [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#70078•Fetched 2026-04-23 07:29:34
View on GitHub
Comments
0
Participants
1
Timeline
0
Reactions
0
Author
dbentaldbental
Participants
dbentaldbental

The live Shopify store currently has the 'Ballast' Horizon theme with the old V6 parchment/serif aesthetic applied. This issue tracks updating the store to match the locked V8 Light design system.

Root Cause

The live Shopify store currently has the 'Ballast' Horizon theme with the old V6 parchment/serif aesthetic applied. This issue tracks updating the store to match the locked V8 Light design system.

RAW_BUFFERClick to expand / collapse

Overview

The live Shopify store currently has the 'Ballast' Horizon theme with the old V6 parchment/serif aesthetic applied. This issue tracks updating the store to match the locked V8 Light design system.

V8 Design system (source of truth)

  • Design files: data/workspace/STITCH_V8_LIGHT.md + STITCH_V8_HERO_ANIMATION.md
  • Stitch prototype: https://stitch.withgoogle.com/projects/13726995530219285201
  • Background: #f4f4f5 (very light cool grey)
  • Wordmark: BALLAST, Inter Black, forest green #166534
  • Nav: SHOP · EVIDENCE · ABOUT · JOURNAL — Inter SemiBold, clear and large
  • Headline font: Inter Black (heaviest weight)
  • Body font: Inter Regular
  • Accent: forest green #166534
  • Primary CTA: green fill, white text, 'SHOP THE COLLECTION →'
  • Hero: full-viewport molecular network animation (floating grey/green nodes) with text overlaid
  • Trust strip: large Inter Black numbers (12,000+ / 284 / 0)

Tasks

  • Update theme font settings (Inter via Google Fonts — Horizon supports custom fonts via settings_data.json)
  • Update color scheme in settings_data.json (replace parchment/ochre/ink with #f4f4f5 / #166534 / #111827)
  • Update nav items: SHOP · EVIDENCE · ABOUT · JOURNAL
  • Update BALLAST wordmark color to #166534
  • Implement molecular network hero animation (JavaScript canvas or CSS — inject via theme assets)
  • Update homepage template sections: hero copy, trust strip, product grid
  • Upload logo SVG (depends on #69864)
  • Verify mobile responsiveness (hero animation must degrade gracefully on mobile)

Note on hero animation

The molecular network animation requires custom JavaScript (canvas API or a lightweight library like particles.js). This cannot be done through Shopify theme settings alone — needs a custom asset injected into the theme.

Options:

  1. Add a custom JS file to theme assets and reference it in the homepage section template
  2. Use a Shopify app that supports custom code blocks
  3. Implement as a Liquid section with embedded <script>

Related

  • data/scripts/lib/shopify/theme_apply.mjs (existing theme applicator — needs update)
  • data/scripts/lib/shopify/store_plan_static.mjs (update brand_configs)
  • data/scripts/lib/shopify/brand_configs/trusted_wellness.mjs (update palette + fonts)
  • run_store_builder.mjs — re-run after changes

extent analysis

TL;DR

Update the Shopify store's theme settings and assets to match the V8 Light design system by modifying the settings_data.json file and injecting custom JavaScript for the hero animation.

Guidance

  • Update the settings_data.json file to reflect the new color scheme and font settings, replacing parchment/ochre/ink with #f4f4f5 / #166534 / #111827 and setting the font to Inter via Google Fonts.
  • Implement the molecular network hero animation using custom JavaScript, either by adding a custom JS file to theme assets, using a Shopify app that supports custom code blocks, or implementing it as a Liquid section with embedded <script>.
  • Verify mobile responsiveness, ensuring the hero animation degrades gracefully on mobile devices.
  • Run run_store_builder.mjs after making changes to apply the updates.

Example

// Example of updating settings_data.json
{
  "font": "Inter",
  "colors": {
    "background": "#f4f4f5",
    "accent": "#166534"
  }
}

Notes

The implementation of the hero animation may require additional dependencies or libraries, such as particles.js. Ensure that any custom code is properly tested and validated before deploying to production.

Recommendation

Apply the workaround by updating the theme settings and assets to match the V8 Light design system, as the issue is focused on implementing a specific design update rather than resolving a bug or error.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#SSR setup#ISR setup#authentication setup#request error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

openclaw - 💡(How to fix) Fix [Ballast] Apply V8 design system to live Shopify store [1 participants]