{"title":"Style the POS","slug":"style-the-pos","url":"https://support.storeconnect.com/articles/style-the-pos","url_markdown":"https://support.storeconnect.com/articles/style-the-pos.md","subtitle":null,"summary":"Use a style block scoped to the POS channel to change how the point of sale app looks, recolor the whole app by overriding a design token, and avoid the web theme CSS variables that are undefined in the POS and fail without an error.","type":"Help_Documentation","video_url":"","keywords":"pos css, style block, pos styling, pos channel, custom css pos, design tokens, sc variables, pos appearance, point of sale branding","last_modified":"2026-10-07T05:47:34+0000","body_markdown":"Use this process to change how the point of sale app looks, for example to enlarge a\ntouch target for a busy counter or to tint a screen so staff can tell two registers apart.\n\nA **Style Block** is the only way to get CSS into the POS. The **Custom Styles** field on\nthe **Store** record, theme CSS assets, and head content blocks all apply to your online\nstore alone, and none of them are loaded by the POS.\n\n## Before you start\n\n-   You need access to the **Style Blocks** list. If you cannot see it in the App\n    Launcher, ask your Salesforce administrator for tab and object access.\n-   You need a register you can sign in to, so you can confirm the change.\n-   Know which CSS custom properties the POS defines before writing colors or type sizes\n    by hand. Using the POS's own properties keeps your CSS correct when the palette\n    changes. Read them off `:root` in the browser's developer tools on a register.\n\n## Create a style block for the POS\n\n1.  Go to the **Style Blocks** list and select **New**.\n2.  Give the style block a **Name** you will recognize later, such as \"POS counter\n    tweaks\".\n3.  Set **Store** to the store the register belongs to.\n4.  Check **Active**. An inactive style block is never loaded.\n5.  Set **Channels** to `POS`. Add `Web` as well only if the same CSS should apply to your\n    online store, which is rare, because the two use different markup.\n6.  Check **Global**. A style block that is not global is not loaded by the POS at all.\n7.  Set **Media** to `screen`, or to `print` for CSS that should only affect printed\n    output.\n8.  (Optional) Set **Position** to control the order when you have more than one POS style\n    block. Lower numbers load first, so a higher number wins a tie.\n9.  Enter your CSS in the **Content** field, written **without** `\u003cstyle\u003e` tags.\n    StoreConnect adds them for you.\n\n    The POS puts an `sc-` prefix on its own class names. `.sc-button`, `.sc-card`,\n    `.sc-nav-button`, `.sc-app-topbar` and `.sc-screen` are all real elements you can\n    target. This enlarges every button for a touchscreen:\n\n    ```css\n\n    .sc-button {\n      min-height: 3.5rem;\n      font-size: var(--sc-type-body-large-size);\n    }\n    ```\n\n10. Select **Save**.\n11. Wait for the change to reach the POS, then reload the POS in the browser on the\n    register.\n\nThe style block is rendered in the `\u003chead\u003e` of the POS app on every page load, after the\napp's own stylesheets, so a rule of equal specificity to a built-in one wins.\n\n:::note\n\nA change to a style block is not instant. The record has to reach the POS server before a\nreload can pick it up, which took just over two minutes when this was last measured. If a\nreload shows no change, wait a minute and reload again before you start editing the CSS.\n\n:::\n\n## Recolor the POS by overriding a token\n\nRather than restyling elements one at a time, redefine a design token on `:root` and every\npart of the app that uses it follows. This is the quickest way to make two registers\nvisually distinct, or to put a store's own accent color through the app.\n\n```css\n\n:root {\n  --sc-color-primary: #7B2D8E;\n}\n```\n\n![Shows POS design before and after](https://res.cloudinary.com/hzkr6fi81/image/upload/v1790210070/media/pos-style-block-before-after.png)\n\nBecause the style block loads after the app's stylesheets, the override wins, and buttons,\nlinks, and active navigation all pick up the new color together. Check the result on a\nregister: the tokens carry meaning, so an accent with too little contrast against\n`--sc-color-surface` makes text hard to read across the whole app at once.\n\n## Use the POS design tokens, not the web theme ones\n\nThis is the most common way POS CSS fails, and it fails quietly.\n\nThe POS and the web storefront both name their CSS custom properties with an `--sc-`\nprefix, but the two sets are almost entirely different. A name that is correct in a theme,\nsuch as `--sc-spacing-medium`, `--sc-shade-dark`, `--sc-border-radius` or\n`--sc-input-height`, is not defined in the POS. The browser drops the whole declaration at\ncomputed-value time, so the property keeps its inherited or initial value and nothing\nappears in the console. The rule looks right, does nothing, and gives you no reason why.\n\nTwo names are worse than missing, because they exist on both sides meaning different\nthings:\n\n-   `--sc-font-*` is a font family in the POS (`--sc-font-plain`, `--sc-font-brand`) and a\n    size or weight on the web (`--sc-font-small`).\n-   The primary color is a single hex value in the POS. On the web it is split into\n    `--sc-color-primary-h`, `-s` and `-l` for use in `hsla()`, so an `hsla()` rule copied\n    from a theme produces no color in the POS.\n\nBefore moving CSS across from a theme, check each `--sc-` name against what the POS\nactually defines. Inspect `:root` in the browser's developer tools on a register: a name\nthat is not listed there does nothing.\n\n## Scope a rule to one screen\n\nA POS style block loads on every screen, so the selector is what limits where a rule\napplies. Inspect the screen in the browser's developer tools and target a class on the\nelement you want to change. There is no per-screen style block setting.\n\n## Stop a style block without deleting it\n\nUncheck **Active**, wait for the change to reach the POS, and reload. The block stays in\nplace with its CSS intact, which is the quickest way to rule a style block out when a\nscreen looks wrong.\n\nAfter reloading the POS on the register, your CSS appears in a `\u003cstyle\u003e` tag in the page\nsource, with the **Media** value as the tag's `media` attribute, and the screen reflects\nit. If nothing changed, first give it another minute and reload again. If it still has not\nappeared, confirm the block is **Active**, **Global**, and has `POS` in **Channels**, in\nthat order, and that you are looking at a register belonging to the same store."}