Theme Changelog

All notable changes to the Good Grains Shopify theme will be documented in this file. Format follows Keep a Changelog. Versions follow Semantic Versioning.

Unreleased

No pending changes.

1.10.3 2026-06-05 10:32

Fixed

  • Where to Buy: the Tess illustration above the store list was getting clipped by the sticky header. The sidebar now sits lower so she clears the header in full, with the top and bottom spacing decoupled so each can be tuned without affecting the other.
  • Press releases (blog posts): a featured image is no longer required — articles with no image now render nothing in that spot instead of a generic placeholder graphic.

1.10.2 2026-06-03 16:21

Fixed

  • Where to Buy on phones: the zip-code search and "use my location" button now reorder the store list by distance to the searched location. In the previous update they had no effect on phones (the map, which they used to recenter, is hidden there).

1.10.1 2026-06-03 15:41

Changed

  • Where to Buy on phones: the map is now hidden and the page shows a clean, full-width store list — the sidebar drops its card framing (rounded corners, shadow) and flows as normal page content, which is easier to scroll on small screens. The map (and its Mapbox load) is skipped entirely on phones, so the page is lighter there too.

1.10.0 2026-06-03 14:16

Added

  • New "Where to Buy" store locator: an interactive map of retail locations carrying Good Grains, paired with a searchable, scrollable store list that stays in sync with the map as you pan, zoom, and select
  • Shoppers can search by zip code to recenter the map on the nearest stores, filter by retailer, and tap a map pin or list entry to see that store's address and hours
  • Map clusters nearby locations at wider zoom levels so dense metros stay readable, expanding into individual stores as you zoom in
  • Retailer branding throughout the locator — brand marks on map pins, popups, and filter chips, with full wordmark logos in the result list

1.9.0 2026-06-03 11:33

Added

  • Blog post template: heading, metadata (date/author), featured image, and body are now movable theme blocks — reorder them in the theme editor instead of the old fixed layout
  • Blog post featured image: independent width control (Full / Wide / Medium / Narrow) tied to the 3-column grid, separate from the body
  • Blog post body & metadata: width controls so each respects the content column
  • Header: width-aware menu now compresses against an invisible logo spacer in the grid center, so menu items drop off the bar as space tightens
  • Content width control added across more sections (homepage bundle block, footer, collection email-capture) so the admin can set how wide each section's content sits
  • Blog featured image: extra aspect ratios (3:1, 2:1) plus an organic blob crop matching the homepage hero, with a placeholder when no image is set
  • Blog post blocks (metadata, section): independent top/bottom spacing controls

Changed

  • Blog post section: rebuilt on the standard 3-column grid/container system; body content now sits in the centered content column instead of running edge-to-edge
  • Header: +12px vertical breathing room on desktop so the logo isn't flush against the edges (mobile spacing unchanged)
  • Blog post image and content blocks made public (renamed from private _-blocks) so they can be movable; added a dedicated public blog-post-meta block for the movable date/author
  • Homepage, collection, and cart copy: removed pre-order / "Ships March 11" / "Limited availability" messaging — updated to general-availability copy and CTAs ("Add to bag", "Get Good Grains", footer "Subscribe")
  • Cart page: removed a redundant second product-list section

Fixed

  • Blog post body ran full-width to the page edges — the container's 3-column grid was being overridden by a flex layout
  • Blog post template was disabled/worked around on live — re-enabled with the new movable block structure
  • Header menu was not responding to viewport width at all — the menu column couldn't shrink, so the overflow-list never engaged
  • Homepage hero: thin dark hairline at the curved divider seam (subpixel rounding) — variety-pack background now overlaps the seam by 1px to cover it
  • Blog and section blocks: width and placement controls now actually take effect — the blocks weren't rendering as direct grid/flex children, so their sizing was being silently ignored

1.8.4 2026-03-18 14:26

