Add Color swatches to #Brooklyn theme. Use hexadecimal values or images.

Add Color Swatches using hex values.md

What we want

We want to go from this:

... to that:

How to get there

1. Start compiling all the names of your colors store-wide. Add to a text file. By color names, we mean these:

Note

The name of the product option does not need to be Color. This tutorial can work with any product option.

2. Find the proper hexadecimal value for each color. Use this tool: http://www.color-hex.com/ Add the hex value next to each color in your text file.

3. Time to write some CSS! Open your theme.scss.liquid stylesheet in the online code editor. At the very bottom of the file, define your colors, following this very strict format:

$colors: ( 
  'Color-Hot-Pink'     #FE4365, 
  'Color-Vieux-Rose'   #FC9D9A,
  'Color-Old-Paper'    #F9CDAD,
  'Color-Faded-Green'  #C8C8A9,
  'Color-Green'        #83AF9B
);

Notes

• We are writing Sassy CSS here. We are defining a comma-separated list of space-separated lists. A list of lists. Alas, the version of Sass used by Shopify is too old for us to use a map object, which would have made our code more succinct.
• The name of each color must match this pattern: <Option Name>-<Option Value>. Use the same case as in your Admin. Except replace white space with a dash. So if you have a 'Color' option, and one of its values is 'Faded Green', use 'Color-Faded-Green', not 'Color Faded Green' nor 'color-Faded-green'. Accents are allowed.
• There ought be no comma between the color name and the hex value.
• There ought to be a comma at the end of each color definition except the last one.

4. Right below that, add this CSS:

@each $color in $colors {
  $colorName: nth($color, 1);
  $bgColor:   nth($color, 2);

  #ProductSelect-option-#{$colorName} + label {
    background-color: $bgColor;
    color: $bgColor;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 25px;
    margin: 5px;
    text-indent: 100%;
    white-space: nowrap;
  }

  #ProductSelect-option-#{$colorName}:checked + label {
    border-color: #555;
    border-width: 3px;
  }
}

That's it!

Add Color Swatches using images.md

What we want

We want to go from this:

... to that:

How to get there

1. Start compiling the names of all our options store-wide. Add to a text file. By “options”, we mean these things:

Note: The name of the product option label does not need to be Color nor Finish. This tutorial can work with any product option.

2. Upload to your theme assets an image that will illustrate the option. Write down the filename next to the option name in your text file. Repeat for all options.

3. Time to write some CSS! Open your theme.scss.liquid stylesheet in the online code editor. At the very bottom of the file, define your options, following this very strict format:

$options: ( 
  'Finish-Walnut'      'swatch_walnut.png', 
  'Finish-Gold'        'swatch_gold.png',
  'Finish-Graphite'    'swatch_graphite.png'
);

Notes

• We are writing Sassy CSS here. We are defining a comma-separated list of space-separated lists. A list of lists. Alas, the version of Sass used by Shopify is too old for us to use a map object, which would have made our code more succinct.
• The name of each option must match this pattern: <Option Name>-<Option Value>. Use the same case as in your Admin. Except replace white space with a dash. So if you have a 'Finish' option, and one of its values is 'Marbled Green', use 'Finish-Marbled-Green', not 'Finish Marbled Green' nor 'finish-Marbled-green'. Accents are allowed.
• There ought be no comma between the option name and the filename.
• The filename can be anything, there's no naming convention to follow here.
• There ought to be a comma at the end of each option definition except the last one.

4. Right below that, add this CSS:

$url_prefix: '{{ '*' | asset_url | split: '*' | first }}';
$url_suffix: '{{ '*' | asset_url | split: '*' | last }}';

@each $option in $options {
  $optionName: nth($option, 1);
  $bgImage:    nth($option, 2);

  #ProductSelect-option-#{$optionName} + label {
    background-image: url( $url_prefix + $bgImage + $url_suffix );
    background-size: cover;
    color: transparent;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 25px;
    margin: 5px;
    text-indent: 100%;
    white-space: nowrap;
  }
  
  #ProductSelect-option-#{$optionName}:checked + label {
    border-color: #555;
    border-width: 3px;
  }
}

That's it!

Please, how to show a white space around selected color like this?
Thanks.

Hello @vincenzoquarta,

Add box-shadow & text-indent property as shown below.

`#ProductSelect-option-#{$colorName}:checked + label {
border-color: #555;
border-width: 1px;
box-shadow: 0px 0px 0px 3px #fff inset;
text-indent: -2000px;
}

`
Good Luck!

Regards,
Zeian

Hi @Zeian-Shahzad
It's works fine!
Thank you.

Please, how to show a white space around selected color like this?
Thanks.

Hello @vincenzoquarta,
Add box-shadow & text-indent property as shown below.
#ProductSelect-option-#{$colorName}:checked + label { border-color: #555; border-width: 1px; box-shadow: 0px 0px 0px 3px #fff inset; text-indent: -2000px; }
Good Luck!
Regards,
Zeian

Hi @Zeian-Shahzad
It's works fine!
Thank you.

I'm always happy to help.