URL issue - in url it's coming variant id instead of handle

Technical Q&A

Topic summary

A developer is experiencing a URL problem with a Shopify metaobject implementation for color swatches. They’ve created a metaobject with three fields: Color Name, Color Hex Code, and Product (for linking). While the metaobject setup and namespace/key connections appear correct, the product URL is displaying the variant ID instead of the product handle.

The user has shared their Liquid template code for review, which appears to be reversed/encoded in the post. The code shows they’re attempting to:

  • Loop through color swatch metafield values
  • Extract color names and hex codes
  • Generate clickable color swatches with product links

The core issue seems to be in how the product reference from the metaobject is being converted to a URL—it’s outputting a variant ID rather than the expected product handle format (/products/{handle}).

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I have created a metaobject for the color swatch, which contains the following fields: 1. Color Name, 2. Color Hex Code, 3. Product (for linking to the swatch). I have populated all the details, and everything seems to be set up correctly. I have successfully connected the namespace and key of the metafield. However, I’m facing an issue with the product URL: instead of showing the product handle, it displays the product variant ID. How can I fix this?

Here’s the code of mine for your reference it might be issue in my code please check once.

{% if product.metafields.custom.color_swatches != blank %}

{% for color_swatch in product.metafields.custom.color_swatches.value %} {% assign color_name = color_swatch.color_name | remove: '["' | remove: '"]' | strip %} {% assign color_hex = color_swatch.color_hex_code | remove: '["' | remove: '"]' | strip %} {% assign product_link_parts = color_swatch.product | split: '/' %} {% assign product_handle = product_link_parts.last %} {{ color_name }} {% endfor %}
{% endif %}