Beauty Affairs HK

Codebase map

Where things live, and which directories belong to Conversion Kings, to Shopify, or to code nothing uses.

Top level

PathOwnerNotes
src/Conversion KingsAll TypeScript, React and Tailwind input. Excluded from the theme upload
sections/Mixed134 files. Prestige originals, redesign sections, and app leftovers
snippets/Mixed233 files. Includes the generated vite-tag.liquid
templates/Mixed133 files. Many belong to removed apps
layout/MixedThree theme layouts plus password and gift_card
assets/Build output plus theme filesHashed bundles sit alongside images and vendor scripts
config/Shopifysettings_schema.json defines settings, settings_data.json holds their values
locales/ShopifySeven locale files, several very large
scripts/Conversion KingsDeployment, onboarding and tunnel helpers. Excluded from the upload
doc-site/Conversion KingsThis documentation site

Inside src/

PathContains
src/entrypoints/Build targets. Each file here becomes its own bundle
src/components/Imported modules. Liquid never renders them directly
src/lib/Small shared utilities: logger.ts, utils.ts, cart-source.ts
src/@types/Ambient types for window, Shopify objects, the booking config, Klaviyo
src/assets/theme_in.cssThe Tailwind entry, which contains only the three directives

The @/ and ~/ path aliases both resolve to src/. tsconfig.json defines them, and Vite resolves them too.

The split between entrypoints and components has exceptions. mini-cart/internals/ sits under entrypoints even though other files import it and no Liquid renders it, so Vite emits each internal module as its own chunk. utils.ts is in entrypoints for the same historical reason. Before moving either, check every vite-tag render and every import.

The three layouts

LayoutUsed by
layout/theme.liquidMost of the store
layout/theme.medispa-redesign.liquidMedispa redesign page templates
layout/theme.discovery-bar.liquidDiscovery bar landing pages

All three started as the same file, and about a third of their lines now differ. A change to the head, to a global, or to a bundle every page loads usually has to go into more than one layout. When something only breaks on some pages, check which layout those templates use.

The major subsystems

SubsystemLiquidTypeScript
Mini-cartsections/mini-cart.liquid, snippets/mini-cart.*.liquidsrc/entrypoints/mini-cart/
Medispa bookingsnippets/medispa-calendar-*.liquid, sections/product-calendar-config.liquidsrc/components/medispa-calendar/
Popupssnippets/popup-logic.liquidsrc/components/popup-logic/
Homepage redesignsections/hero-banner.liquid and related sectionssrc/entrypoints/homepage-redesign/components/
Purchase giftslayout/theme.liquidsrc/components/purchase-gift-manager/
Cart reward bannersections/cart-reward-banner.liquidsrc/components/cart-reward-banner/

What file names tell you

A section or snippet whose name contains one of these markers belongs to an app the store no longer uses. Do not extend it, and read Legacy and unused code before deleting it.

boost-pfs, maestrooo, sca, swym, haloroar, discountninja, tolstoy, yotpo, reputon, hulkapps

The name layouthub appears only inside the locale files, never in a filename. It causes a large share of the translation errors Theme Check reports.

A file with redesign in its name comes from the more recent rebuild and is usually the one in use. When a -redesign file and an original both exist, check templates/ to see which one the store renders. For example, both product-template.liquid and product-template-redesign.liquid exist.

An fn. prefix marks a Liquid snippet used for its return value rather than its markup. There is one today, snippets/fn.mini-cart.line-item.should-show-quantity.liquid. Use the same prefix if you add another.

Finding the code behind something on the page

  1. View source and find a distinctive class name or custom element name.
  2. Search sections/ and snippets/ for it to find the Liquid.
  3. Look for a render 'vite-tag' in that file, or look up the file in Entrypoints.
  4. The path in the render call is relative to src/entrypoints.

For a custom element, search src/ for customElements.define with that tag name. The theme currently defines mini-cart, mini-cart-clear-cart, mini-cart-discount-code, mini-cart-footer, mini-cart-gifts-accordion, mini-cart-header, mini-cart-line-items, mini-cart-progress-bar, mini-cart-recommendations, mini-cart-summary, product-card-form, products-carousel, select-options and tabbed-carousels.

What the repository does not have

The repository has no test suite. The only CI is the theme pull workflow in .github/workflows/theme-pull.yml. The only staging environments are unpublished themes on the same store. Developers check every change by hand against a preview theme.

On this page