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 filtersarrow-up-right to perform operations on the color such as converting to HSL, lighten or darken the color etc.

circle-info

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

Last updated