Color Variant is not showing up on product, not sure why!

[Joseph_Moreno10]

I am having an issue with any variant product color that isn’t blue, white, and black! 
Please assist.

[Joseph_Moreno10]

Here is the link to the page: https://lyrizone.com/collections/apparel/products/lyrizone-tie-dye-hoodie

As you can see, there is a red production option and selection, but the color picker is plain white. This can confuse the customer into not even knowing it’s available.

[DaisyVo]

Hi @Joseph_Moreno10 

I read through your question and fully understand the issue you’re facing with color variants not showing up properly on your Shopify product page. It sounds like only blue, white, and black are displaying, while other colors aren’t appearing as expected. This usually happens due to a few common reasons:

Possible Causes & Solutions

1. Check Variant Availability

   • Go to your Shopify Admin → Products → Select the product → Variants tab.
   • Ensure that all color variants are added correctly and not set to ‘Draft’ or ‘Archived’. If they are, change them to Active.

2. Inventory Settings

   • If your inventory is set to track stock, make sure the missing colors aren’t set to "0" in stock or "Out of Stock."
   • Shopify hides variants that are out of stock if “Continue selling when out of stock” is not enabled. You can check this under each variant’s settings.

3. Theme Issues (Code or Settings)

   • Some Shopify themes have built-in settings to limit how variants display.
   • Go to Online Store → Themes → Customize → Look for “Variant Picker” settings and ensure all colors should be visible.
   • If your theme requires color swatches instead of text dropdowns, check if the color names match the swatch files in your assets folder.

4. Incorrect Option Name

   • Shopify treats “Color” as case-sensitive. Go to Products → Variants and make sure every option is listed under the exact same spelling of "Color" (not “Colors” or “colour”).

5. Code Issues (For Custom Themes or Modified Themes)
   If your theme was customized, the issue might be in the variant selector code. Try switching to a default Shopify theme like Dawn to see if the issue persists.

   If you want to check the code, go to Themes → Actions → Edit Code, then look in:

   • product-form.liquid or main-product.liquid (for how variants load)
   • theme.js or global.js (if JavaScript handles the variant selection)

   If the issue is in the JavaScript, adding this code to theme.js might help:

   document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.variant-input').forEach(function(input) { input.addEventListener('change', function() { document.querySelector('.product-title').innerText = this.dataset.variantName; }); }); });
   
   If color swatches are missing, make sure your color swatch images are uploaded in assets/ and named properly (red.png, green.png, etc.).

Final Check

• Try clearing your browser cache or checking on an incognito window to rule out caching issues.
• If you’re using an app for custom variants, disable it temporarily and check if that’s the cause.

If none of these work, let me know what theme you’re using, and I can guide you more specifically.

If you need any other assistance, feel free to ask, and I will try my best to support you.
Best regards,
Daisy.