Site Build Log
VolkenGives.org Change Log — Developed and Authored by McKay Bailey (Updated 06/09/26)
Full implementation list for volkengives.org Shopify site
File
New section/snippet file
CSS Style rule added
Setting Theme/admin setting changed
Text Copy written or edited
Fix Bug or code fix
(McKay Notes) Important FYI:
Text
The Lift cause UUIDs
(a1f989ea... for Graduate Suit Fund and a1fa06a3... for Belt Buckle Fund) are hardcoded in donation-hero.liquid. If you ever delete and recreate a cause in Lift those will need to be updated.
Text
The Lift CSS selectors
(the _gewze_ class names) are auto-generated and can change if Lift pushes a widget update — if styling ever breaks on the forms, that's the first place to look.
Text
Page templates fix
About uses page.about and Graduate Support uses page.graduate-support. If you ever add new pages and don't want them sharing sections, repeat that process of creating a unique template per page.
New Section Files Created
File
footer.liquid — Custom footer section
Three-column layout with logo block, partner logo placeholders, Instagram/Facebook/YouTube social links with arrow icons, Privacy Policy/Terms/Contact legal links, © 2026 Volken Gives copyright. Logo set to aspect-ratio 1/1 square. Deployed to sections/footer.liquid.
File
header.liquid — Custom header snippet
Logo block pulling from settings.logo with text fallback. Navigation driven by main-menu linklist with dropdown support. Right-side icon area. Mobile layout: logo centered with position:absolute, hamburger/search left, cart/account right. Deployed to snippets/header.liquid.
File
donation-hero.liquid — Donation hero section
Two-column layout: left copy column (logo, divider, heading, subtext, two stats) + right white form panel. Supports Lift app block via @app block slot. Flipped dark variant (.donation-hero--dark) for second form. Auto-selects Lift cause via UUID on load. Cart redirect via window.fetch intercept with 3s delay. All copy editable in theme editor.
File
donation-hero.css — Donation hero styles
Full brand-matched restyling of Lift widget auto-generated class names using !important overrides. IBM Plex Sans typography, Volken blue color scheme, mobile responsive stacking. Deployed to assets/donation-hero.css.
File
marquee-statement.liquid — Spread words across line section
Words spread across full width above a horizontal line with tick marks below each word. Theme editor controls for text, colors, font size, padding. Final text chosen: "VOLKEN GIVES SO OTHERS MAY THRIVE". Deployed to sections/marquee-statement.liquid.
File
enhanced-links.liquid — Link card row section
Grid of clickable link cards with red corner crosshair accent, inspired by NYP design. Block-based so labels and URLs are set in theme editor without code. Responsive: 4-column desktop → 2-column tablet → 1-column mobile. Deployed to sections/enhanced-links.liquid.
CSS Rules Added (theme.css / Custom CSS)
CSS
Footer background & text color override
.footer-inner { --footer-bg: #334B77 !important; --footer-color: #231F20 !important; } — Added to Customize → Theme settings → Custom CSS.
CSS
Red accent line above headings
.rte h2::before and .image-with-text__text--1 h2::before — 40px wide, 5px tall red line above H2 headings. Covers both page content and image-with-text sections. Added to theme.css.
CSS
Hide cart & account icons from header
.header-cart and account icon selectors set to display: none !important. Added to header custom CSS.
CSS
Nav font size & color
nav a { color: black; font-weight: 400; font-size: 13px; } — Applied to main navigation links.
CSS
Mobile overflow fix (horizontal shifting)
html, body { overflow-x: hidden; max-width: 100%; } — Stops the page from shifting left/right while scrolling on mobile. Added to layout/theme.liquid or base.css.
CSS
Instagram icon hide on hover (six-image section)
.img-link:hover .icon { opacity: 0 !important; } with transition — Hides the Instagram overlay icon when user hovers over photo grid images.
CSS
Mobile header padding (hamburger menu)
.header-menu-mobile { padding-left: 16px !important; } — Adds breathing room to the hamburger menu on mobile. In snippets/header-styles.liquid.
CSS
Collection title styling (IBM Plex Sans)
.collection-three__title { font-family: 'IBM Plex Sans'; font-size: 20px; font-weight: 500; letter-spacing: 0.5em; text-transform: uppercase; color: #3E4047; }
CSS
Video background mobile min-height fix
@media (max-width: 767px) { .vela-section__content { min-height: 450px; } } — Prevents the overlay content box from being cut off on mobile. Added to video-background.liquid style block.
Bug Fixes
Fix
six-image.liquid — 6th image showing 5th image bug
Copy-paste error in theme file: last image block referenced image5/image5_url twice. Fixed all references to image6/image6_url.
Fix
Page templates — About & Graduate Support sharing content
Both pages were on the same Shopify template, so edits bled across. Fixed by creating separate page templates (page.about, page.graduate-support) in the theme editor and assigning each page its own template.
Theme Settings Changes
Setting
Video section aspect ratio
Changed from 21x9 to 16x9 in the theme editor so the video hero section is taller and the overlay content box fits without clipping on desktop.
Setting
IBM Plex Sans font import
Added Google Fonts link to theme.liquid <head> for IBM Plex Sans weight 500.
Copy Written or Edited
Text
Graduate Support fundraising description (shortened)
Original long paragraph condensed to two focused paragraphs for the Graduate Support page section.
Text
"Support Their Next Chapter" page copy (HTML width fix)
Wrapped in max-width: 680px centered container so text doesn't stretch edge-to-edge on wide screens. Stays left-aligned.
Text
Student count caption
Refined from "150+ students and growing across our three locations in the Western United States" — final version names the states: "150+ students and growing across Washington, Utah, and Arizona."
Text
Marquee section statement text
Brainstormed and selected final text for the spread-word section: "VOLKEN GIVES SO OTHERS MAY THRIVE".