Changed

  • Honey Puffs nutrition facts: updated to match new label (3/17/26) — calories 110, sodium 150mg, fiber 3g, added sugars 4g, plus calcium/iron/potassium adjustments
  • Cinnamon Puffs nutrition facts: updated to match new label (3/17/26) — calories 110, sodium 130mg, fiber 3g, added sugars 4g, plus iron/potassium adjustments
  • Corn Puffs nutrition facts: sodium corrected to 115mg; wheat allergen note removed (corn is wheat-free)
  • Honey and Cinnamon product pages: nutrition highlight badges recalibrated — 110 calories, 4g added sugar, 3g fiber

Added

  • Non-UPF Verified certification badge: added to all five product pages as the last badge in the certification row
  • Homepage hero: box carousel upgraded to staggered round-robin animation — each box slides, scales, and crossfades individually instead of instant position swaps
  • Grain story section: automatic single-column centered fallback when character images aren't set

Fixed

  • Homepage hero: box swiping behavior — carousel now properly animates between flavors with smooth departure/arrival transitions instead of instant jumps
  • Homepage hero: entrance animation was leaving transition: none on cereal boxes, preventing CSS hover/position transitions from working after page load
  • Homepage hero: scroll animation loop now catches errors per-frame instead of halting entirely on a single exception

1.8.3 2026-03-11 13:56

Added

  • Changelog page: dedicated stylesheet with typographic hierarchy, version headings, date badges, and inline code formatting
  • Main page section: content_width setting (full / wide / medium / narrow / half) with full-width container support
  • Changelog page excluded from search engine indexing via noindex meta tag

Changed

  • Homepage and collection pages: removed pre-order references, "March 11" shipping dates, and "Limited availability" copy — updated CTAs to reflect general availability

Fixed

  • Cart icon: count bubble alignment corrected across browsers (SVG mask recentered + wrapper display fix)

1.8.2 2026-03-11 08:53

Fixed

  • Flavor picker script loads reliably on all pages (switched to defer loading strategy)

1.8.1 2026-03-11 07:27

Fixed

  • Email signup modal: styles now load correctly on all pages — stylesheet was incorrectly scoped to the password page only
  • Shopping cart bubble: count badge repositioned to sit centered on the cart icon instead of offset to one side
  • Homepage hero: flavor pill labels no longer orphan a single word on line break — pills wrap evenly with balanced text
  • Homepage hero: adjusted box stacking offset and added smoother fan animation origin
  • SVG elements no longer bleed outside their containers (global overflow clip applied)

1.8.0 2026-03-10 01:27

Added

  • Scroll animation system: new scroll-animations.css and scroll-animations.js with stagger support for entrance effects
  • Compact buy-controls variant (buy-controls-compact.js) for streamlined PDP purchase flow
  • Button font-size token (--button--font-size)

Changed

  • Display font-size clamps retuned for better mobile scaling (smaller minimums at 375px)
  • Button shadows reworked to solid offset style; hover states use --accent-light instead of --accent-dark
  • Drawer and popover shadows switched to solid offset style matching buttons
  • Section design reviews applied: about-us, cta-banner, email-capture, faq, flavor-picker, grain-story-homepage, homepage-hero, inline-statement, pdp-buy-bar, pdp-hero, pdp-whats-inside
  • Homepage hero: scroll-animation integration, layout and spacing refinements
  • PDP buy bar: restructured layout with improved responsive behavior
  • Flavor picker: keyboard accessibility and interaction improvements
  • Hardcoded values swept across snippets and sections — replaced with design tokens throughout

Fixed

  • Hero section: max-height constraint now only applies above 750px viewport width

1.7.4 2026-03-06 21:06

