Trying to make a color picker menu that can be filtered

Ask the community
, ,
1

I’d like to allow my visitors to pick the colors of various shirt designs. Currently I have a CMS database with the available heat transfer vinyl colors and varieties.

I’ve managed to use the repeater to create a swatch gallery that can be filtered by a drop down menu. The trouble (for me) comes when I need to have an image change based on the menu swatch that is clicked. (I will eventually be using an image mask to achieve the layered artwork, but can’t get past this hurdle.)

I feel like there is a sensible solution that is just outside my fluency at the moment.

Test Site

Screenshot 2025-04-21 at 09-01-57 Home My Site
Screenshot 2025-04-21 at 09-01-57 Home My Site1335×804 22.9 KB

2

Hi, @Samantha_Julien !!

So does that mean each item in the color palette is actually a repeater item? :thinking:

3

I feel this is similar to this velo example: Adding a Product Configurator to a Wix Stores Site

Something to note is that there is a limit to variants so bear that in mind considering the number of swatches you have on display.

1 Like
4

Yes. At the moment they’re images but if I need to use the HEX equivalent that would be fine.

5

This is what the end result will hopefully look like. (Link)

The image shows a webpage interface for customizable t-shirts, featuring a stylized illustration of a cat with the phrase "WERE ALL MAD HERE" on a black background, and color selection options for the shirt's color, base, top, and teeth. (Captioned by AI)
The image shows a webpage interface for customizable t-shirts, featuring a stylized illustration of a cat with the phrase "WERE ALL MAD HERE" on a black background, and color selection options for the shirt's color, base, top, and teeth. (Captioned by AI)1088×911 116 KB

I want to use the swatches as opposed to just making the layers already masked because I have several different shirt designs/artwork with varying layers. The common factor is that they all have the same material and color options.

6

That is a lot closer to what I am thinking of. However (you’ll see I mention this in my followup post to myself) I was hoping just to use the swatch images with a mask so I could use them across multiple artwork options.

7

I think it might be easier to use a dropdown rather than using a only tags like I did here: https://robertor0.wixstudio.com/my-site-53/dropdown

You sort of having it working here I see in the top section.

8

I am trying to take it one step (level?) deeper. The first drop down I’d like to filter by the material type (so in my example Easyweed=flat, Electric = a metallic type finish, and Flocked = a fuzzy kind of velvet.) Then from there I’d like the user to choose the specific color.

I might end up stuck using two drop down menus or drop down and tags. Which is unfortunate because it would make so much more sense to just click the color you want after you’ve chosen the material/finish.

Naturally I decided to go big with no coding experience save for html myspace back in the day. :laughing:

9

Your requested feature, should be very easy to be generated!

10 min and it is done if you know how to do…

Well what do we need?

  1. A HTML-Component
  2. Your wished Wix-Page, where you want to paste it
  3. Add the HTML-Comp. to your page.
  4. Add the following code into your HTML-Comp.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PostMessage Color Picker</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
        text-align: center;
      }
      .swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 20px;
      }
      .swatch {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #333;
        cursor: pointer;
        transition: transform 0.2s;
      }
      .swatch:hover {
        transform: scale(1.1);
      }
      #selectedColor {
        margin-top: 1rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Color Picker</h2>
    <div class="swatches" id="swatchContainer"></div>
    <div id="selectedColor">Selected Color: None</div>
    <script>
      const swatchContainer = document.getElementById("swatchContainer");
      const selectedColorDisplay = document.getElementById("selectedColor");
      window.addEventListener("message", (event) => {
        try {
          const { type, colors } = event.data;
          if (type === "loadColors" && Array.isArray(colors)) {
            swatchContainer.innerHTML = ""; // Clear old swatches
            colors.forEach(color => {
              const swatch = document.createElement("div");
              swatch.className = "swatch";
              swatch.style.backgroundColor = color;
              swatch.dataset.color = color;
              swatch.addEventListener("click", () => {
                const selectedColor = swatch.dataset.color;
                selectedColorDisplay.textContent = `Selected Color: ${selectedColor}`;
                window.parent.postMessage({
                  type: "colorSelected",
                  color: selectedColor
                }, "*");
              }); swatchContainer.appendChild(swatch);
            });
          }
        } catch (err) {console.warn("Invalid message data:", err);}
      });
    </script>
  </body>
</html>
  1. Save the HTML-Comp. settings.
  2. Navigate to the page you want to implement that component.
  3. Paste the following code onto your wix-page…
$w.onReady(function () {
  const htmlComponent = $w("#html1");
  const colorData = {
    type: "loadColors",
    colors: ["red", "#00ff00", "navy", "gold", "purple"]
  };

  htmlComponent.postMessage(colorData);

  // Listen for color selection from the iframe
  htmlComponent.onMessage((event) => {
    if (event.data.type === "colorSelected") {
      const selectedColor = event.data.color;
      console.log("Selected color:", selectedColor);

      // Example: Update text element
      $w("#text1").text = `Selected color: ${selectedColor}`;
      $w("#box2").style.backgroundColor = selectedColor;
    }
  });
});
  1. Add a text-element (text1)
  2. Add a box/container-element (box2)
    Go to PREVIEW-MODE or PUBLISH-WEBSITE and see what you got.

HOLY-MOLY! :upside_down_face:

2025-04-24 22_50_26-Window
2025-04-24 22_50_26-Window513×651 14 KB

I am sure you are capable to reconstruct my provided setup!
And even works with data communication ! WOW!