Theme structure
How the ASC theme is organised, which layout loads which bundles, the globals the JavaScript relies on, and which files are generated or unused.
The theme started from Shopify's Dawn theme, version 13.0.1. ASC pages are built from custom sections and snippets, and much of the Dawn code remains but is not rendered. Check a file is used before changing it. Legacy and unused code lists the known unused files.
Layouts
| Layout | Used by | Adds |
|---|---|---|
layout/theme.liquid | Every template except the three product templates and password | Site-wide camp data, GTM, gtag and Hotjar snippets, SportsOrganization JSON-LD, camp types modal, Klaviyo interest tagging on no-camps-available pages |
layout/theme.product.liquid | product.json, product.saleable.json, product.redirect.json | Booking form mount point and settings, booking bundles, Afterpay messaging, redirect to add ?variant= |
layout/password.liquid | password.json | No bundles |
Anything added to one of the two main layouts usually needs adding to the other. Hotjar is an example of something present in only one.
Scripts and stylesheets
| File | Built from src/ | theme.liquid | theme.product.liquid |
|---|---|---|---|
styles.css, vendors.css | Yes | Yes | Yes |
vendors.bundle.js, custom.bundle.js, runtime.bundle.js | Yes | Yes | Yes |
date-picker.bundle.js | Yes | Yes | Yes |
vendors-booking.bundle.js, camp-booking.bundle.js | Yes | No | Yes |
jquery-3.7.1.min.js, swiper-bundle.min.js, maplibre-gl.js and other vendored libraries | No | Yes | Yes |
map-renderer.js, camp-list.js, camp-finder.js and other feature scripts | No | Loaded by their sections | Loaded by their sections |
Do not edit a built file in theme/assets/. The next build overwrites it. styles.bundle.js and camp-booking.css are also written by the build but nothing loads them.
Every script tag uses defer. runtime.bundle.js comes after the entry bundles in both layouts and starts them once loaded.
Scripts matching window.YETT_BLACKLIST, defined near the top of both layouts, are held back by yett until the first user interaction. The list covers Klaviyo, Hotjar, Clarity, Google Maps, camps-map.js, camp-list.js and camp-location.js. A new script that must run before interaction must not match those patterns.
Globals
The layouts write data onto window for the bundles and theme scripts.
| Global | Set in | Contains |
|---|---|---|
window.theme.api.root | Both layouts | Theme setting gcloud_api_root |
window.theme.webhooks | Both layouts | Zapier hook URLs from ASC - Webhooks settings |
window.theme.campBookingConfig | theme.product.liquid | Booking form labels and limits from ASC - Camp Booking settings |
window.theme.product, window.theme.selectedVariant | theme.product.liquid | The product and the selected variant as JSON. Not updated if the variant changes without a page load |
window.theme.landingPage | theme.product.liquid | The product's Landing Page metafield |
window.theme.locations, window.theme.cities | Both layouts | Location and City metaobjects |
window.theme.allCamps, window.theme.campProducts | theme.liquid | Every visible camp variant in the All Sports Collection |
window.theme.campGeojsonData | snippets/camps-geojson.liquid | Map data for the page |
window.theme.campFinder | sections/camp-finder.liquid | Map pin image URLs and search destination |
window.Shopify.customer | Both layouts, logged-in customers only | Id, email, marketing consent and the custom and membership_pass metafield namespaces |
window.Shopify.routes | Both layouts | Shop routes such as cart_url |
theme.product.liquid does not paginate the Location list, so product pages receive at most the first 50 locations. theme.liquid paginates by 1,000.
Templates and sections
Pages are JSON templates. The main groups:
| Group | Templates | Main sections |
|---|---|---|
| Camp product | product.json | main-product, product-selling-block, camp-location, brochure-newsletter-subscription, sticky-add-to-cart |
| Physical product | product.saleable.json | main-product-saleable |
| Pass product | product.redirect.json | custom-liquid redirect, main-product-saleable |
| City and sport pages | page.find-a-camp-location.json, page.find-a-camp-sport.json, page.find-a-camp-sport-partner.json, page.no-camps-available.json | hero-with-video, camp-list, resources-grid, asc-state-school-holidays |
| SEO landing pages | page.combo-landing-page.json, page.camp-landing-page.json | seo-camp-cards, booking-ctas |
| Get started map | page.get-started.json | full-camp-map |
| Cart | cart.json | asc-new-cart-layout |
| Home | index.json | hero-with-video, city-location-list, carousel-with-tabs, camps-map, faqs, camp-finder |
The header and footer are section groups, sections/header-group.json and sections/footer-group.json. The header group also holds the Countdown Banner.
sections/main-product.liquid renders fixed snippets and ignores its blocks and most of its Dawn settings. Only its CVP settings have an effect.
Two sections share the editor name "Booking CTAs": booking-ctas.liquid, which reads a page's SEO Landing Page: Variants, and seo-camp-cards.liquid, which filters a collection by sport and city.
All templates, sections and their editor names are listed in Templates and sections.
Text
Storefront strings are in locales/en.default.json. Camp card titles use templates such as sections.camp_card.* with {{ sport_name }}. Contact details in the Contact menu come from general.contact_details. Membership pass wording is under membership_pass.
Section editor labels are mostly written directly in each schema. A few use t: keys resolved from locales/en.default.schema.json. The ASC Header "Getting Started Destination" key is missing from that file, so the editor shows the raw key.
Admin code edits
Staff and agencies have edited Liquid through the Shopify Admin code editor, for example adding JSON-LD to layout/theme.liquid and sections/faqs.liquid. Those edits arrive as bot commits. Read recent bot commits on main before changing a layout.
Source map
| Concern | File |
|---|---|
| Theme settings | theme/config/settings_schema.json |
| Shopify CLI environments | theme/shopify.theme.toml |
| Formatting rules for Liquid | .prettierrc.json, with @shopify/prettier-plugin-liquid |