Changed

  • Bundle cards: replaced client-side Storefront API fetch with server-rendered Liquid using bundle_flavors metafield — removes component-bundle-card.js entirely
  • Social proof: all hardcoded --brand-brown / --brand-cream references replaced with semantic --color-foreground / --color-background tokens
  • Footer: link colors use --color-foreground-muted, trust bar and copyright use semantic tokens instead of --brand-oat, error color uses --color-error token, hardcoded gaps replaced with spacing tokens
  • Footer and homepage hero: added content_width section setting for container width control
  • PDP buy bar: box-shadow removed from scrolled state, setTimeout replaced with transitionend listener for height recalculation, Escape key closes flavor picker, aria-expanded properly toggled, section restricted to product templates only
  • PDP flavor picker: hardcoded transition values extracted to --fyf-transition-speed / --fyf-transition-ease CSS variables, rgba() replaced with color-mix(), script tag uses defer instead of import map
  • Tokens: --gap-lg now fluid (clamp(1rem, …, 2rem)), --color-foreground-muted defined in light scheme, dark scheme uses --brand-oat

Removed

  • component-bundle-card.js — bundle card rendering is now fully server-side

1.7.3 2026-03-05 20:12

Changed

  • Homepage hero: added <link rel="preload"> for the hero image with full srcset for faster LCP
  • Email modal: logo and icon images switched from eager to lazy loading (below-fold content)
  • Flipcard: icon images marked as lazy loading
  • Social icons: decorative alt text replaced with empty alt="" (icons already have visually-hidden labels)

Fixed

  • Social proof: --accent-dark fallback added to prevent invisible text when variable is undefined

1.7.2 2026-03-05 18:58

Changed

  • CSS architecture: split base.css into template-specific bundles — product.css, collection.css, policy.css — loaded conditionally per page type
  • Flipcard CSS now only loads on the password template
  • Removed predictive-search card hover styles and product-specific selectors from the global stylesheet
  • Homepage hero: box images switched from lazy to eager loading; hero image sizes widened to 110vw for edge-to-edge coverage

1.7.1 2026-03-05 16:56

