Solved

Product color is not displaying and not alligned

ByStitch
Tourist
5 0 3

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

Screenshot 2024-05-08 at 7.25.37 PM.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5930 1426 1756

This is an 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:

Made4uoRibe_0-1715177676803.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
5930 1426 1756

This is an 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:

Made4uoRibe_0-1715177676803.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


ByStitch
Tourist
5 0 3

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.

 

ByStitch_0-1715252088910.png

 

Could you please help us to resolve this issue.

Made4uo-Ribe
Shopify Partner
5930 1426 1756

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


ByStitch
Tourist
5 0 3

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

 

ByStitch_0-1715314555396.png


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
Shopify Partner
5930 1426 1756

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:

Made4uoRibe_0-1715338310423.png

 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com