Xtra Theme - Brown Colour Shows as Red on Product Page Despite Correct Metafield Setting

Technical Q&A

Topic summary

A user is experiencing a color display issue with the Xtra Theme on Shopify. They’ve configured a “Brown” color swatch using metafields with the hex code #A52A2A.

The Problem:

  • The metafield correctly stores Brown:#A52A2A
  • The swatch displays correctly in the Shopify backend
  • On the live product page, the brown swatch appears red instead

Troubleshooting Done:

  • Verified metafield value is accurate
  • Confirmed backend rendering shows the correct color
  • Provided screenshots showing the discrepancy between admin settings and frontend display

Current Status:
Another user requested the product page URL to investigate further. The original poster shared the link (whiteburaq.com/products/blain-mocha-suede-bomber-jacket) and confirmed the issue persists on the live site. The discussion remains open with no solution identified yet.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m using the Xtra Theme on my Shopify store and have added a colour swatch option using metafields. I set the colour “Brown” with the correct hex code (#A52A2A) in the product metafield, and in the swatch settings.

However, when I select Brown on the product page, it displays as red instead of brown. The swatch metafield still holds the correct hex code, so I’m not sure what’s going wrong.

Here’s what I’ve checked:

  • Metafield value is correctly set to Brown:#A52A2A

  • Swatch renders the right colour in the backend

  • But on the live product page, it appears red

Has anyone experienced this with the Xtra Theme or know how to fix this issue?

In meta field :

edit page.PNG
edit page.PNG373×117 4.07 KB

product view.PNG
product view.PNG519×218 7.9 KB

Product page view

2

Share a link to the page in question – hard to tell otherwise.

3

https://whiteburaq.com/products/blain-mocha-suede-bomber-jacket
hy there thank you for your response see their in product page link why the brown color swatch showing red color in circle >
even i choose the right color code in meta field