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 {
  color: #4a2c17;
  letter-spacing: 0.02em;
}

The repeated class gives your rule more priority than the app’s normal styling, so in most cases it wins without !important. It also prevents your changes from affecting other parts of the Shopify theme.

When a property still needs !important

Some properties can’t be overridden by priority alone:

• Built-in styles on the element. Many hook elements also carry built-in styles for font size, font weight, margins, padding, corner rounding and some text and background colours, and those always win. For example, product titles have a fixed font size, so font-size on pc-product-tile__title needs !important.
• Ties. Your custom CSS is printed before the app’s stylesheet, so when your rule and an app rule have the same priority, the app’s rule wins. Using .poscafe-app.poscafe-app avoids most ties.
• Theme protection. A few properties are protected against Shopify theme styles at a priority no class prefix can reach. They are listed under Theme compatibility below.

In these cases, add !important to that one declaration.

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

POS Cafe protects the ordering menu from Shopify theme styles that leak into it. No merchant action is required. A few of these protections outrank the .poscafe-app.poscafe-app prefix, so changing those specific properties needs !important, as described below.

Product dialog (3.63.3)

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.

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. On phones the product dialog fills the screen, so it stays square there.

Buttons, lists and dialog text (3.64.5)

POS Cafe version 3.64.5 and later adds more protection:

• Product dialog button text stays readable. Some themes, such as Impulse, set their own text colour on buttons inside any dialog, which could make variant and modifier options appear blank.
• Buttons and lists ignore theme minimum button widths, button margins and letter spacing, theme hover and press colours, and list indents and spacing. These could make the cart’s quantity buttons too wide and push the price out of view, or put a dark box behind a button when a customer hovers over it.
• Dialog text sizes scale with your theme’s body text size. Buttons, quantity controls and option details in POS Cafe’s dialogs (product, cart, order type, pickup time and change location) keep the same proportions as the surrounding text, with a minimum size so they stay readable. Text inputs keep their existing size.

Changing button text colour in the product dialog

The product dialog’s button text protection outranks the .poscafe-app.poscafe-app prefix, so a plain color rule on a button there has no effect. Set the button’s text colour variable instead. This needs no !important and keeps the white text the app shows on hover and press:

.poscafe-app.poscafe-app .pc-variant-option:not([data-pc-state="selected"]),
.poscafe-app.poscafe-app .pc-modifier-option:not([data-pc-state="selected"]) {
  --pc-btn-color: #4a2c17;
}

The :not([data-pc-state="selected"]) part leaves selected options, which have a dark background, with their white text.

This applies to buttons in the product dialog, including the supported hooks pc-variant-option, pc-modifier-option, pc-quantity-selector__button (in the product dialog only) and pc-add-to-cart-button. For the Add to cart button, use the Primary / accent color and Button text color settings in the theme editor instead of custom CSS. They apply whenever the item can be added. When it can’t, for example because the item is sold out, the button uses a neutral grey.

Button motion (3.64.12)

POS Cafe version 3.64.12 and later keeps its own button transitions. Some themes delay a button’s background change on hover, which made option text flash white on white, or add a shine or wedge decoration to every button.

To change a POS Cafe button’s transition, or to add a ::before or ::after decoration to one, add !important. This covers every button, including the supported hooks pc-checkout-button, pc-add-to-cart-button, pc-variant-option, pc-modifier-option, pc-quantity-selector__button, pc-delivery-option, pc-empty-cart__browse-button and pc-cart-item__remove.

Dialog position, button height, headings and loading text (3.64.21)

POS Cafe version 3.64.21 and later protects against a few more theme styles:

• Dialogs open on screen. Some themes, such as Wokiee, centre their own pop-ups in a way that pushed the product dialog below the bottom of the screen.
• Button text stays centred. Theme rules that give every button a fixed height no longer squash or stretch POS Cafe’s buttons.
• Headings keep their size and spacing. Theme heading styles no longer make small headings, such as the cart item title, oversized or add extra space under them.
• Loading indicators show only the spinner. The hidden “Loading” text for screen readers no longer appears beside the spinner.

Changing heading spacing and size

The heading protection outranks the .poscafe-app.poscafe-app prefix for line-height, padding-bottom, and the font-size of small headings such as the cart item title. The heading hooks also carry built-in styles for font size, font weight, margins and top padding. So to change any of those on a heading hook, add !important.

The heading hooks are pc-collection-section__title, pc-product-tile__title, pc-product-modal__title, pc-cart-modal__title, pc-cart-item__title, pc-location-header__name and pc-location-card__name.

.poscafe-app.poscafe-app .pc-collection-section__title {
  line-height: 1.4 !important;
  padding-bottom: 8px !important;
}

font-family, color and letter-spacing on headings work without !important.

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-primary-rgb: 122, 74, 33;
  --pc-border-radius: 2px;
}

If you set --pc-primary, also set --pc-primary-rgb to the same colour written as comma-separated red, green and blue values. Some elements, such as the cart count bubble and the change-location link, use that form. The Primary / accent color setting sets both for you.

