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