# Understand StoreConnect default CSS styles

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

StoreConnect stores come with default CSS styles that work as an out-of-the-box framework and you can use in liquid templates, custom Markdown, and HTML code.

For a more comprehensive guide to styling markdown with CSS, GitLab has a great article on [Markdown Kramdown](https://about.gitlab.com/blog/2016/07/19/markdown-kramdown-tips-and-tricks/#classes-ids-and-attributes) that can help.

## Flex

| Class        | Style                                 |
|--------------|---------------------------------------|
| .sc-flex     | display: flex;                        |
| .sc-flex-row | display: flex;flex-direction: row;    |
| .sc-flex-col | display: flex;flex-direction: column; |

### Responsive flex classes

| Class               | Small ≥ 576px                         | Medium ≥ 768px       |
|---------------------|---------------------------------------|----------------------|
| .sc-flex-row-sm     | display: flex;flex-direction: row;    |                      |
| .sc-flex-col-to-row | display: flex;flex-direction: column; | flex-direction: row; |

| Class                     | Style                           |
|---------------------------|---------------------------------|
| .sc-justify-space-between | justify-content: space-between; |
| .sc-justify-space-evenly  | justify-content: space-evenly;  |
| .sc-justify-space-around  | justify-content: space-around;  |
| .sc-justify-space-center  | justify-content: center;        |
| .sc-justify-space-start   | justify-content: flex-start;    |
| .sc-justify-space-end     | justify-content: flex-end;      |

| Class                  | Style                    |
|------------------------|--------------------------|
| .sc-align-items-center | align-items: center;     |
| .sc-align-items-start  | align-items: flex-start; |
| .sc-align-items-end    | align-items: flex-end;   |

| Class         | Style           |
|---------------|-----------------|
| .sc-grow      | flex-grow: 1;   |
| .sc-no-shrink | flex-shrink: 0; |

## Grid

### Responsive columns

| Class                   | Style                                                          | Medium ≥ 768px                         |
|-------------------------|----------------------------------------------------------------|----------------------------------------|
| .sc-one-to-two-column   | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(2, 1fr); |
| .sc-one-to-three-column | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(3, 1fr); |
| .sc-one-to-four-column  | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(4, 1fr); |
| .sc-two-to-four-column  | display: grid;gap: 20px;grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(4, 1fr); |

### Fixed columns

| Class                    | Style                                                          |
|--------------------------|----------------------------------------------------------------|
| .sc-one-third-two-thirds | display: grid;gap: 20px;grid-template-columns: 1fr 2fr;        |
| .sc-two-thirds-one-third | display: grid;gap: 20px;grid-template-columns: 2fr 1fr;        |
| .sc-two-column           | display: grid;gap: 20px;grid-template-columns: 1fr 1fr;        |
| .sc-three-column         | display: grid;gap: 20px;grid-template-columns: repeat(3, 1fr); |
| .sc-four-column          | display: grid;gap: 20px;grid-template-columns: repeat(4, 1fr); |

## Display

| Class                    | Style                  |
|--------------------------|------------------------|
| .sc-display-inline-block | display: inline-block; |
| .sc-display-inline       | display: inline;       |
| .sc-display-block        | display: block;        |
| .sc-hide                 | display: none;         |
| .sc-invisble             | display: hidden;       |

## Responsive hide / display elements

| Screen Size                      | Class                  |
|----------------------------------|------------------------|
| Hidden on small ≤ 576px          | .sc-hide-up-to-small   |
| Hidden only up to medium ≤ 768px | .sc-hide-up-to-medium  |
| Hidden only up to large ≤ 992px  | .sc-hide-up-to-large   |
| Visible up to small ≤ 576px      | .sc-hide-small-and -up |
| Visible up to medium ≤ 768px     | .sc-hide-medium-and-up |
| Visible up to large ≤ 992px      | .sc-hide-large-and-up  |

## Width

| Class              | Style            |
|--------------------|------------------|
| .sc-expand         | width: 100%;     |
| .sc-mw-100         | max-width: 100%; |
| .sc-one-whole      | width: 100%;     |
| .sc-three-quarters | width: 75%;      |
| .sc-two-thirds     | width: 66.66%;   |
| .sc-one-half       | width: 50%;      |
| .sc-one-third      | width: 33.33%;   |
| .sc-one-quarter    | width: 25%;      |

### Responsive widths

| Class                           | Style          |
|---------------------------------|----------------|
| .sc-one-whole-small-and-up      | width: 100%;   |
| .sc-three-quarters-small-and-up | width: 75%;    |
| .sc-two-thirds-small-and-up     | width: 66.66%; |
| .sc-one-half-small-and-up       | width: 50%;    |
| .sc-one-third-small-and-up      | width: 33.33%; |
| .sc-one-quarter-small-and-up    | width: 25%;    |

| Class                            | Style          |
|----------------------------------|----------------|
| .sc-one-whole-medium-and-up      | width: 100%;   |
| .sc-three-quarters-medium-and-up | width: 75%;    |
| .sc-two-thirds-medium-and-up     | width: 66.66%; |
| .sc-one-half-medium-and-up       | width: 50%;    |
| .sc-one-third-medium-and-up      | width: 33.33%; |
| .sc-one-quarter-medium-and-up    | width: 25%;    |

| Class                           | Style          |
|---------------------------------|----------------|
| .sc-one-whole-up-to-medium      | width: 100%;   |
| .sc-three-quarters-up-to-medium | width: 75%;    |
| .sc-two-thirds-up-to-medium     | width: 66.66%; |
| .sc-one-half-up-to-medium       | width: 50%;    |
| .sc-one-third-up-to-medium      | width: 33.33%; |
| .sc-one-quarter-up-to-medium    | width: 25%;    |

## Typography & alignments

| Class           | Style               |
|-----------------|---------------------|
| .sc-text-left   | text-align: left;   |
| .sc-text-right  | text-align: right;  |
| .sc-text-center | text-align: center; |

| Class             | Style            |
|-------------------|------------------|
| .sc-font-zero     | font-size: 0;    |
| .sc-font-tiny     | font-size: 14px; |
| .sc-font-small    | font-size: 15px; |
| .sc-font-base     | font-size: 16px; |
| .sc-font-medium   | font-size: 18px; |
| .sc-font-large    | font-size: 20px; |
| .sc-font-xlarge   | font-size: 24px; |
| .sc-font-xxlarge  | font-size: 30px; |
| .sc-font-huge     | font-size: 35px; |
| .sc-font-gigantic | font-size: 45px; |

| Class                 | Style                               |
|-----------------------|-------------------------------------|
| .sc-font-normal       | font-weight: 400;                   |
| .sc-font-bold         | font-weight: 600;                   |
| .sc-font-family       | font-family: var(--sc-font-family); |
| .sc-font-line-through | text-decoration: line-through;      |

| Class         | Style                                                         |
|---------------|---------------------------------------------------------------|
| .sc-uppercase | text-transform: uppercase;                                    |
| .sc-truncate  | white-space: nowrap;overflow: hidden;text-overflow: ellipsis; |

## Colours

| Class               | Style                           |
|---------------------|---------------------------------|
| .sc-color-primary   | color: hsla(212, 100%, 50%, 1); |
| .sc-color-secondary | color: hsla(0, 0%, 15%, 1);     |
| .sc-color-error     | color: hsla(0, 100%, 45%, 1);   |
| .sc-color-sale      | color: hsla(0, 100%, 45%, 1);   |

**Primary** and **secondary** might change if you have set up your brand colors during the installation process or you have overridden these properties in the custom style field.

| Class              | Style           |
|--------------------|-----------------|
| .sc-shade-darkest  | color: #1a1a1a; |
| .sc-shade-dark     | color: #4d4d4d; |
| .sc-shade-neutral  | color: #737373; |
| .sc-shade-light    | color: #b3b3b3; |
| .sc-shade-lighter  | color: #dedede; |
| .sc-shade-lightest | color: #f2f2f2; |

## Box shadow

| Class        | Style                                                                      |
|--------------|----------------------------------------------------------------------------|
| .sc-shadow   | box-shadow: 0 1px 2px hsla(0,0%,0%,0.1);                                   |
| .sc-shadow-2 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05); |
| .sc-shade-3  | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);  |

