How to get this colour pop up

Store Design
, , ,
1

I am looking for this colour pop up, when you click the more colour option it opens this carousel with the different colours. I know it is done with meta fields and coding, but I have no idea how. Anyone wants to point me in the right direction?

Screenshot_20260210_121108
Screenshot_20260210_1211081912×977 117 KB

4

Hey @ldmps ,

A bit unclear on what the request is here but yes primarily this would be done using code and shopify metafields. If you can post some more info regarding your theme or share the theme code around this pop-up, I would be able to better assist here.

5

Hi @ldmps

The More colours popup is usually created with custom coding using metafields JavaScript.

Typically, each colour is a separate product all linked together using a shared product metafield (for example, a colour group). When the More colours button is clicked a custom modal opens with a carousel showing all related colour products.

This kind of UI is usually built directly into the theme with custom Liquid, CSS, and JS.

Best regards,
Devcoder :laptop:

6

Hey man, thanks for replying.

I’m using the Prestige theme (version 10.11.1).

Here’s my current setup:

Metafields

  • custom.variation_products → Product list (contains sibling colour products)

  • custom.variation_value → Single line text (stores the colour name)

7

One way I find this happening is to just open a popup on click and populate the popup content with all the available colors for the product. This way you dont necessarily will need metafields. We can just loop over the variants of the product to show all colors.

Best