Added

  • New --brand-oat color token (#BB9B70) for muted text on dark backgrounds (5:1 contrast on brown)

Changed

  • Footer: copyright and trust bar text now use --brand-oat instead of opacity hacks
  • Homepage hero: swipe hint color changed from caramel to cream for better visibility
  • Social proof: review metadata color uses --accent-dark token instead of inline color-mix
  • Curved background (dark mode): switched from static asset to Shopify Files CDN with responsive srcset (600w–2000w)

1.7.0 2026-03-05 12:35

Changed

  • Menu drawer: replaced <details>/<summary> pattern with semantic <div>/<button> and CSS class toggle for full JS control of open/close lifecycle
  • Account panel: desktop popover removed; unified into a single dialog-based drawer for all breakpoints with icon-to-close toggle
  • Cart drawer and account drawer now use a shared dialog-anchor positioning system that pins panels to the header's actual bottom edge
  • Dialog component: new anchor positioning API (dialog-anchor attribute + --dialog-anchor-inset variable) for dynamic top-edge alignment
  • Global button reset: UA defaults (appearance, background, border, padding, cursor) stripped at element level; redundant per-component resets removed
  • Contact form: input styling deferred to unified system in base.css; added distinct error/success color tokens
  • Review carousel: scroll padding moved to inner scroll container for correct snap alignment
  • Cart/account close icon size reduced from --icon-size-md to --icon-size-xs for visual consistency

Fixed

  • Flavor picker carousel: added overflow-x: clip / overflow-y: visible so off-screen cards are hidden but hover states can exceed container bounds

1.6.1 2026-03-04 20:05

Fixed

  • Header: clicks on empty space between menu items now pass through to the logo layer beneath (pointer-events fix)

1.6.0 2026-03-04 19:48

Changed

  • Header architecture: logo extracted into independent stacking layer, allowing PDP hero to visually interleave between logo and nav controls
  • Header menu: three separate menu blocks (desktop, mobile, nav bar) unified into a single block with simplified settings
  • Mobile drawer: fully rewritten with 4-zone layout (primary nav, featured products, secondary nav, social/legal footer)
  • Overflow/"More" menu removed — items that don't fit are now simply hidden
  • Dialog/modal CSS: replaced dialog-modal/dialog-drawer classes with a shared .panel component system (.panel--modal, .panel--drawer, .panel--bottom-sheet)
  • Scroll lock: centralized into a single scrollLock utility (replaces multiple per-component implementations)
  • Cart drawer: now toggles from the header cart icon (icon swaps to X when open), pins below header instead of covering it
  • Cart drawer close button removed from inside the drawer
  • Header grid: full-width by default, center column removed (logo no longer in grid)
  • Mega menu flavors: sourced from curated product list setting instead of navigation link children
  • Homepage hero parallax: increased ring buffer for more dramatic scroll stagger effect
  • Anchor scroll offset: dynamically uses header height instead of static estimate
  • Display headings: text-wrap: balance applied to all display size utilities
  • Scroll margin reduced from 50px to 40px
  • Account popover/drawer: uses shared .panel styles and CSS-only close button

Added

  • Logo backing SVG asset for header logo visual treatment
  • .panel__close component with CSS-only X icon and WCAG 2.5.5 touch target compliance
  • scrollbar-gutter: stable on html to prevent layout shift during scroll lock
  • Cart drawer toggle method and icon swap behavior
  • New header menu settings: menu_secondary, drawer_featured_heading, drawer_featured_products

Removed

  • Overflow/More menu system (OverflowMinimumEvent, slot reassignment, "More" dropdown)
  • Per-component scroll lock implementations (replaced by centralized utility)
  • Header menu typography customization settings (type_font_primary_size, menu_font_style, etc.)
  • Mobile navigation bar settings (navigation_bar, color_mode_navigation_bar)
  • Drawer layout settings (drawer_accordion, drawer_accordion_expand_first, drawer_dividers)
  • html[scroll-lock] CSS rule
  • Close buttons from inside cart drawer and mobile drawer (now toggled from header)

1.5.1 2026-03-03 21:03

Fixed

  • Header overlay mode: menu and actions columns now stack above the scaled logo (z-index fix)
  • Homepage hero: secondary button respects the section link setting instead of using a hardcoded anchor

1.5.0 2026-03-03 20:36

Added

  • PDP flavor carousel: new touch-friendly GSAP-powered carousel for flavor picker on mobile/tablet (replaces static grid under 1300px)
  • Font preloading: Atyp Text and Bogart Compressed woff2 files preloaded to reduce render-blocking waterfall
  • Mobile drawer: staggered slide-up entry animations for nav items
  • Mobile drawer: flavor color dots next to product sub-items
  • Mobile drawer: inline chevron accordion indicator (replaces plus icon)

Changed

  • Display type scale: increased mobile minimums across all display sizes (e.g. 3xl from 50px to 110px, 2xl from 44px to 88px) for bolder mobile typography
  • Mobile drawer: fully redesigned with larger display type, left-aligned close button, accent underline on hover, and child item animations
  • Header/cart drawer close buttons: always show X shape (previously morphed from chevron on hover)
  • Homepage hero: image loading optimized (hero image eager, box images lazy), added GSAP preconnect
  • Homepage hero: tighter text gap on mobile, trust icons in column layout with centered text
  • Review carousel: replaced <scroll-hint> custom element with plain <div> for simpler scroll
  • Social proof carousel: full-bleed breakout from page-width container
  • About-us and CTA banner: full-width buttons on mobile
  • Footer: social link grid breakpoint lowered from 500px to 400px, copyright text-wrap balanced
  • Homepage and bundles templates: cleaned up anchor IDs and fixed CTA banner flavor anchor target

Fixed

  • Header stacking: drawer now sits above PDP hero overlay when open
  • Header actions: z-index raised above scaled logo overflow in overlay mode
  • PDP buy-bar: removed unnecessary right padding on desktop info column

1.4.0 2026-03-03 16:26

Changed

  • Homepage hero: mobile-first CSS rewrite (desktop-first → mobile-first breakpoints) with cleaner comment structure
  • Homepage hero: buttons now split 50/50 on mobile, inline from 750px+
  • Homepage hero: variety pack section uses mobile-first margin/order
  • PDP buy-bar: flex layout → CSS grid with explicit column/row placement across breakpoints
  • PDP buy-bar: flavor picker uses container queries (@container flavors) instead of media-query ranges for inline mode
  • PDP buy-bar: eyebrow positioned via translateY instead of position: absolute
  • PDP buy-bar: added "Pick your flavor" label text (replaces arrow-only hint)
  • PDP hero: per-flavor hero image positioning (honey, chocolate get custom top/height)
  • PDP hero: bottom gradient changed from fixed 15rem to 40% height
  • Cart section: replaced pixel-range padding settings with token-based select (none/sm/md/lg/xl)
  • Cart product images: object-fit: cover → contain to show full product
  • Header drawer: menu icon z-index raised for proper stacking

Fixed

  • Homepage hero swipe: added velocity-based detection (fast flick triggers rotation even with short drag distance)
  • PDP buy-bar: height recalculation waits for expand animation to finish, preventing hero jitter on scroll-up

1.3.0 2026-03-02 23:07

Added

  • Anchor scrolling support (anchor_id setting) across 21+ sections to allow linking directly to specific parts of a page.
  • Added scroll-margin-top to base.css to account for the fixed header when snapping to anchor links.

Changed

  • Reorganized CSS breakpoints in pdp-buy-bar.liquid for better maintainability and grouping.
  • Updated flavor-picker.liquid layout to prioritize flavor selection circles.
  • Cleaned up PDP Hero CSS tokens in _tokens.css.
  • Minor UI and layout adjustments in pdp-hero.liquid and cart snippets.

Removed

  • Removed legacy favicon setting from settings_schema.json (now using Shopify native or alternative method).

1.2.0 2026-03-02 12:18

Added

  • Custom favicon system (ico, 16/32/64/192px PNGs, apple-touch-icon)
  • Global email modal — post-subscribe enrichment (user type, retailer/creator forms)
  • Shared .buy-controls component for quantity + ATC button rows
  • Footer wordmark now scrolls to top on click

Changed

  • Email capture: inline form only, modal extracted to global snippet
  • Bundle cards: vertical alignment — info top, price/ATC pushed to bottom
  • Single cards: same vertical alignment pattern with __info / __commerce split
  • Singles landing: grid → flexbox layout with flex: 0 1 24rem
  • Flavor palette: button color tokens re-declared inside flavor scope
  • Homepage hero divider: grid-column instead of 100vw overflow hack
  • Cart summary: tightened discount form spacing

Fixed

  • About-us heading z-index raised above curved background
  • Cart totals gap reduced from xl to md

1.1.0 2026-03-02 08:46

Added

  • Smooth-scroll for anchor links with sticky header offset
  • Touch-friendly header menu: first tap opens dropdown, second tap navigates

Changed

  • Button links across 5 sections: conditional href instead of # fallback
  • PDP differentiation: mobile-first layout with rotated spoon, breakpoint 750→820px
  • PDP how-to-enjoy: responsive card grid (1col → 2col @ 520px → 4col @ 1200px)
  • PDP what's-inside: center-align right column on mobile

Fixed

  • Hash-only menu links (#) no longer show pointer cursor or trigger navigation

1.0.1 2026-03-01 16:59

Changed

  • Extracted shared .icon-card component to base.css (replaces duplicate card styles in about-values and pdp-nutrition)
  • CTA banner: centered text and actions on mobile, left-aligned on desktop
  • Grain story: absolute-positioned mobile characters for cleaner stacking
  • About hero/about-us: full-bleed images on mobile

Fixed

  • Added min-height clamp to hero and about images to prevent layout collapse
  • Added text-wrap: balance to section and card headings
  • Adjusted flavor picker background image scale

1.0.0-alpha 2026-03-01 16:53

Summary

Initial alpha release. Complete theme with all core pages and design system.

Includes

  • Homepage with hero, flavor picker, grain story sections
  • Product detail pages with nutrition facts
  • About page with hero, values, story sections
  • CTA banner sections
  • Full design token system (_tokens.css, base.css, brand-typography.css.liquid)
  • Flavor color system with dynamic accent colors
  • Responsive typography with clamp-based scaling