Color change product -> Stuck in design a page!

[fabiani]

Hi everyone

I’m trying to build a lightweight colour-swatch picker that links together separate products (we don’t want to use variants).

(Ex-Boyfriend® Valentín Long – HAND OVER)

I added two product-level metafields:

Namespace / Key	Type	Example value
custom.color_swatch	Single-line text (hex)	#FFFFFF
custom.related_product_group	Product (List)	White Guayabera Shirt, Light Blue Guayabera Shirt

Both metafields are set to Storefront access: Visible.

Snippet:

snippets/color-siblings.liquid

{% comment %} product is in scope when using {% render %} {% endcomment %}
{% assign product_siblings = product.metafields.custom.related_product_group.value %}

{% if product_siblings[1] %}
  <div class="sibling-swatches-container">
    <p class="sibling-swatches-title">Color:</p>
    <div class="sibling-swatches">
      {% for sibling in product_siblings %}
        {% assign swatch_color = sibling.metafields.custom.color_swatch.value %}

        {% if swatch_color %}
          <a
            href="{{ sibling.url }}"
            class="sibling-swatch {% if sibling.id == product.id %}current{% endif %}"
            aria-label="View {{ sibling.title }}"
          >
            <span
              class="swatch-color-indicator"
              style="background-color: {{ swatch_color }};"
            ></span>
          </a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endif %}

In the product template I simply add a Custom Liquid block with:

{% render 'color-siblings' %}

The problem

Nothing at all is rendered on the storefront no markup, no errors in the console, and no Liquid errors in the theme editor. The metafields themselves are definitely populated (I can output {{ product.metafields.custom.color_swatch }} elsewhere).

What I’m trying to find out

• Is my approach to accessing a List → Product metafield inside a snippet correct?
• Does the .value accessor work for product lists in snippets rendered in the editor?
• Could this be a scope issue (e.g., need to preload the referenced products with all_products or similar)?
• Any other pitfalls I’m missing that would cause the loop simply not to run?

Extras

• Theme: CREATIVE
• Screenshots of metafield setup and template placement attached.

I’d really appreciate any pointers or if someone has a cleaner pattern for sibling-product colour swatches, I’m open to alternatives. Thanks a lot!

---

TL;DR: Custom snippet reading a product-list metafield isn’t outputting anything on the product page; need help figuring out why.

[Adeola32]

Hello

Use a custom swatch component that displays available colors as clickable swatches on the product page You can store the linked product IDs or handles in a metafield on each product, then render the swatches dynamically with Liquid or a custom app block.

For styling, keep it lightweight using inline SVGs or lazy-loaded images for the color thumbnails
This method keeps each product as an independent item (which helps with inventory tracking and SEO), but still gives the user a seamless “variant like” browsing experience.

Let me know if you want help writing the Liquid code or planning the structure happy to help

[fabiani]

Hey! Thanks so much for the answer can you spot me a tutorial to do the custom swatch component / liquid?

I’m like desperate to get this thing done!
Thanks so much again!

Fabiani

[Adeola32]

Here is the first step to setup your custom swatch component

Step 1: Create Sibling Metafields
Define two metafields in Shopify Admin under Settings → Custom Data → Products:

Sibling products: type = Product reference list (stores handles or IDs of related products)

Sibling color: type = Single line text or color picker (stores the label or swatch color)

Assign these metafields to each product, linking it to its color siblings

[namphan]

Hi @fabiani,

You can try to change the code:

{% if product_siblings[1] %}

=>

{% if product_siblings != blank %}

If it’s still not working, can I send you a collaborator invite? I will debug it and let you know soon

[Easify-Jennifer]

Hi @fabiani
If you’re open to using an app, I’d recommend checking out Easify Product Options.
It lets you create custom color swatches that link to other products — without needing metafields or any code.
You can manually set each swatch’s color and link, making it super easy to build a smooth “color switcher” between separate products. Here’s a small demo I created for you:

• This is the demo, when you click into a color, it will redirect you to its own URL
  

  

• This is the app setting, you need to create 3 products separately in Shopify, then use Easify Product Options to attach URL like this:
  

  

• Then apply this option set to all 3 products
  

  

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime!