Product Swatches Variant in a Pop Up Window

Store Design
, ,
1

Hi

I have around 60 colour variants and would like to display a link that says ’ view all out colours’ when you click on it, it will bring a pop up box up with all the colour vaiants. When you choose the colour it acts as it would normally.

I do not want a full pop up (opens in new window) but a popup box that opens.

Please can anyone help?

2

Hi

Thansk for this… where do I add this code?

3

This shows the options for red and blue. I want it to pull the relevant product colour variants through

4

Hi @ttonybb ,

Consider exploring the Easify Product Options app for crafting your color options. This app facilitates a setup where the initial color options group is visible, while the remaining color options can be selected through a popup :hugs: .

Here’s an illustrative example:

Storefront:

EasifyApps_4-1702615523669.png
EasifyApps_4-1702615523669.png2332×1334 235 KB

EasifyApps_5-1702615542765.png
EasifyApps_5-1702615542765.png2332×1452 175 KB

App Settings:

  • Install the app and create a new option set.
  • Add the first visible color option using Image or Color Swatches option types.

EasifyApps_0-1702613946679.png
EasifyApps_0-1702613946679.png2880×1512 362 KB

  • Add another color option to be selected within a popup, utilizing the Product list option type.

EasifyApps_2-1702615416496.png
EasifyApps_2-1702615416496.png2880×1334 310 KB

EasifyApps_1-1702615401776.png
EasifyApps_1-1702615401776.png2880×1334 347 KB

  • Once all options are configured, designate your main relevant product to integrate the color options.

EasifyApps_3-1702615455891.png
EasifyApps_3-1702615455891.png2880×1074 163 KB

It’s worth noting that if you require stock management for all color options, there are specific steps to follow. If this applies to your case, please let me know, and I can provide a detailed setup.

5

Hi Thanks for that, but i would prefer not to pay for an app… this must be possible without an app. It is just a popup that pulls through product variants

6

An alternative approach involves hiring developers for customizing your site, albeit it can be more costly and time-consuming than utilizing an app.

So if you change your mind, hope you can give Easify Product Options app a try! :grinning_face_with_smiling_eyes:

7

I am sure there is another alternative, such as the kind contributors on here helping

8

Did you find a solution?