Product color is not displaying and not alligned

[ByStitch]

In our website Oorbadi.com not able to view the color selection for the product. It shows a text for the color and also the color and Size UI is not aligned well. How can i fix it. Any input will be very helpful. thank you.

https://oorbadi.com/products/nonetwork-t-shirt

[Made4uo-Ribe · Accepted solution]

Hi @ByStitch 

Check this one, 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.tp-prd-variant-color label {
    width: auto;
}
.variatn-option.flex.flex-wrap.items-center.justify-center.gap-8 {
    justify-content: left;
}
.variatn-option span label {
     padding: 0 5px;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ByStitch]

Hi @Made4uo-Ribe ,

Thank you for the suggestions, unfortunately it dint  solve our problem.

The color selection box is just showing the text and a black square, instead of the colors.

Could you please help us to resolve this issue.

[Made4uo-Ribe]

Oh, we can add some !important. 

This is same code but I add something.

.tp-prd-variant-color label {
    width: auto !important;
}
.variatn-option.flex.flex-wrap.items-center.justify-center.gap-8 {
    justify-content: left;
}
.variatn-option span label {
     padding: 0 5px;
}

And Save. 

Check if it work. Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ByStitch]

@Made4uo-Ribe 
Thank you but even with that latest code, colors are not coming in the box.

here instead of text "Black", we want to show Black square. 
Instead of "Navy blue", we want to show Navy blue square. 

Could you please help with this .

[Made4uo-Ribe]

In your post you just ask the alignment, anyway please check this one. I copy the size designs. 

Same Instruction. 

.tp-prd-variant label[checked=true] {
    box-shadow: none;
    background-color: var(--primary-color);
    color: var(--color-white);
    height: 3rem;    
}
.tp-prd-variant-color label{
 background: var(--color-white);
 box-shadow: 0 0 0 1px var(--border-color);
 height: 3rem;
 align-items: center;
 display: flex;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!