Changer texte variantes de produits par bulle de couleur

https://gist.github.com/carolineschnapp/ed47c42d48ae4100f7be

COULEURS

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

@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;
  }
}

TEXTURES

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!