Styling the pickup dialog — Shopify theme CSS

Match the HK Pickup delivery dialog to your storefront — brand colors, typography, and corner radius.

Install HK Pickup on the Shopify App Store →

---

Three ways to style

Approach	Best for	Where
Default	Most stores	No setup — neutral styles ship with the app
Admin colors	Brand button / backdrop colors	Admin settings → Colors & theme
Theme CSS	Fonts, letter-spacing, square corners, fine control	Your theme’s CSS file (this guide)

Use admin colors when you only need primary button and backdrop colors. Use theme CSS when the dialog should match your theme’s typography and shape (radius, spacing).

---

Quick path: brand colors (no code)

1. Apps → HK Pickup → Settings → Colors & theme
2. Check Enable customization
3. Set colors → Save settings → reload the storefront

Admin field	CSS token
Primary button	--hkpickup-btn-primary-bg, --hkpickup-btn-primary-border
Secondary background	--hkpickup-btn-bg
Secondary border	--hkpickup-btn-border
Selected row	--hkpickup-result-selected-bg
Dialog backdrop	--hkpickup-backdrop-bg

For fonts, radius, and typography scale, continue below.

---

Add theme CSS

1. Online Store → Themes → … → Edit code
2. Open your theme’s main stylesheet — often assets/base.css, assets/theme.css, or the file your theme documents for custom CSS
3. Paste overrides at the bottom of the file
4. Save → hard-refresh the storefront (cart page or drawer)

Rules:

• Scope every rule to #hkpickup-dialog so you do not affect the rest of the theme
• Use #hkpickup-dialog.hkpickup-dialog when overriding tokens on the dialog element
• Reload after changes — the dialog is injected by the app embed on every page load

Some themes also offer Theme settings → Custom CSS in the editor. That works too if your theme loads it on the storefront.

---

CSS design tokens

HK Pickup reads --hkpickup-* custom properties on #hkpickup-dialog. Defaults live in the app extension CSS; you override them in theme CSS.

Colors

Token	Default	Used for
--hkpickup-text	#18181b	Body text
--hkpickup-text-muted	#71717a	Status, result meta, close button
--hkpickup-text-error	#b91c1c	Error messages
--hkpickup-border	#e4e4e7	Results list border
--hkpickup-border-strong	#d4d4d8	Inputs, secondary buttons
--hkpickup-btn-bg	#fff	Secondary buttons
--hkpickup-btn-border	#d4d4d8	Secondary button border
--hkpickup-btn-primary-bg	#18181b	Primary button (Continue to checkout)
--hkpickup-btn-primary-border	#18181b	Primary button border
--hkpickup-btn-primary-color	#fff	Primary button text
--hkpickup-result-selected-bg	#f4f4f5	Selected pickup row
--hkpickup-backdrop-bg	rgb(0 0 0 / 50%)	Dimmed area behind dialog
--hkpickup-focus-ring	rgb(24 24 27 / 18%)	Input focus ring

Admin Colors & theme overrides the color tokens above when customization is on.

Typography and spacing

Token	Default	Used for
--hkpickup-title-size	1.5rem	Dialog heading
--hkpickup-title-weight	600	Dialog heading
--hkpickup-title-line-height	1.25	Dialog heading
--hkpickup-title-letter-spacing	-0.02em	Dialog heading
--hkpickup-control-size	1.5rem	Buttons, inputs, result names
--hkpickup-control-weight	600	Buttons, inputs, result names
--hkpickup-control-line-height	1.25	Controls
--hkpickup-control-letter-spacing	-0.02em	Controls
--hkpickup-control-padding	1.125rem 1.25rem	Buttons, inputs, result rows
--hkpickup-label-size	1rem	Filter labels, meta text
--hkpickup-label-weight	600	Filter labels
--hkpickup-step-gap	0.625rem	Vertical spacing between controls

On mobile (viewport ≤ 480px), title and control sizes scale down automatically.

Shape (direct CSS, not tokens)

The dialog shell and controls use border-radius in the extension CSS (defaults: dialog 0.75rem, buttons/inputs 0.5rem). Override with selectors — see Match theme fonts and corners below.

---

DOM structure (for selectors)

hkpickup-dialog.hkpickup-dialog

  .hkpickup-dialog__inner
    .hkpickup-dialog__header
      .hkpickup-dialog__title
      .hkpickup-dialog__close
    #hkpickup-step-choose.hkpickup-dialog__step
      .hkpickup-dialog__actions
        .hkpickup-btn
    #hkpickup-step-sf.hkpickup-dialog__step
      .hkpickup-filters (select, input, label)
      .hkpickup-results
        .hkpickup-result[aria-pressed="true"]
          .hkpickup-result__name
          .hkpickup-result__meta
      .hkpickup-toolbar
        .hkpickup-btn--primary

Useful classes: .hkpickup-btn, .hkpickup-btn--primary, .hkpickup-filters, .hkpickup-results, .hkpickup-result, .hkpickup-status, .hkpickup-status--error.

---

Match theme fonts and corners

Many Online Store 2.0 themes expose CSS variables on :root — for example --font-body-family, --font-heading-family, --buttons-radius, --inputs-radius. Names differ by theme; inspect your storefront in DevTools → Elements → :root to find yours.

Example — inherit theme fonts and square controls:

/* HK Pickup — match theme typography + button/input radius */
#hkpickup-dialog.hkpickup-dialog {
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  font-weight: var(--font-body-weight, 400);
  letter-spacing: 0.06rem;

  --hkpickup-title-size: 1.375rem;
  --hkpickup-title-weight: var(--font-heading-weight, 400);
  --hkpickup-title-letter-spacing: 0.02rem;
  --hkpickup-control-size: 1.0625rem;
  --hkpickup-control-weight: 500;
  --hkpickup-control-letter-spacing: 0.04rem;
  --hkpickup-label-size: 0.875rem;
  --hkpickup-label-weight: 500;

  border-radius: 0;
}

#hkpickup-dialog .hkpickup-dialog__title {
  font-family: var(--font-heading-family, inherit);
  font-weight: var(--font-heading-weight, inherit);
}

#hkpickup-dialog .hkpickup-btn {
  border-radius: var(--buttons-radius, 0.5rem);
}

#hkpickup-dialog .hkpickup-filters select,
#hkpickup-dialog .hkpickup-filters input,
#hkpickup-dialog .hkpickup-results {
  border-radius: var(--inputs-radius, 0.5rem);
}

Adjust variable names and values for your theme. Test on cart page, cart drawer, and mobile.

---

Tips and caveats

Topic	Guidance
Specificity	Theme CSS and admin colors both set --hkpickup-* tokens. Theme rules on #hkpickup-dialog win for typography; admin colors apply via JS when customization is on
Translations	Wording is separate — see Admin settings → Translations
Do not hide	Avoid display: none on dialog steps, buttons, or filters — checkout will break
Verify	After styling, run Verify checkout

---

Next step

👉 Verify checkout — confirm the styled dialog still works on cart page and drawer.