Shopify Brand Colour in custom.css

Issue

I have set a brand primary color in Shopify > Settings > Brand

I would use this color in a custom.css.

Is there a way to do this (I don't want to hard code the colour in the css)?

Solution

In a .css.liquid file, you could try some version of:

.container {
  background: {{ shop.brand.colors.primary[0].background }};
}

Which would compile to:

.container {
  background: #0b101f;
}

More docs on the subject of including brand assets and specifically colours:

• https://shopify.dev/docs/api/liquid/objects/brand
• https://shopify.dev/docs/api/liquid/objects/brand_color

Answered By - Cameron Hurd