Location Grid

File: sections/locations-grid-pusher.liquid

Templates: page.locations.json

Description

Location Grid

Renders a grid of international locations with country flags, names, and the number of upcoming programs. Uses the Storefront API to check variant start dates and filter out countries with no future programs.

Features:

• Displays country flag, name, and upcoming program count
• Filters out countries with no upcoming programs
• Loading state with spinner while fetching data
• “No programs” fallback message
• Responsive grid layout
• Excludes United States (shown in separate section)

Settings:

• grid_width (range) — Number of grid columns (2-6), default 4
• heading (text) — Section heading, default “International Locations”
• loading_text (text) — Loading state message, default “Loading programs…”
• no_programs_text (text) — Empty state message, default “No upcoming international programs at this time.”

Blocks: None

Snippets Used: None

Dependencies:

• Tailwind CSS (application.css) for layout and styling
• Shopify Storefront API for variant date checking
• Inline <script> for API calls and DOM updates

Tailwind Status: Full

Settings

ID	Type	Label	Default	Info
grid_width	range	Grid Width	4
“	header
heading	text	Heading	International Locations
loading_text	text	Loading text	Loading programs…
no_programs_text	text	No programs text	No upcoming international programs at this time.

Presets

• Location Grid (Category: Locations)

Usage

This section can be added via the Shopify theme editor.

{% section 'locations-grid-pusher' %}