## Spacing

### Margins

You can configure and apply responsive spacing classes to margin and padding classes. Here are the basics:

`sc-{ breakpoint }:{ property }-{ size }`

**Mobile-first breakpoints**

-   sm: 576px
-   md: 768px
-   lg: 992px
-   xl: 1400px
-   hg: 1700px

**Properties:**

-   m - for classes that set margin
-   p - for classes that set padding

**Sides:**

-   t sets margin-top or padding-top
-   b sets margin-bottom or padding-bottom
-   l sets margin-left or padding-left
-   r sets margin-right or padding-right
-   s sets margin-left and margin-right or padding-left and padding-right
-   e sets margin-top and margin-bottom or padding-top and padding-bottom

**Sizes:**

-   micro: 3px
-   tiny: 5px
-   small: 10px
-   medium: 15px
-   base: 20px
-   large: 30px
-   xlarge: 40px
-   xxlarge: 60px
-   huge: 80px

### Example with breakpoints

`sc-md:m-base` sets `margin: 20px;` from `768px` and up

`sc-md:ms-base` sets `margin-right: 20px; margin-left: 20px;` from `768px` and up

### Example without breakpoints

`sc-p-base` sets `padding: 20px;` across all devices

`sc-pl-base` sets `padding-left: 20px;` across all devices

