# Analog Theme Docs

## Analog

- [Overview](https://analog.groupthought.com/readme.md): Analog keeps layout, spacing, type, and color in theme settings so you can control the design from the theme editor.
- [The section & block model](https://analog.groupthought.com/core-concepts/model.md): How Analog builds pages from sections, blocks, and nested container blocks, and when to use a purpose-built section.
- [Global settings & local overrides](https://analog.groupthought.com/core-concepts/settings-cascade.md): How Analog settings inherit from global defaults into sections and blocks, and how to check global changes with the Styleguide section.
- [Scaling: size, space & rhythm](https://analog.groupthought.com/core-concepts/scaling.md): How Analog uses responsive scales for type, gaps, margins, width, and section spacing.
- [Typography & fonts](https://analog.groupthought.com/core-concepts/typography.md): How Analog uses four font roles and shared type presets to control typography across the theme.
- [Color](https://analog.groupthought.com/core-concepts/color.md): How Analog builds color schemes from a few roles, including derived tints, scheme slots, and contrast colors.
- [Pair sections](https://analog.groupthought.com/building-pages/pair.md): Use Pair for two-column layouts that stack on mobile, including heroes, media with text, and linked interactive blocks.
- [Card sections](https://analog.groupthought.com/building-pages/cards.md): Use Card grid, Card carousel, and Tabbed card carousels to show products, collections, articles, or custom content.
- [The Custom section](https://analog.groupthought.com/building-pages/custom-section.md): Use the Custom section to stack blocks in one vertical column with a shared gap and alignment.
- [Layered backgrounds](https://analog.groupthought.com/building-pages/backgrounds.md): Use Banner for one background image or video, or Banner layers to stack and position several background blocks.
- [Layout blocks](https://analog.groupthought.com/building-pages/layout-blocks.md): How to choose between the Frame, Row, Text group, Flex, and Grid editorial container blocks.
- [Header, toolbar & navigation](https://analog.groupthought.com/features/header.md): How to configure the Menu, Toolbar, Menu drawer, transparent header, logo swapping, and mega-menus.
- [Search](https://analog.groupthought.com/features/search.md): How to configure predictive search, suggested content, and the filterable search results page.
- [Product page & quickview](https://analog.groupthought.com/features/product.md): How the product page, Featured product section, quickview drawer, quick add, upsells, and breadcrumbs work.
- [Collection pages](https://analog.groupthought.com/features/collection.md): The collection template, its filter sidebar and drawer, sorting, the shopper-adjustable grid, and in-place pagination.
- [Cart page & drawer](https://analog.groupthought.com/features/cart.md): How to configure cart routing, the free-shipping bar, and cart upsells.
- [Badges, ratings & preorder](https://analog.groupthought.com/features/merchandising.md): How Analog renders sale, sold-out, and custom badges, star ratings, and preorder products.
- [Siblings & grouped variants](https://analog.groupthought.com/features/variants.md): Use siblings to link separate product listings, or option media to have many images for each colorway.
- [Footer](https://analog.groupthought.com/features/footer.md): How to configure footer columns, mobile accordions, and the Subfooter utility row.
- [Custom code](https://analog.groupthought.com/developer-platform/custom-code.md): How to load and use custom.css, custom.events.js, and custom.alpine.js.
- [Events](https://analog.groupthought.com/developer-platform/events.md): How to listen for Shopify storefront events and Analog theme events, including payloads and commands.
- [Developer blocks](https://analog.groupthought.com/developer-platform/blocks.md): The Custom liquid block and section for raw Liquid, HTML, CSS, and JS, and the Page content block for rendering a page resource's stored HTML.
- [Product card architecture](https://analog.groupthought.com/developer-platform/product-cards.md): How Analog product cards use Liquid and how to customize them.
- [Utilities & variants](https://analog.groupthought.com/reference/utilities.md): The theme's Tailwind extensions: custom utility classes and variants, one page per category.
- [r-scale spacing](https://analog.groupthought.com/reference/utilities/spacing.md): Utilities for spacing and sizing elements with the theme's responsive r1–r15 scale, plus the hit-area utilities for enlarging tap targets.
- [Type utilities](https://analog.groupthought.com/reference/utilities/typography.md): Utilities for applying the theme's type presets, font families, r1–r15 text sizes, preset resizing, and leading.
- [Color utilities](https://analog.groupthought.com/reference/utilities/color.md): Utilities for coloring elements from the active color scheme: the semantic palette, the mix palette, scheme-switching vars- classes, and the stain indirection.
- [Layout utilities](https://analog.groupthought.com/reference/utilities/layout.md): Utilities for arranging content: flex shorthands, grid stacking, layout-variable gaps and padding, and content alignment.
- [Custom variants](https://analog.groupthought.com/reference/utilities/variants.md): Custom variants for input method, JavaScript availability, Alpine load state, viewport intersection, and feature support.
- [Effect utilities](https://analog.groupthought.com/reference/utilities/effects.md): Utilities for visual effects: enter/exit animations, staggering, attention animations, text shimmer and stroke, gradient borders, and gradient masks.
- [Miscellaneous utilities](https://analog.groupthought.com/reference/utilities/misc.md): Single-purpose utilities: enlarged hit areas, child z-order, autofill and native-control resets, containment, and 3D helpers.
- [Alpine plugins](https://analog.groupthought.com/reference/alpine.md): One reference page per Alpine plugin, grouped by what the plugin is for. Pages marked (Analog) ship in the theme rather than tradecraft-ui.
- [x-dialog](https://analog.groupthought.com/reference/alpine/dialog.md): Directives and a magic for dialogs built on the native \<dialog> element: modal and non-modal, animated close, and focus restore.
- [x-popover](https://analog.groupthought.com/reference/alpine/popover.md): A popup whose panel renders in the browser's top layer while open, escaping clipped ancestors, with a focus trap built in.
- [x-popup](https://analog.groupthought.com/reference/alpine/popup.md): Directives and a magic for small overlays that open next to a target element.
- [x-menu](https://analog.groupthought.com/reference/alpine/menu.md): Directives and a magic for dropdown menus that follow the ARIA menu-button pattern: arrow-key focus, type-ahead, and disabled items.
- [x-listbox](https://analog.groupthought.com/reference/alpine/listbox.md): Directives and magics for accessible listboxes, including options, selection state, and form values.
- [x-select](https://analog.groupthought.com/reference/alpine/select.md): Directives and a magic for select-only dropdowns: a listbox in a floating panel, with a button that shows the current selection.
- [x-tooltip](https://analog.groupthought.com/reference/alpine/tooltip.md): Directives for tooltips: a hover-and-focus trigger and a panel that floats next to it.
- [x-disclosure](https://analog.groupthought.com/reference/alpine/disclosure.md): Directives and magics for disclosures (a button that shows and hides a panel) and for accordion groups.
- [x-tabs](https://analog.groupthought.com/reference/alpine/tabs.md): Directives and magics for accessible tabs, built on disclosure groups.
- [x-float](https://analog.groupthought.com/reference/alpine/float.md): The directive and magic for floating one element next to another with Floating UI: placement, collision handling, sizing, and update strategies.
- [x-header-dropdown (Analog)](https://analog.groupthought.com/reference/alpine/header-dropdown.md): The header's dropdown menu: a small panel of links that floats under a top-level nav item.
- [x-megamenu (Analog)](https://analog.groupthought.com/reference/alpine/megamenu.md): The header's megamenu: one shared full-width panel that reveals, swaps, and closes flyout content for the whole nav.
- [header-menu (Analog)](https://analog.groupthought.com/reference/alpine/header-menu.md): The store and directives behind the desktop nav: which popup is open, and the nav items and popups that open and close it.
- [x-async-form](https://analog.groupthought.com/reference/alpine/async-form.md): Directives and a magic for forms that submit with fetch instead of a page reload, with a request state you can render.
- [x-product-form](https://analog.groupthought.com/reference/alpine/product-form.md): Directives and a magic for product forms: add to cart with fetch, with cart sections updated in place.
- [x-cart-form](https://analog.groupthought.com/reference/alpine/cart-form.md): Directives and a magic for cart forms: cart updates with fetch, with cart sections updated in place.
- [x-cart-item](https://analog.groupthought.com/reference/alpine/cart-item.md): Directives and a magic for changing or removing one cart line item with fetch.
- [x-cart-api-section](https://analog.groupthought.com/reference/alpine/cart-api-section.md): A directive that keeps a section in step with the cart: cart requests return the section's HTML, and the section morphs it in.
- [x-stepper](https://analog.groupthought.com/reference/alpine/stepper.md): Directives and a magic for a number input with plus and minus buttons.
- [x-predictive-search](https://analog.groupthought.com/reference/alpine/predictive-search.md): Directives and a magic for Shopify's predictive search API: a live search form, section-rendered results, and a combobox options list.
- [x-notification](https://analog.groupthought.com/reference/alpine/notification.md): A directive and magic that turn a popover panel into a self-dismissing notification with hover and focus aware timing.
- [x-countdown](https://analog.groupthought.com/reference/alpine/countdown.md): Directives and a magic for countdown timers: a target date, per-unit display elements, screen-reader text, and an expiry flag.
- [x-submittable-textarea](https://analog.groupthought.com/reference/alpine/submittable-textarea.md): A directive that adds Cmd+Enter or Ctrl+Enter as a textarea submit shortcut.
- [Currency magics](https://analog.groupthought.com/reference/alpine/currency.md): Magics for money formatting in the browser: cents to a locale-aware money string, and conversion to the presented currency.
- [x-slideshow](https://analog.groupthought.com/reference/alpine/slideshow.md): Directives and magics for slideshows: slide registration, autoplay, and controls that stay in sync.
- [x-carousel](https://analog.groupthought.com/reference/alpine/carousel.md): Mouse-drag panning with momentum for horizontal scrollers, landing on CSS scroll-snap points.
- [x-photoswipe](https://analog.groupthought.com/reference/alpine/photoswipe.md): Directives and magics for the PhotoSwipe lightbox: slide data read from the DOM at open time, open buttons, and a slide counter.
- [x-marquee](https://analog.groupthought.com/reference/alpine/marquee.md): A continuously scrolling row of content: a source row, a cloned target row, and one shared offset so the loop never jumps.
- [x-video (Analog)](https://analog.groupthought.com/reference/alpine/video.md): Lazy playback for a video inside the component: the video renders only when it is needed, and window events drive playback from outside.
- [x-read-more](https://analog.groupthought.com/reference/alpine/read-more.md): Truncated content with a smooth height expand, a truncation state for the button, and automatic expansion for focus, print, hash links, and find-in-page.
- [x-clone](https://analog.groupthought.com/reference/alpine/clone.md): Copies an element from another part of the DOM to the location of a template.
- [x-shared-layout](https://analog.groupthought.com/reference/alpine/shared-layout.md): FLIP animations between elements that take turns being visible: an underline that slides between links, a pill that hops between tabs.
- [x-img-loading-placeholder](https://analog.groupthought.com/reference/alpine/image-loading-placeholder.md): Shows a placeholder element until a neighbouring image finishes loading, then hides it.
- [x-parallax](https://analog.groupthought.com/reference/alpine/parallax.md): Directives for compositor-driven scroll parallax: a root timeline and elements that translate against it.
- [x-scroll-stagger](https://analog.groupthought.com/reference/alpine/scroll-stagger.md): Directives for staggered scroll animations: a Motion timeline over a set of items, scrubbed by scroll progress.
- [x-scroll-list](https://analog.groupthought.com/reference/alpine/scroll-list.md): Directives and a magic for scroll-snap lists: item registration, visibility tracking, and buttons that page through the list.
- [x-scroll-lock](https://analog.groupthought.com/reference/alpine/scroll-lock.md): A directive that locks page scrolling while an expression is true, with counted locks and an iOS-specific path.
- [x-sticky-columns](https://analog.groupthought.com/reference/alpine/sticky-columns.md): Directives that coordinate sticky behaviour between sibling columns: the root measures, the columns report state to CSS.
- [x-slider-reveal](https://analog.groupthought.com/reference/alpine/slider-reveal.md): Directives and a magic for the before/after slider: a spring-animated reveal with a draggable handle and optional scroll control.
- [Gesture & motion internals](https://analog.groupthought.com/reference/alpine/scroll-motion-internals.md): The gesture primitives behind the interactive plugins: hover, press, hold, pan, and the animated number wheel.
- [x-section-api](https://analog.groupthought.com/reference/alpine/section-api.md): Directives and magics for the Shopify Section Rendering API: fetch a section's HTML and morph it into the page without a reload.
- [x-roving-tab](https://analog.groupthought.com/reference/alpine/roving-tab.md): Roving tabindex for groups of controls: one tab stop for the whole group, arrow keys to move between the items.
- [State & structure internals](https://analog.groupthought.com/reference/alpine/state-structure.md): Internal Alpine modules for per-section data, morphing, shared selection, overflow, focus, and deferred initialization.
- [Plugin internals](https://analog.groupthought.com/reference/alpine/internals.md): Internal Alpine plugins for caching, theme-editor integration, prefetching, pointer effects, media players, and section updates.
- [Utils](https://analog.groupthought.com/reference/utils.md): The plain TypeScript helpers exported from @groupthought/tradecraft-ui/utils: DOM checks, layout measurement, focus preservation, state machines, and directive modifier parsing.
- [Metafields reference](https://analog.groupthought.com/reference/metafields.md): Every metafield and metaobject Analog reads, the theme setting that names each key, and the exact data shape expected.