Brooklyn Theme - Changing the 'Out of Stock' Design in the Product Page

New Member
5 0 0

Greetings, everyone!
I have been exploring a lot of code options provided in this forum and other websites, but I am no expert at all nor I fully understand what I copied down. Although, I tried my best!

To cut to the chase, this is what I want to happen:

  • To change the Out of Stock design from being just a slash to either an "X" mark or a PNG file.
  • To change the color from black to something else.
  • If you have other designs or ideas, I would like to hear it as well.


Here is a screen capture of the product page.

The first 3 color options are out of stock. Including the black one.



Here is the code I added at the bottom of the theme.scss.liquid.

What this does is provide a color swatch option for color variety and an added tooltip when the cursor hovers above the respective color.

$colors: ( 
  'color-BLACK'				#000000,
  'color-WHITE'        		#FFFFFF,
  'color-GREY'				#808080,
  'color-GRANITE'			#808080,
  'color-BROWN'				#A52A2A,
  'color-DENIM'				#1560BD,
  'color-SILVER'	   		#C0C0C0,
  'color-COBALT'	  	    #0047AB,
  'color-RED\ SONJA'    	#A92F2E,
  'color-AMERICAN\ CHERRY'	#C19A6B,
  'color-WENGE\ VENEER'		#855E42,
  'color-BURGANDY'			#800020,
  'color-GRUN'				#006400,
  'color-MATTE\ BLACK' 	    #171717, 
  'color-MATTE\ WHITE' 	    #F2F3F4,
  'color-MATTE\ GREY'  	    #A9A9B0,
  'color-GOLDEN\ HOUR' 	    #FFDF00,
  'color-WARM\ PINK'   	    #F1BBB0,
  'color-DUSK\ BLUE'   	    #7da1bf

@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;
    border-radius: 25px;
    margin: 15px;
    white-space: nowrap;
    display: inline-block;

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

.tooltip {
  visibility: hidden;
  width: 190px;
  background-color: #A9A9B0;
  color: #171717;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;

.tooltip::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;

label:hover > .tooltip {
  visibility: visible;


product-template.liquid (for the tooltip)

<label for="ProductSelect-option-{{ | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{% if != "Color" %}{{ value | escape }}{% endif %}
                            {% if == "Color" %}<span class="tooltip" data-tooltip="{{ value }}" data-flow="top">{{ value }}</span>{% endif %}</label>


I apologize if I cannot provide the source of where I copied the codes. I am still looking for it.


Shopify Partner
249 5 18

Hi, thanks for your post I can help you with this if you won't mind could you like to mail me on so we can get started with this project. Thanks 

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at