### Margin built-in classes

| Class           | Small ≥ 576px                         | Medium ≥ 768px                        |
|-----------------|---------------------------------------|---------------------------------------|
| .sc-m-none      | margin: 0;                            | margin: 0;                            |
| .sc-mt          | margin-top: 10px;                     | margin-top: 20px;                     |
| .sc-mr          | margin-right: 10px;                   | margin-right: 20px;                   |
| .sc-mb          | margin-bottom: 10px;                  | margin-bottom: 20px;                  |
| .sc-ml          | margin-left: 10px;                    | margin-left: 20px;                    |
| .sc-mt-spacious | margin-top: 20px;margin-bottom: 20px; | margin-top: 40px;margin-bottom: 40px; |
| .sc-mr-spacious | margin-right: 20px;margin-left: 20px; | margin-right: 40px;margin-left: 40px; |
| .sc-mb-spacious | margin-bottom: 20px;margin-top: 20px; | margin-bottom: 40px;margin-top: 40px; |
| .sc-ml-spacious | margin-left: 20px;margin-right: 20px; | margin-left: 40px;margin-right: 40px; |
| .sc-me-spacious | margin-left: 20px;margin-right: 20px; | margin-left: 40px;margin-right: 40px; |
| .sc-ms-spacious | margin-top: 20px;margin-bottom: 20px; | margin-top: 40px;margin-bottom: 40px; |

| Class       | Style                                 |
|-------------|---------------------------------------|
| .sc-ms-auto | margin-left: auto;margin-right: auto; |

### Padding built-in classes

| Class           | Small ≥ 576px                           | Medium ≥ 768px                          |
|-----------------|-----------------------------------------|-----------------------------------------|
| .sc-p-none      | padding: 0;                             | padding: 0;                             |
| .sc-pt          | padding-top: 10px;                      | padding-top: 20px;                      |
| .sc-pr          | padding-right: 10px;                    | padding-right: 20px;                    |
| .sc-pb          | padding-bottom: 10px;                   | padding-bottom: 20px;                   |
| .sc-pl          | padding-left: 10px;                     | padding-left: 20px;                     |
| .sc-pt-spacious | padding-top: 20px;padding-bottom: 20px; | padding-top: 40px;padding-bottom: 40px; |
| .sc-pr-spacious | padding-right: 20px;padding-left: 20px; | padding-right: 40px;padding-left: 40px; |
| .sc-pb-spacious | padding-bottom: 20px;padding-top: 20px; | padding-bottom: 40px;padding-top: 40px; |
| .sc-pl-spacious | padding-left: 20px;padding-right: 20px; | padding-left: 40px;padding-right: 40px; |
| .sc-pe-spacious | padding-left: 20px;padding-right: 20px; | padding-left: 40px;padding-right: 40px; |
| .sc-ps-spacious | padding-top: 20px;padding-bottom: 20px; | padding-top: 40px;padding-bottom: 40px; |

## Borders

| Class             | Style Applied                                                   |
|-------------------|-----------------------------------------------------------------|
| .sc-border-top    | border-top: 1px solid #d9d9d9;                                  |
| .sc-border-right  | border-right: 1px solid #d9d9d9;                                |
| .sc-border-bottom | border-bottom: 1px solid #d9d9d9;                               |
| .sc-border-left   | border-left: 1px solid #d9d9d9;                                 |
| .sc-border-ends   | border-top: 1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9; |
| .sc-border-sides  | border-left: 1px solid #d9d9d9;border-right: 1px solid #d9d9d9; |
| .sc-border-none   | border: none;                                                   |

**Related help documents**

-   [Adding Custom CSS](/documentation/adding-custom-css)

---

## 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/default-css-styles