Variable	What it controls
--pc-primary	Primary or brand colour used for buttons and active states
--pc-primary-rgb	The primary colour as red, green, blue, used by primary-coloured text, backgrounds and borders
--pc-on-primary	Text and icon colour shown on primary-coloured elements
--pc-secondary	Hover border colour of product and location cards
--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 bar background (the Cart button background setting)
--pc-cart-card-border	Floating cart bar border (the Cart button border setting)
--pc-border-color	General border colour
--pc-border-radius	Standard corner rounding, including product and location cards
--pc-border-radius-sm	Small corner rounding
--pc-border-radius-lg	Large corner rounding for dialogs, the section background panel, the cart options card and the checkout button
--pc-border-radius-xl	Extra-large corner rounding, used by the floating cart bar
--pc-container-max-width	Maximum content width when using the Custom width mode

The corner rounding variables are separate: changing --pc-border-radius doesn’t change the small, large or extra-large rounding.

Interactive states

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

State	Meaning	Used on
selected	The option is currently selected	pc-collection-nav__link, pc-variant-option, pc-modifier-option, pc-timing-selector__option, pc-delivery-option
disabled	The control can’t be used right now, for example a sold-out option	pc-variant-option, pc-modifier-option, pc-quantity-selector__button, pc-add-to-cart-button, pc-checkout-button, pc-location-card while a location is loading
unavailable	The order type can’t currently be chosen	pc-delivery-option

For example:

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

Supported class reference

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

Several hook elements also carry built-in styles, for example text colours on descriptions, details and the change-location link, the background of open and closed status badges, and the fixed size of the product dialog image. Those properties need !important, as described under Always scope CSS to POS Cafe.

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. It carries some app styling, so some overrides need !important, especially in the nav-card layout
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. It carries some app styling, so some overrides need !important
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	The menu sections below the collection navigation bar
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 (Large banner style). Its size and fit are fixed by the app
pc-product-modal__thumbnail	Product image beside the title (Small thumbnail style)
pc-product-modal__description	Product description
pc-product-modal__price	Total price inside the Add to cart button, shown when the item can be added
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, in the product dialog and on cart items
pc-quantity-selector__button	Quantity decrease or increase button
pc-quantity-selector__value	Current quantity
pc-product-name	Item customer-name input box (not its label)
pc-product-notes	Item special instructions input box (not its label)
pc-add-to-cart-button	Add-to-cart button

Cart

Class	Element
pc-floating-cart-button	Floating cart bar. Its position, size and colours are set directly on the element, so change its colours with --pc-cart-card-bg and --pc-cart-card-border
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	Time row in the cart that opens the pickup-time dialog
pc-table-input	Table or customer-name row (label and 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

Setting the colour variables on the button keeps the colour on hover and press too:

.poscafe-app.poscafe-app .pc-checkout-button {
  --pc-primary: #1a4731;
  --pc-primary-rgb: 26, 71, 49;
  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 tiles and images

.poscafe-app.poscafe-app .pc-product-tile {
  border-radius: 0;
}

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

To square every card and panel instead, set --pc-border-radius: 0 on .poscafe-app.poscafe-app.

Hide location details

To hide the location name, address and hours, turn off Show location details in the block’s Layout settings. To hide only the address and hours details and keep the name, add:

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

Hide the customer name and special instructions fields

To stop customers adding a name to each item, turn off Show customer name field in General Online Ordering Settings. That removes the field without any CSS.

The Special Instructions field in the item pop-up has no setting. To hide it, and the customer name field if it’s turned on, add:

.poscafe-app.poscafe-app .pc-product-modal div:has(> .pc-product-name),
.poscafe-app.poscafe-app .pc-product-modal hr:has(+ div > .pc-product-name),
.poscafe-app.poscafe-app .pc-product-modal label:has(+ .pc-product-notes),
.poscafe-app.poscafe-app .pc-product-modal hr:has(+ label + .pc-product-notes),
.poscafe-app.poscafe-app .pc-product-notes {
  display: none;
}

The pc-product-name and pc-product-notes hooks are on the input boxes themselves, so the rules also hide each field’s label and the divider line above it. They use :has(), which current browsers support; an older browser simply shows the fields as before. To hide only the customer name field, keep the first two selectors; to hide only special instructions, keep the last three.

De-emphasise unavailable order types

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

Troubleshooting custom CSS

My rule does not apply

Confirm that the selector starts with .poscafe-app.poscafe-app and uses a hook from this page. If the property still doesn’t change, it is probably set by a built-in style on that element or by one of the theme compatibility protections. Adding more .poscafe-app classes won’t help; add !important to that declaration instead.

These properties always need !important:

• line-height, padding-bottom, and the size of small headings, on any heading
• transition and ::before or ::after decorations on POS Cafe buttons

For the text colour of buttons in the product dialog, set --pc-btn-color instead (see Changing button text colour in the product dialog).

Nothing in my custom CSS applies

If your CSS contains the text </style, in any capitals, POS Cafe ignores the whole of it, because that text could end the style block early. Remove it.

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.