Log in

▶️ How and when to use style blocks

Last modified 21 August 2026

On this page

1. Create a style block

Go to the Style Blocks list (StoreConnect Navigation → Custom Content).
Select New.

2. Configure the style block

Give the style block a Name you will recognize later.
Assign it to your Store.
Set the configuration:
- Active — check this to enable the style block.
- Channels — select Web for your online store, POS for the point of sale app, or both. This field is required.
- Global — check this to apply the CSS across the entire store. Leave it unchecked and the style block is not included on your store at all.
- Media — the media type the CSS is meant for: all, print, or screen. This is written out as the media attribute on the rendered tag.
- Position — the order style blocks load in. Lower numbers load first.
Enter your CSS in the Content field, written without <style> tags. StoreConnect adds them for you. For example:

```css

body { background-color: lightblue; } ```
Select Save.

3. Test the result

Go to your storefront and refresh the page.
Confirm your CSS has taken effect, for example the new background color.

The style block is rendered in the <head> of every page, wrapped in a <style> tag, after the Custom Styles field on the Store record and before the head content block.

Notes

Style blocks suit custom fonts, button styles, layout adjustments, page-specific tweaks, and responsive design improvements.
Disable a style block at any time by unchecking Active. You do not need to delete it.
Target specific elements or pages with ordinary CSS selectors. A style block loads on every page, so the selector is what scopes the change.
To load an external stylesheet instead of writing rules here, set Stylesheet URL. It renders as a <link rel="stylesheet"> tag. See Adding custom CSS for the other ways to add CSS.

Was this article helpful?