{"title":"▶️ How and when to use style blocks","slug":"how-and-when-to-use-style-blocks","url":"https://support.storeconnect.com/articles/how-and-when-to-use-style-blocks","url_markdown":"https://support.storeconnect.com/articles/how-and-when-to-use-style-blocks.md","subtitle":null,"summary":"Create style blocks to inject custom CSS into your store for fonts, button styles, layout tweaks, and responsive design changes without modifying theme files.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197572010?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"## 1. Create a style block\n\n1.  Go to the **Style Blocks** list (**StoreConnect Navigation** → **Custom Content**).\n2.  Select **New**.\n\n## 2. Configure the style block\n\n1.  Give the style block a **Name** you will recognize later.\n2.  Assign it to your **Store**.\n3.  Set the configuration:\n    -   **Active** — check this to enable the style block.\n    -   **Channels** — select **Web** for your online store, **POS** for the point of\n        sale app, or both. This field is required.\n    -   **Global** — check this to apply the CSS across the entire store. Leave it\n        unchecked and the style block is not included on your store at all.\n    -   **Media** — the media type the CSS is meant for: `all`, `print`, or `screen`.\n        This is written out as the `media` attribute on the rendered tag.\n    -   **Position** — the order style blocks load in. Lower numbers load first.\n4.  Enter your CSS in the **Content** field, written **without** `\u003cstyle\u003e` tags.\n    StoreConnect adds them for you. For example:\n\n    ```css\n\n    body { background-color: lightblue; }\n    ```\n\n5.  Select **Save**.\n\n## 3. Test the result\n\n1.  Go to your storefront and refresh the page.\n2.  Confirm your CSS has taken effect, for example the new background color.\n\nThe style block is rendered in the `\u003chead\u003e` of every page, wrapped in a `\u003cstyle\u003e` tag,\nafter the **Custom Styles** field on the Store record and before the head content block.\n\n## Notes\n\n-   Style blocks suit custom fonts, button styles, layout adjustments, page-specific\n    tweaks, and responsive design improvements.\n-   Disable a style block at any time by unchecking **Active**. You do not need to delete\n    it.\n-   Target specific elements or pages with ordinary CSS selectors. A style block loads on\n    every page, so the selector is what scopes the change.\n-   To load an external stylesheet instead of writing rules here, set **Stylesheet URL**.\n    It renders as a `\u003clink rel=\"stylesheet\"\u003e` tag. See\n    [Adding custom CSS](adding-custom-css) for the other ways to add CSS."}