Frontend Guide
Path:
snippets/colors.liquid
primary
#2D2D2D
brand
#DE2038
green-400
#14B237
gray-100
#F5F5F5
gray-200
#E8E8E8
gray-700
#7E7E7E
gray-800
#3B3B3B
star-dust-500
#9b9b9b
dove-gray-500
#6c6c6c
Path:
snippets/icon.liquid
Usage:
{% render 'icon', icon: 'account', class: '!h-10 !w-10' %}
search
bag
ruler
mobile
chat
pin
account
list
info-circle
checkmark-circle
question-circle
visa
mastercard
american-express
discover
paypal
v-pay
apple-pay
venmo
instagram
facebook
pinterest
tiktok
youtube
x
quote
star-full
minus
plus
chevron-up
chevron-down
chevron-left
chevron-right
cross
clock
absolute-logo
klarna-logo
filters
burger
checkmark
visa-colored
mastercard-colored
amex-colored
discover-colored
paypal-colored
klarna-colored
checked
grid
orders
pen
eye-off
eye
video
google
loader
phone-fill
fax-fill
delivery
email-fill
return-policy
pin-fill
security-statement
userway
userway-loader
trustpilot
Use this class to reset button styles:
.reset-styles
.button
.button.white
.button:disabled
Use this class to reset input styles:
.reset-styles
Default
Error
Select
Textarea
Heading H1
.text-5xl
font-size: 44px
line-height: 36px
Heading H2
.text-4xl
font-size: 34px
line-height: 42px
Heading H3
.text-3xl
font-size: 30px
line-height: 36px
Heading H4
.text-2xl
font-size: 24px
line-height: 30px
Heading H5
.text-xl
font-size: 20px
line-height: 28px
Text Large
.text-lg
font-size: 18px
line-height: 25px
Text base
.text-base
font-size: 16px
line-height: 18px
Text Small
.text-sm
font-size: 14px
line-height: 21px
Text XSmall
.text-xs
font-size: 12px
line-height: 17px