# Adding custom CSS

Source: https://support.storeconnect.com/articles/adding-custom-css · Last modified 21 August 2026

There are several ways to customize your StoreConnect store's CSS. Which one suits you
depends on how much CSS you have and how often it changes.

## On this page

1.  [Add CSS to the Custom Styles field](#add-css-to-the-custom-styles-field)
2.  [Use style blocks to upload your CSS](#use-style-blocks-to-upload-your-css)
3.  [How to add CSS theme assets](#how-to-add-css-theme-assets)
4.  [How to add CSS using content blocks](#how-to-add-css-using-content-blocks)
5.  [Third party CSS libraries](#third-party-css-libraries)

## Which method to use

| Method | Use it for | Where it renders |
| --- | --- | --- |
| [Custom Styles field](#add-css-to-the-custom-styles-field) | Small tweaks, and quick checks while developing a theme | `<head>`, in a `<style>` tag, before style blocks |
| [Style blocks](#use-style-blocks-to-upload-your-css) | Larger CSS you want split into separate, individually ordered records | `<head>`, after the Custom Styles field, before the head content block |
| [Theme assets](#how-to-add-css-theme-assets) | A finished stylesheet file on a theme you control | `<head>`, via the theme's `theme-supplement.css` asset |
| [Content blocks](#how-to-add-css-using-content-blocks) | Short rules scoped to one page or block | Wherever the content block is rendered |

## Add CSS to the Custom Styles field

Custom styles are small stylesheet tweaks. This is also the option to use while you are
developing a new theme and want to see a change on your site quickly.

Anything you put here is wrapped in a `<style>` tag and rendered in the `<head>` of every
page, before any style blocks and before the head content block. Enter valid CSS with no
`<style>` tag of your own. See [Customize a theme using CSS](custom-theme-css) for more
information.

1.  Go to your store's **Store** record.

    ![The Store record open in Salesforce](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677788/documentation-media/the-store-record.jpg)

2.  Find the **Custom Styles** field under the **Global Content** section.
3.  Select the pencil icon, or select **Edit**.
4.  Insert your custom styles into the field.
5.  Select **Save**.

Your CSS applies to every page of the store on the next page load.

:::note

A large amount of CSS in this field makes the Store record page long and awkward to work
with, and harder to maintain than the same rules split across style blocks. Move to style
blocks once you have more than a handful of rules.

:::

## Use style blocks to upload your CSS

Style blocks keep your CSS organized and maintainable. They are the better option when
you are making significant changes, because you can group or separate rules and review
each one quickly.

1.  Go to the **Style Blocks** list and select **New**.

    ![Salesforce App Launcher open, with Style Blocks being searched for](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677787/documentation-media/style-blocks.gif)

2.  Give it a useful name and assign it to your store.
3.  Set the configuration:
    -   **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, so it does
        affect when the CSS applies.
    -   **Active** — only active style blocks are included on the website.
    -   **Channels** — the surfaces the CSS applies to. Select **Web** for your online
        store, **POS** for the point of sale app, or both. This field is required, and a
        style block without **Web** never loads on your online store even when it is
        active and global.
    -   **Global** — include the CSS automatically on every page. Leave it unchecked and
        the style block is not included on your store at all.
    -   **Position** — the order style blocks load in. Lower numbers load first.
4.  Define the style content, using one of:
    -   **Stylesheet URL** — an external link to bring in your CSS.
    -   **Content** — your CSS rules, written **without** `<style>` tags.
5.  Select **Save**.

An active, global style block set to the **Web** channel is rendered in the `<head>` of
every page, wrapped in a `<style>` tag, or as `<link rel="stylesheet">` when you set
**Stylesheet URL**. Style blocks render after the **Custom Styles** field and before the
head content block. You can create as many as you need.

## How to add CSS theme assets

You can upload a CSS stylesheet file to the theme assets. This is a good option when you
have a finished file and want to reference it rather than paste your entire CSS into a
field. It requires an [active theme](downloadable-themes) in your store.

If you are developing a new theme, use one of the other options during development and
move to a theme asset when you are done. You cannot edit the CSS directly in the theme
object interface, so every change means uploading a new file.

1.  Go to the **Theme** list and open the theme you are working on.
2.  Select the **Related** tab.
3.  Under **Theme Assets**, select **New**.
4.  Set the key to `theme-supplement.css`.
5.  Upload your CSS file.
6.  Select **Save**.

The theme injects that file into the `<head>` of every page. See
[Theme assets and styling](theme-assets-and-styling) for the full asset system.

## How to add CSS using content blocks

Sometimes you need a few CSS rules on a single content block or page. You can put CSS in
a content block as long as you wrap it in a `<style>` tag yourself.

1.  Create a content block and select the **No added styling** template.
2.  Write your CSS in the **Content** field, wrapped in a `<style>` tag.

You then have two options for using that content block.

The **first option** renders it from your head content block, which makes it global:


```

{{ all_content_blocks['your-content-block-identifier'].render }}
```


The **second option** is to [relate](content-block-containers) the content block to a page
or to another content block. The CSS then applies only where that block is rendered, not
across the whole site.

## Third party CSS libraries

StoreConnect does not support third party CSS libraries such as
[Bootstrap](https://getbootstrap.com/). If you include one, you do so at your own risk.

StoreConnect uses its own CSS library, which can conflict with a third party library. If
you understand the risk, you can reference the library from a style block or directly in
your head content block.

1.  Create a content block and select the **No added styling** template. If you already
    have a head content block, go to step 4.
2.  Provide a name such as "Head Content", or a name of your choice.
3.  Paste the link tag provided by your third party library.

    ![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)

4.  Select **Save**.
5.  Go to your **Store** record and assign the content block as the head content:
    1.  Under the **Global Content** section, select the **HTML Head Content Block**
        field.
    2.  Search for your head content block.
    3.  Select **Save**.
6.  Check your site to confirm there are no design conflicts with the library.

The library's stylesheet now loads in the head of every page on that store.

---

## Follow StoreConnect

- [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://getstoreconnect.com/partners)
- [News](https://getstoreconnect.com/articles/news)
- [Events](https://getstoreconnect.com/articles/events)
- [Feature Comparison](https://getstoreconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://getstoreconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

---

StoreConnect Support — https://support.storeconnect.com/articles/adding-custom-css