HamburgerHamburger Icon

Swatch Group

Swatch Group

COLOR Light Blue

Caret
<SwatchGroup options={{
  "name": "color",
  "values": [
    "Light Blue",
    "Dark Blue",
    "Blush",
    "Light Blue Striped",
    "Natural Contrast",
    "Purple",
    "Brown",
    "Red",
    "Navy Blue",
    "Cream",
    "Yellow",
    "Blush Striped"
  ]
}} minOverflow={11} size={"large"} colorInfo={[
  {
    "node": {
      "shopifyColorOption": {
        "color": "Light Blue"
      },
      "hexValue": "cad3e0"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Dark Blue"
      },
      "hexValue": "c0cde2"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Blush"
      },
      "hexValue": "ffe8dd"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Light Blue Striped"
      },
      "hexValue": "cad3e0",
      "pattern": "striped"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Natural Contrast"
      },
      "hexValue": "E5E2D5",
      "hexValue2": "DBD5BB",
      "pattern": "contrast-dominant"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Purple"
      },
      "hexValue": "BAB6CB"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Brown"
      },
      "hexValue": "BB755E"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Red"
      },
      "hexValue": "BA2D24"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Navy Blue"
      },
      "hexValue": "1E2351"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Cream"
      },
      "hexValue": "FFFCED"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Yellow"
      },
      "hexValue": "FFFAE3"
    }
  },
  {
    "node": {
      "shopifyColorOption": {
        "color": "Blush Striped"
      },
      "hexValue": "FBE5DC",
      "pattern": "striped"
    }
  }
]} />
Copy
Swatch Group Properties

Name

Description

Type

Required

Default

options

Swatch options info.

object

true

options sub properties

Name

Description

Type

Required

Default

name

Option name.

string

true

values

Option values.

array

true

handlers

List of handler names and click events.

array

false

handlers sub properties

Name

Description

Type

Required

Default

name

Handler name.

string

false

onClick

Handler function.

function

false

activeIndex

0 based index of active swatch option.

number

false

0

variants

List of variant data for options.

array

false

[]

activeVariant

Variant info for active swatch option.

object

false

{}

activeVariant sub properties

Name

Description

Type

Required

Default

id

Variant ID.

string

false

title

Variant title.

string

false

setActiveVariant

Event handler when swatch option is selected.

function

false

()=>{}

setActiveParams

Event handlers when swatch option URL parameter is updated.

object

false

{"color":null}

setActiveParams sub properties

Name

Description

Type

Required

Default

color

Color event handler.

function

false

null

oosQty

Minimum quantity to determine if swatch option is out of stock.

number

false

null

noInventory

True if swatch option is from a product that carries no inventory (i.e. gift card)

boolean

false

false

size

Size of swtch group ("small" | "large")

string

false

"large"

hideOptions

List of options that will be hidden.

array

false

[]

minOverflow

Minumum number of swatch buttons to display to hide overflow

number

false

null