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

Highlighted
New Member
4 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.

jamesallenct_0-1603403632075.png

 

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;
    position:relative;
  }

  #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;
  top:-30px;
  left:-70px;
  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-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{% if option.name != "Color" %}{{ value | escape }}{% endif %}
                            {% if option.name == "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.

 

0 Likes
Highlighted
Shopify Partner
217 4 16

Hi, thanks for your post I can help you with this if you won't mind could you like to mail me on Syedmustafanadeem99@gmail.com 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 Syedmustafanadeem99@gmail.com
0 Likes