{"title":"Adding custom CSS","slug":"adding-custom-css","url":"https://support.storeconnect.com/articles/adding-custom-css","url_markdown":"https://support.storeconnect.com/articles/adding-custom-css.md","subtitle":null,"summary":"Four ways to add CSS to your store: the Custom Styles field, Style Blocks, theme asset uploads, and Content Blocks, with guidance on third-party CSS library conflicts.","type":"Help_Documentation","video_url":"","keywords":"custom css, style blocks, theme assets, custom styles field, stylesheet, css rules, store design, head content block, content blocks, third-party css libraries, css customization, theme styling","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"There are several ways to customize your StoreConnect store's CSS. Which one suits you\ndepends on how much CSS you have and how often it changes.\n\n## On this page\n\n1.  [Add CSS to the Custom Styles field](#add-css-to-the-custom-styles-field)\n2.  [Use style blocks to upload your CSS](#use-style-blocks-to-upload-your-css)\n3.  [How to add CSS theme assets](#how-to-add-css-theme-assets)\n4.  [How to add CSS using content blocks](#how-to-add-css-using-content-blocks)\n5.  [Third party CSS libraries](#third-party-css-libraries)\n\n## Which method to use\n\n| Method | Use it for | Where it renders |\n| --- | --- | --- |\n| [Custom Styles field](#add-css-to-the-custom-styles-field) | Small tweaks, and quick checks while developing a theme | `\u003chead\u003e`, in a `\u003cstyle\u003e` tag, before style blocks |\n| [Style blocks](#use-style-blocks-to-upload-your-css) | Larger CSS you want split into separate, individually ordered records | `\u003chead\u003e`, after the Custom Styles field, before the head content block |\n| [Theme assets](#how-to-add-css-theme-assets) | A finished stylesheet file on a theme you control | `\u003chead\u003e`, via the theme's `theme-supplement.css` asset |\n| [Content blocks](#how-to-add-css-using-content-blocks) | Short rules scoped to one page or block | Wherever the content block is rendered |\n\n## Add CSS to the Custom Styles field\n\nCustom styles are small stylesheet tweaks. This is also the option to use while you are\ndeveloping a new theme and want to see a change on your site quickly.\n\nAnything you put here is wrapped in a `\u003cstyle\u003e` tag and rendered in the `\u003chead\u003e` of every\npage, before any style blocks and before the head content block. Enter valid CSS with no\n`\u003cstyle\u003e` tag of your own. See [Customize a theme using CSS](custom-theme-css) for more\ninformation.\n\n1.  Go to your store's **Store** record.\n\n    ![The Store record open in Salesforce](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677788/documentation-media/the-store-record.jpg)\n\n2.  Find the **Custom Styles** field under the **Global Content** section.\n3.  Select the pencil icon, or select **Edit**.\n4.  Insert your custom styles into the field.\n5.  Select **Save**.\n\nYour CSS applies to every page of the store on the next page load.\n\n:::note\n\nA large amount of CSS in this field makes the Store record page long and awkward to work\nwith, and harder to maintain than the same rules split across style blocks. Move to style\nblocks once you have more than a handful of rules.\n\n:::\n\n## Use style blocks to upload your CSS\n\nStyle blocks keep your CSS organized and maintainable. They are the better option when\nyou are making significant changes, because you can group or separate rules and review\neach one quickly.\n\n1.  Go to the **Style Blocks** list and select **New**.\n\n    ![Salesforce App Launcher open, with Style Blocks being searched for](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677787/documentation-media/style-blocks.gif)\n\n2.  Give it a useful name and assign it to your store.\n3.  Set the configuration:\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, so it does\n        affect when the CSS applies.\n    -   **Active** — only active style blocks are included on the website.\n    -   **Channels** — the surfaces the CSS applies to. Select **Web** for your online\n        store, **POS** for the point of sale app, or both. This field is required, and a\n        style block without **Web** never loads on your online store even when it is\n        active and global.\n    -   **Global** — include the CSS automatically on every page. Leave it unchecked and\n        the style block is not included on your store at all.\n    -   **Position** — the order style blocks load in. Lower numbers load first.\n4.  Define the style content, using one of:\n    -   **Stylesheet URL** — an external link to bring in your CSS.\n    -   **Content** — your CSS rules, written **without** `\u003cstyle\u003e` tags.\n5.  Select **Save**.\n\nAn active, global style block set to the **Web** channel is rendered in the `\u003chead\u003e` of\nevery page, wrapped in a `\u003cstyle\u003e` tag, or as `\u003clink rel=\"stylesheet\"\u003e` when you set\n**Stylesheet URL**. Style blocks render after the **Custom Styles** field and before the\nhead content block. You can create as many as you need.\n\n## How to add CSS theme assets\n\nYou can upload a CSS stylesheet file to the theme assets. This is a good option when you\nhave a finished file and want to reference it rather than paste your entire CSS into a\nfield. It requires an [active theme](downloadable-themes) in your store.\n\nIf you are developing a new theme, use one of the other options during development and\nmove to a theme asset when you are done. You cannot edit the CSS directly in the theme\nobject interface, so every change means uploading a new file.\n\n1.  Go to the **Theme** list and open the theme you are working on.\n2.  Select the **Related** tab.\n3.  Under **Theme Assets**, select **New**.\n4.  Set the key to `theme-supplement.css`.\n5.  Upload your CSS file.\n6.  Select **Save**.\n\nThe theme injects that file into the `\u003chead\u003e` of every page. See\n[Theme assets and styling](theme-assets-and-styling) for the full asset system.\n\n## How to add CSS using content blocks\n\nSometimes you need a few CSS rules on a single content block or page. You can put CSS in\na content block as long as you wrap it in a `\u003cstyle\u003e` tag yourself.\n\n1.  Create a content block and select the **No added styling** template.\n2.  Write your CSS in the **Content** field, wrapped in a `\u003cstyle\u003e` tag.\n\nYou then have two options for using that content block.\n\nThe **first option** renders it from your head content block, which makes it global:\n\n\n```\n\n{{ all_content_blocks['your-content-block-identifier'].render }}\n```\n\n\nThe **second option** is to [relate](content-block-containers) the content block to a page\nor to another content block. The CSS then applies only where that block is rendered, not\nacross the whole site.\n\n## Third party CSS libraries\n\nStoreConnect does not support third party CSS libraries such as\n[Bootstrap](https://getbootstrap.com/). If you include one, you do so at your own risk.\n\nStoreConnect uses its own CSS library, which can conflict with a third party library. If\nyou understand the risk, you can reference the library from a style block or directly in\nyour head content block.\n\n1.  Create a content block and select the **No added styling** template. If you already\n    have a head content block, go to step 4.\n2.  Provide a name such as \"Head Content\", or a name of your choice.\n3.  Paste the link tag provided by your third party library.\n\n    ![Content block with a third-party stylesheet link tag in the Content field](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677789/documentation-media/head-content-block.jpeg)\n\n4.  Select **Save**.\n5.  Go to your **Store** record and assign the content block as the head content:\n    1.  Under the **Global Content** section, select the **HTML Head Content Block**\n        field.\n    2.  Search for your head content block.\n    3.  Select **Save**.\n6.  Check your site to confirm there are no design conflicts with the library.\n\nThe library's stylesheet now loads in the head of every page on that store."}