GK Theme Updates (custom sections + homepage)#3892
Open
ByllanBonk wants to merge 135 commits intoShopify:mainfrom
Open
GK Theme Updates (custom sections + homepage)#3892ByllanBonk wants to merge 135 commits intoShopify:mainfrom
ByllanBonk wants to merge 135 commits intoShopify:mainfrom
Conversation
Committed from shop: My Store
Committed from shop: My Store
Committed from shop: My Store
… layout
- Global CSS with Bebas Neue/DM Sans/DM Mono fonts, dark color scheme (#0D0D0D bg, #E8690A accent)
- Sharp-cornered modern button overrides (no border radius, uppercase, letter-spacing)
- Custom sections: GK Hero, Tour Dates (Bandsintown), Stream+Follow, Featured Gristle, Sponsor Logos, Spotify Embed
- All sections have full {% schema %} blocks for Shopify visual editor
- Updated settings_data.json with 5 dark color schemes
- Updated header/footer groups with dark styling
- Wired up homepage template with correct section order
https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
…op grid
- GK Dates Page: full Bandsintown embed with dark styling, customizable artist name
- GK Lessons Page: 3-column card grid with feature lists (Virtual, On-Demand, TrueFire)
- GK About Page: editorial layout with image+text blocks, stats bar, rich text
- GK Press Page: featured quote hero + press quotes grid with source attribution
- GK Contact Page: dark styled form with contact info blocks, Shopify form integration
- Updated collection.json for 3-column portrait grid (Shop page)
- All sections have full {% schema %} blocks for Shopify visual editor
https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
Committed from shop: My Store
Committed from shop: My Store
Committed from shop: My Store
Claude/customize dawn theme 4 sm6u
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
…ction Tour Dates (gk-tour-dates.liquid + gk-dates-page.liquid): - Fully custom, no third-party widgets or apps - Manual show date blocks: date, venue, city, ticket URL, sold-out toggle - Auto-hides past dates using Liquid epoch comparison (disappear next day) - Homepage section shows next 4 upcoming, full page shows all - Date in orange Bebas Neue left, venue/city middle, GET TICKETS button right - SOLD OUT shows grey label instead of button - VIEW ALL DATES outlined orange button at bottom of homepage section - Full schema: blocks are addable/editable/deletable in theme editor Spotify Embed (gk-spotify-embed.liquid): - Accepts full <iframe> embed OR bare Spotify embed URL in textarea - Smart parsing: detects iframe vs URL, renders accordingly - Rounded card container with border, shadow, configurable radius + padding - Separate desktop/mobile embed heights - Optional "Open on Spotify" link toggle - Placeholder with instructions when no embed configured - Full editable schema: colors, sizing, spacing, max-width https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
gk-tour-dates.liquid: - Custom manual show date blocks (date/venue/city/ticket_url/sold_out fields) - Auto-hides past shows via Liquid epoch comparison (disappear day after) - max_shows range setting (default 4) limits display on homepage - Full-width orange outlined VIEW ALL DATES button links to /pages/dates - Dark design: orange Bebas Neue date, DM Sans venue, DM Mono city - SOLD OUT grey label replaces button when toggled templates/index.json: - Restored full custom homepage: gk-hero, featured-collection, gk-tour-dates, gk-stream-follow, gk-featured-gristle, gk-sponsor-logos, gk-spotify-embed - Replaces the Dawn default sections (image-banner, collage, video, multicolumn) https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
Replace Bandsintown with custom tour dates + rewrite Spotify embed se…
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
The snippet was checking `mode == 'render'` but both section files were calling it with mode: 'render_home' and mode: 'render_page', so no rows ever rendered. Now handles all three calling conventions: - render_home → gk-date-row prefix (home section CSS), no is-hidden - render_page → gk-date prefix, is-hidden on rows beyond visible_count - render → legacy explicit mode (row_prefix + use_hidden_class params) - count → returns upcoming date count only Also adds backward compatibility for gk-dates-page.liquid which uses the legacy mode: 'render' calling convention with explicit row_prefix param. To add/edit dates, update the _gk_dates_raw capture block in the snippet. Both sections update automatically. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…s-LpfJ9 Fix shared tour dates snippet: handle render_home and render_page modes
Fills _gk_dates_raw with 20 confirmed upcoming dates from the Paul Gilbert WROC World Tour 2026 (Greg Koch opens all US dates). Dates run April 22 – May 30, 2026 across 20 cities. Each entry includes a direct venue/ticket URL. Only the capture block was changed — all rendering logic, CSS, and section files are untouched. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…s-LpfJ9 chore: replace placeholder dates with real Greg Koch 2026 tour dates
- snippets/gk-tour-dates-shared.liquid now reads from shop.metaobjects.tour_date.values (sorted by date) as the primary source of truth; falls back to the _gk_dates_raw capture block when no metaobject entries exist, so the site never shows a blank list. - Metaobject fields used: date, descriptor, venue, city, state, ticket_url, sold_out (type handle: tour_date). - New "descriptor" line (e.g. "support for Paul Gilbert") renders between venue and city in the __details block for both home and page row variants. - Added .gk-date-row__descriptor CSS to gk-tour-dates-home.liquid. - Added .gk-date__descriptor CSS to gk-dates-page.liquid and gk-tour-dates-page.liquid. - All existing CSS classes, JS reveal behaviour, and section schemas are untouched. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Creates sections/gk-tour-dates.liquid — a single section file that
replaces gk-tour-dates-home and gk-dates-page. It is registered as
a STATIC section in layout/theme.liquid so one instance (and one set
of blocks) is shared between the homepage and the dates page.
Architecture:
- layout/theme.liquid renders the section when template is 'index'
or suffix is 'dates' — same instance, shared block data
- Template detection picks the rendering variant:
index → gk-date-row classes + simple reveal (home look)
page/dates → gk-date classes + show-more/fewer (page look)
- Blocks sorted ascending by date; past dates filtered automatically
- Unparseable dates kept visible (safe fallback)
- All CSS (gk-date-row AND gk-date namespaces), JS, glow effects,
orange accents, and hover states are preserved pixel-identical
templates/index.json: removed gk-tour-dates-home instance
templates/page.dates.json: emptied; static section is the content
Dylan's setup checklist:
1. Go to Online Store → Customize (homepage or dates page)
2. Click the "GK Tour Dates" section in the sidebar
3. Add blocks (type: Show) — one block per date
4. Fill in: Date, Venue, City/State, Descriptor, Ticket URL, Sold out
5. Reorder blocks by dragging — they also sort automatically by date
6. Settings: home_visible_count = 3, page_visible_count = 10
https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Architecture: - Reverts static section from layout/theme.liquid (removed) - Restores both section instances in their original JSON template positions: gk_tour_dates_home_dLWg9B in index.json (between featured_collection and gk_stream_follow) and gk_dates in page.dates.json — homepage placement preserved exactly - Adds global theme setting gk_tour_dates_data (textarea) to config/settings_schema.json under group "GK Tour Dates" - Updates snippets/gk-tour-dates-shared.liquid to read from settings.gk_tour_dates_data when non-blank; falls back to hardcoded _gk_dates_raw capture block so site never breaks New textarea format (one date per line): YYYY-MM-DD | Descriptor (optional) | Venue | City | State | Ticket URL (optional) | sold_out (optional) No changes to: - Any CSS, class names, or markup structure - glow/orange accent styles or hover transitions - JS reveal behavior (show more / show fewer) - Section schemas or per-section settings - visible_count: home=3, dates page=10 (unchanged) https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Architecture (slot/mount pattern): - Creates sections/gk-tour-dates-shared.liquid — ONE static section rendered once per page-load in layout/theme.liquid inside a hidden #gk-tour-dates-mount wrapper; JS moves it into #gk-tour-dates-slot which sits at the correct position in the page template. - Creates sections/gk-tour-dates-slot.liquid — renders only <div id="gk-tour-dates-slot"></div>; acts as the insertion point. Data model: - All tour dates are stored as blocks (type: "date") on the shared section. Fields: date, descriptor, venue, city, state, ticket_url, sold_out — all editable via the Theme Editor sidebar. - Editing once updates both homepage and dates page simultaneously. Template-aware rendering: - template.name == 'index' → home style (.gk-tour-dates / .gk-date-row) initial_visible=3, reveal_step=3, style.display JS - template.suffix == 'dates' → page style (.gk-dates / .gk-date) initial_visible=10, reveal_step=10, is-hidden class JS No visual changes: - All class names, CSS, spacing, glow, hover transitions, and button styling copied verbatim from existing gk-tour-dates-home.liquid and gk-dates-page.liquid into the shared section. - Homepage position unchanged (between featured_collection and gk_stream_follow in index.json order array). - Old section files left untouched for reference. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
… fallback
layout/theme.liquid (1-line change):
Mount now renders {% section 'gk-tour-dates' %} — the canonical 854-line
section with blocks — instead of the redundant gk-tour-dates-shared section.
sections/gk-tour-dates.liquid (2 insertions, no existing logic touched):
Insertion A (after upcoming_count loop): when section.blocks.size == 0,
calls render 'gk-tour-dates-shared' mode:'count' to get upcoming_count
from the snippet (settings.gk_tour_dates_data or hardcoded fallback).
Insertion B (wraps existing sorted-blocks render loop): when blocks empty,
renders via snippet (render_home for index, render+row_prefix for dates
page). When blocks are present, runs the existing sorted loop unchanged.
Result: existing dates keep showing after deployment; as soon as the first
block is added in Theme Editor, blocks become the sole data source.
sections/gk-tour-dates-slot.liquid (schema only):
Added a paragraph setting that tells the user this is a position anchor
and directs them to the GK Tour Dates section for block management.
No CSS, JS, class names, markup, or template JSON changed.
https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…r dates) Replaces old placeholder TicketWeb URLs with the real Greg Koch 2026 tour dates that are already on main (City Winery, The Vixen, Iridium, etc.) so this branch merges cleanly without conflicts. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…on-LpfJ9 Claude/unified tour dates section lpf j9
- Both templates now use 'gk-tour-dates' type directly (no slot needed) - All 20 April-May 2026 shows pre-loaded as editable blocks in each template - Removed slot/mount JS from layout/theme.liquid - Dropped dependency on settings textarea entirely How to edit dates in Theme Editor: Homepage: Customize → click 'GK Tour Dates' section → add/edit/remove Show blocks Dates page: Customize → Dates page → click 'GK Tour Dates' → add/edit/remove Show blocks Each block has individual fields: Date, Venue, City/State, Descriptor, Ticket URL, Sold out. No pipe-delimited formatting required. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…s-LpfJ9 refactor: replace slot/mount with direct block-based tour dates
Previously, dates like "Thu, FEB 28" or "Feb, 29" silently disappeared because Liquid parsed them to a wrong year (e.g. year 28 AD), producing a non-zero timestamp far in the past. The _show_ts == 0 safety net didn't catch these. New logic: - Default: show ALL blocks (keep = true) - Only hide when date parses to a valid year >= 2020 AND is before today - Misparses (year < 2020), unparseable dates, and blank dates with venue/city data all stay visible and sort to the end - Updated hint text: "IMPORTANT: Include the full year — e.g. February 28, 2026" https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…on-LpfJ9 fix: forgiving date parsing — only hide confirmed-past dates
…nstead Pre-seeding blocks via git causes Shopify's editor to replace ALL blocks with just the new one when the user clicks "Add Show". This is a Shopify editor limitation: it doesn't merge git-committed blocks with editor-created blocks in its draft state. With 0 blocks in the template, the section correctly falls back to the snippet (snippets/gk-tour-dates-shared.liquid) which shows all 20 April–May 2026 dates with working GET TICKETS links. To add a new show: click "Add Show" in the editor. Once a block exists, only blocks render (not the fallback). To fully migrate to blocks, add all dates as blocks via the editor and they will persist correctly. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Two new sections + shared snippet: sections/gk-bandsintown-home.liquid (default: 3 visible, reveal 3) sections/gk-bandsintown-page.liquid (default: 10 visible, reveal 10) snippets/gk-bandsintown-embed.liquid (CSS + BIT widget + JS) - Dark glass cards matching site aesthetic (rgba black, orange glow) - Orange pill GET TICKETS buttons with hover lift - RSVP buttons and BIT artist header hidden - MutationObserver waits for async widget render then applies show/hide logic; show-more button reveals N more per click - Fully scoped CSS (.gk-bit-home / .gk-bit-page) — no global leakage - Responsive: stacked layout on mobile - All settings editable in Theme Editor (artist name, visible count, reveal step, heading, subtext, padding, bg color) No existing files modified. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…on-LpfJ9 Claude/unified tour dates section lpf j9
- Strip snippet to widget markup only (CSS/JS now live in section files) - Scoped CSS with !important overrides: glass card rows, orange hover glow (translateY + border-color), pill-shaped ticket buttons with glow shadow - JS rewrite: MutationObserver with 200ms debounce, setInterval retry (250ms × 20 = 5s max), double-init guard via data-bit-initialized, 6-selector fallback chain for reliable event-row detection https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…s-LpfJ9 fix: stronger CSS overrides + robust show-N JS for BIT sections
Committed from shop: Greg Koch
Remove all !important CSS overrides for event rows (glass card, hover glow, pill ticket buttons, flex layout, date/venue/location colours). BIT widget now renders with its own native styling. Kept: section layout CSS, hide-header/RSVP rules, show-more button style, and the full MutationObserver + setInterval + debounce show-N JS. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…ns-LpfJ9 fix: revert BIT styling to native widget; keep show-more JS only
Restores the full custom CSS styling that makes the tour dates look like the old website: - Glass card design with backdrop blur and subtle borders - Orange date styling with hover effects - Full button styling with shadows and brightness transitions - Mobile responsive layout adjustments - Improved JS selectors for more reliable event detection The show-more dropdown button functionality now has the proper custom styling it deserves. https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…vents
Previous code used style.display='none' which CSS !important rules could
override, meaning all events stayed visible. Now uses:
- el.style.setProperty('display','none','important') to hide (beats any CSS)
- el.style.removeProperty('display') to show (restores native widget display)
- data-gk-hidden attribute to track state instead of checking style.display
- Retry timeout extended to 10s for slow connections
- Stripped all custom event row CSS that was fighting the hiding logic
Home page: 3 dates on load, 3 revealed per click
Dates page: 10 dates on load, 10 revealed per click
https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…ns-LpfJ9 Claude/unify tour dates sections lpf j9
…bust show-more - Replace broken snippet reference with official Bandsintown anchor-initializer embed (bit-widget-initializer) + dynamic script loader (window.__gkBitLoaded guard) - Match site aesthetic: Bebas Neue/DM Mono/DM Sans fonts, #E8690A orange accent, radial-gradient glass cards with border rgba(255,255,255,0.10) - Heavy scoped CSS overrides (!important) suppress BIT chrome (header, footer, powered-by, RSVP buttons, social share) and restyle event rows + ticket buttons - Hover: translateY(-1px) lift, rgba(232,105,10,0.45) border, orange inset glow - Ticket buttons: orange pill (#E8690A bg, DM Mono 12px, 0.12em tracking) - Show-more: MutationObserver + 300ms retry loop (12s max), data-gk-hidden attr, SHOW MORE DATES button hidden when no events remain - Theme editor: show small informational notice but still attempt widget render - Home defaults: 3 initial / 3 per click / 900px max-width - Page defaults: 10 initial / 5 per click / 1100px max-width - max_width range setting added to both sections https://claude.ai/code/session_01Nr2QngJBUeVEivxvKEa7dU
…s-S1RfF Rewrite BIT sections with real widget embed, glass-card aesthetic, ro…
Root cause: `window.__gkBitLoaded` guard prevented BIT main.min.js from re-loading after a theme editor save. When Shopify re-renders the section HTML, the old widget DOM is destroyed and a fresh .bit-widget-initializer anchor appears — but BIT had already executed and didn't process it. Fix (both sections): - Remove the single-load guard; instead remove-then-re-add the BIT <script> tag (tagged data-gk-bit) every time the section renders, forcing main.min.js to re-execute and find the new anchor - Wrap show-more logic in a callable `bootShowMore()` function - Register a `shopify:section:load` listener (once per section, guarded by window['__gkBitEvt_' + sectionId]) that re-triggers BIT script reload + bootShowMore() with 600ms delay as a safety net for edge cases where inline scripts don't re-execute - Increase retry timeout from 12s to 15s for slower connections https://claude.ai/code/session_01Nr2QngJBUeVEivxvKEa7dU
…s-S1RfF Fix BIT widget not surviving Shopify theme editor save/re-render
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Summary:
Why are these changes introduced?
Fixes #0.
What approach did you take?
Other considerations
Decision log
Visual impact on existing themes
Testing steps/scenarios
Demo links
Checklist