carolineschnapp/Add Color Swatches using hex values.md

Last active August 5, 2024 10:32

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/carolineschnapp/ed47c42d48ae4100f7be.js"></script>
Save carolineschnapp/ed47c42d48ae4100f7be to your computer and use it in GitHub Desktop.

Download ZIP

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

Raw

Add Color Swatches using hex values.md

What we want

We want to go from this:

... to that:

How to get there

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.

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.
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.

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!

Raw

Add Color Swatches using images.md

What we want

We want to go from this:

... to that:

How to get there

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.

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.
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.

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!

24HW-nosteam commented Aug 5, 2020 •

edited

Loading

Thank you for sharing the code! Germans struggling with the first code? - maybe this can help:

Since I am so new to coding I struggled an hour with the code & I thought why keep my realization to myself.
I had to remove the spaces and then it worked fine in english - so you need to change color to farbe... sounds easy - took me long enough.

$colors: (
'farbe-Hotpink' #FE4365,
'farbe-Vieuxrose' #FC9D9A,
'farbe-Oldpaper' #F9CDAD,
'farbe-Fadedgreen' #C8C8A9,
'farbe-Green' #83AF9B
);

@each $farbe in $colors {
$colorName: nth($farbe, 1);
$bgColor: nth($farbe, 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;
}
}

lisantwi commented Aug 18, 2020

@varshagupta22s were you able to fix the issue of the buttons not appearing on the featured products page?

24HW-nosteam commented Aug 19, 2020

@lisantwi i could fix that with changing "#ProductSelect-option" to the handle of the featured product on my main page. You just need to inspect one color element (on your website, scroll to your featured product, right click on e.g. "blue", inspect element, and then you should find something starting with "ProductSelect-option" and going on with "featured product" or something like that. This is what you need to copy and insert instead of the "ProductSelect-option".

So you would just add the two last paragraphs - something like this (unfortunately i don't have the right handle for the feat. product, my sub ended yesterday):

#ProductSelect-option-featured-products-#{$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-featured-products-#{$colorName}:checked + label {
border-color: #555;
border-width: 3px;
}
}

lisantwi commented Aug 19, 2020

@24HW-nosteam Thanks for your reply! I tried this and for some reason it's still not showing up. I inspected and found the ID : #ProductSelect--1594797442057-option. I then added to my code in the theme.scss file. I did not replace the ProductSelect-option, because I want it to show up on both the featured products and individual product pages. It's showing up fine for the individual product pages though. :

@each $option in $options {
$colorName: nth($option, 1);
$bgColor: nth($option, 2);

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

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

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

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

Do you have any further suggestions I can try out? Thanks again!

24HW-nosteam commented Aug 20, 2020 •

edited

Loading

@lisantwi

Sub is renewed - I used:

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

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

ayoadeniji commented Nov 14, 2020

Hi, I really need help. I have tried using the code and following the steps for "Add Color Swatches using images.md" but it is not working for me. I know this was posted in 2015, are there changes to the code? I am using the Brooklyn Theme

ghost commented Nov 20, 2020 •

edited by ghost

Loading

Hi, I really need help. I have tried using the code and following the steps for "Add Color Swatches using images.md" but it is not working for me. I know this was posted in 2015, are there changes to the code? I am using the Brooklyn Theme

Hey, I've tried first option, but maybe it could help you with second option too.

Firstly, try lowercase color, because when I've inspected product page it had lowercase color word inside of label, not capital case

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

Secondly, check Shopify product options, how you've named these colors, it shouldn't have space between words, place "-" between them

That's what worked for me

beeaanno commented Feb 6, 2021

I've tried this using the exact code but it doesn't do anything. Has this changed in 2021?

vincenzoquarta commented Apr 17, 2021 •

edited

Loading

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

Zeian-Shahzad commented Apr 20, 2021

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

vincenzoquarta commented Apr 20, 2021

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.

Zeian-Shahzad commented Apr 20, 2021

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.

carolineschnapp/Add Color Swatches using hex values.md

What we want

How to get there

What we want

How to get there

24HW-nosteam commented Aug 5, 2020 • edited Loading

lisantwi commented Aug 18, 2020

24HW-nosteam commented Aug 19, 2020

lisantwi commented Aug 19, 2020

24HW-nosteam commented Aug 20, 2020 • edited Loading

ayoadeniji commented Nov 14, 2020

ghost commented Nov 20, 2020 • edited by ghost Loading

beeaanno commented Feb 6, 2021

vincenzoquarta commented Apr 17, 2021 • edited Loading

Zeian-Shahzad commented Apr 20, 2021

vincenzoquarta commented Apr 20, 2021

Zeian-Shahzad commented Apr 20, 2021

24HW-nosteam commented Aug 5, 2020 •

edited

Loading

24HW-nosteam commented Aug 20, 2020 •

edited

Loading

ghost commented Nov 20, 2020 •

edited by ghost

Loading

vincenzoquarta commented Apr 17, 2021 •

edited

Loading