Shopify » Color

A Shopify Color works similar to the ACF type Color and gives you a convenient control to select a color and store the result as a string in hex RGB format such as #000000, #e9e9e9, #ffffff etc. Example use:

<button style="background-color: {{ product.metafields.accentuate.background_color.value }}">Click</button>

Also, you can use Liquid Color filters to perform operations on the color such as converting to HSL, lighten or darken the color etc.

Note: while the value property used as shown above returns a string in hex RGB format, the Shopify Color type actually returns a Color object with access to the selected color's underlying properties such as the red, blue and green components.

Last updated