Custom CSS Reference

POS Cafe includes supported CSS variables and pc- classes for merchants and theme developers who need more control than the theme editor provides. Using these hooks keeps your customisations contained to the ordering menu and compatible with future updates.

Tip

Use the built-in Colors and Layout settings first. They are easier to maintain and are tested with every release. Add custom CSS only when the theme editor does not provide the change you need.

Where to add custom CSS

In the Shopify theme editor, open the page containing the POS Cafe Online block, select the block, then paste your CSS into Advanced → Custom CSS.

CSS entered there is printed only on the ordering page. You can also use your Shopify theme’s global custom CSS, but you must scope every rule as shown below.

Always scope CSS to POS Cafe

Start every selector with .poscafe-app.poscafe-app:

.poscafe-app.poscafe-app .pc-product-tile__title {
  font-size: 1.1rem;
  font-weight: 600;
}

The repeated class gives your rule enough priority to override the app’s normal styling without relying on !important. It also prevents your changes from affecting other parts of the Shopify theme.

Use only the supported hooks on this page

Do not target generic or internal classes such as .modal-content, .card, .btn, .d-flex, or .container. Shopify themes and other apps commonly use those names, and their meaning can change between releases.

For example, customise the product dialog with .pc-product-modal, not .modal-content.

Theme compatibility for dialogs

POS Cafe version 3.63.3 and later protects its product dialog from common Shopify theme rules that hide, fade, move, or disable generic modal content. This prevents a theme’s closed-modal styles from accidentally making a POS Cafe product dialog invisible.

No merchant action is required. If you intentionally customise a POS Cafe dialog, use the supported hook and the standard scope:

.poscafe-app.poscafe-app .pc-product-modal {
  border-radius: 16px;
}

This remains more specific than the app’s compatibility protection, so supported merchant customisations continue to work.

Choose the safest type of customisation

Use these options in order:

1. Theme editor settings for normal colour and layout changes.
2. CSS variables for app-wide values such as colours and corner rounding.
3. Supported pc- classes for individual components.
4. State attributes for selected, disabled, or unavailable controls.

CSS variables

Set variables on the app wrapper to change shared values:

.poscafe-app.poscafe-app {
  --pc-primary: #7a4a21;
  --pc-border-radius: 2px;
}

Variable	What it controls
--pc-primary	Primary or brand colour used for buttons and active states
--pc-on-primary	Text and icon colour shown on primary-coloured elements
--pc-secondary	Secondary accents
--pc-link-color	Link colour
--pc-nav-link	Collection navigation link colour
--pc-section-bg	Ordering section background
--pc-card-surface	Product and location card background
--pc-header-bg	Collection navigation bar (nav card) background when Show section background is off (the Navbar background setting)
--pc-cart-card-bg	Floating cart button background (the Cart button background setting)
--pc-cart-card-border	Floating cart button border (the Cart button border setting)
--pc-border-color	General border colour
--pc-border-radius	Standard corner rounding
--pc-border-radius-sm	Small corner rounding
--pc-border-radius-lg	Large corner rounding, including cards and dialogs
--pc-border-radius-xl	Extra-large corner rounding
--pc-container-max-width	Maximum content width when using the Custom width mode

Interactive states

Some controls expose their current state through data-pc-state:

State	Meaning
selected	The option is currently selected
disabled	The control is disabled
unavailable	The option cannot currently be chosen

For example:

.poscafe-app.poscafe-app .pc-delivery-option[data-pc-state="selected"] {
  font-weight: 700;
  outline: 2px solid var(--pc-primary);
}

The root also includes data-pc-theme="light" or data-pc-theme="dark" for theme-specific changes.

Supported class reference

These pc- classes are the stable customisation hooks supported by POS Cafe. Classes not listed here should be treated as internal.

App root

Class	Element
poscafe-app	Root wrapper around the ordering app and scope for all overrides

Location header

Class	Element
pc-location-header	Header showing the selected location
pc-location-header__name	Location name
pc-location-header__status	Open or Closed status
pc-location-header__details	Address and hours details
pc-location-header__change-button	Change-location control

Location selector

Class	Element
pc-location-selector	Location picker
pc-location-card	One selectable location
pc-location-card__name	Location name on a card
pc-location-card__address	Location address
pc-location-card__status	Open or Closed status
pc-location-card__badges	Order-type badges
pc-location-change-modal	Change-location dialog

Collection navigation

