Skip to main content

Color Block

Display color swatches from metafields on your storefront.

Supported Types​

  • color — single color swatch
  • list.color — multiple color swatches displayed together

Customization Options​

Swatch Size and Shape​

Adjust the dimensions and shape of each color swatch circle, square, or rounded square.

Show Color Value​

Toggle the display of the hex color code next to each swatch, so customers can see the exact color value (e.g., #FF5733).

Spacing​

Control the gap between individual color swatches.

Borders​

Add customizable borders to swatches for visual definition, especially useful for light colors on white backgrounds.

List Color Layouts​

When using list.color metafields, you get access to three layout options for arranging multiple color swatches:

Inline (Default)​

Colors are displayed in a horizontal row that wraps to the next line when the container width is exceeded. Best for compact displays with a small number of colors.

Grid​

Colors are arranged in a CSS grid with a configurable number of columns (2–8). This layout is ideal for displaying a large palette of colors in an organized, structured way, such as showing all available product colors at a glance.

Vertical List​

Colors are stacked vertically in a single column. When combined with the Show Color Value option, this creates a clean list where each swatch is paired with its hex code, useful for detailed color specification sheets.

Use Cases
  • Product color options Use the grid or inline layout to showcase available colors for a product
  • Brand color palette Display your brand colors on an about page using a vertical list with hex values
  • Material swatches Show available fabric or paint colors in a grid layout