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
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