Class	Element
pc-collection-nav	Collections navigation bar
pc-collection-nav__link	One collection link or pill

Product catalogue

Class	Element
pc-catalog	Complete menu area below the location header
pc-collection-section	One collection section
pc-collection-section__title	Collection heading
pc-product-grid	Product grid
pc-product-tile	One product tile
pc-product-tile__image	Product image
pc-product-tile__title	Product title
pc-product-tile__price	Product price

Product dialog

Class	Element
pc-product-modal	Product customisation dialog
pc-product-modal__title	Product title
pc-product-modal__image	Product image
pc-product-modal__description	Product description
pc-product-modal__price	Total price
pc-variant-selector	Size or variant chooser
pc-variant-option	One variant option
pc-modifier-group	One modifier set
pc-modifier-group__title	Modifier-set heading
pc-modifier-option	One modifier option
pc-modifier-option__label	Modifier label
pc-modifier-option__price	Modifier price
pc-quantity-selector	Quantity stepper
pc-quantity-selector__button	Quantity decrease or increase button
pc-quantity-selector__value	Current quantity
pc-product-name	Item customer-name input
pc-product-notes	Item notes input
pc-add-to-cart-button	Add-to-cart button

Cart

Class	Element
pc-floating-cart-button	Floating cart button
pc-floating-cart-button__count	Item-count bubble
pc-cart-modal	Cart dialog
pc-cart-modal__header	Cart header
pc-cart-modal__title	Cart title
pc-cart-modal__close	Cart close button
pc-cart-items	List of cart items
pc-cart-item	One cart item
pc-cart-item__image	Cart item image
pc-cart-item__title	Cart item title
pc-cart-item__modifiers	Modifier summary
pc-cart-item__price	Line price
pc-cart-item__remove	Remove button
pc-empty-cart	Empty-cart state
pc-empty-cart__browse-button	Browse-menu button

Cart footer and order options

Class	Element
pc-cart-footer	Order options and checkout area
pc-cart-footer__card	Card containing When, How, time, and table options
pc-cart-notice	Automatic order-type correction notice
pc-closed-stripe	Store-closed scheduling notice
pc-timing-selector	For Now or For Later selector
pc-timing-selector__option	One timing option
pc-delivery-selector	Order-type selector
pc-delivery-option	One order-type option
pc-method-sheet	Order-type sheet shown when four or more types are enabled
pc-datetime-selector	Date and time picker
pc-table-input	Table or customer-name input
pc-vehicle-input	A Drive Thru or Curbside vehicle details input row
pc-checkout-button	Checkout button
pc-pickup-time-modal	Pickup-time dialog

Other controls

Class	Element
pc-back-to-top	Back-to-top button

Example customisations

Brand-coloured, pill-shaped checkout button

.poscafe-app.poscafe-app .pc-checkout-button {
  background: #1a4731;
  border-color: #1a4731;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

Bigger product prices

.poscafe-app.poscafe-app .pc-product-tile__price {
  color: var(--pc-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

Square product images

.poscafe-app.poscafe-app .pc-product-tile__image {
  border: 1px solid var(--pc-border-color);
  border-radius: 0;
}

Hide location details

.poscafe-app.poscafe-app .pc-location-header__details {
  display: none;
}

De-emphasise unavailable order types

.poscafe-app.poscafe-app .pc-delivery-option[data-pc-state="unavailable"] {
  filter: grayscale(1);
  opacity: 0.35;
}

Dark-mode-only cart border

.poscafe-app.poscafe-app[data-pc-theme="dark"] .pc-cart-footer__card {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

Troubleshooting custom CSS

My rule does not apply

Confirm that the selector starts with .poscafe-app.poscafe-app. If the property still loses to the app or theme, add one more .poscafe-app to the prefix. Use !important only as a last resort.

A theme update changed the ordering menu

Check whether your CSS uses only the supported variables, pc- classes, and state attributes on this page. Replace generic or internal selectors with the nearest supported hook.

A product or cart dialog does not appear correctly

Remove any CSS targeting generic modal classes such as .modal, .modal-content, or .modal-dialog. Use .pc-product-modal, .pc-cart-modal, or the other supported dialog hook instead.

The menu looks squeezed or off-centre

Turn on Break out of theme container in the block’s Layout settings rather than adding negative margins or fixed widths.

Text alignment or spacing is inherited from the theme

Scope the correction under .poscafe-app.poscafe-app so it applies only inside the ordering menu.