Same Interaction Works on all Elements EXCEPT one...?

Hello Webflow Forumers,

I’ve been working on a shop page for my company’s flagship product. It comes in 4 various models, each with an option to add wifi capabilities (so 8 different product SKUs in total). I have been using the Shopify Buy Button custom code in absolutely positioned divs at 1% opacity to auto add the product to a customers cart when they click on “wifi” or “no wifi.”

In short, when a user clicks on a model type I want them to only be able to then see the relevant Buy Button code wrapper. I’ve done this through a series of interaction trigger based animations and they all work on the published/live site EXCEPT on NEMA 10-30 (1030 Outlet Content animation). The kicker is that each animation is exactly the same other than what elements or groups of elements are being targeted. The animation itself is working in preview, but as soon as it gets published it breaks and on inspecting the element a div that is there in preview, is non existent in the browser.

I have been pulling my hair out on this. Interaction works for all models except 10-30 models and I just cant seem to figure out why.

Here is my public share link: https://preview.webflow.com/preview/getneocharge?utm_medium=preview_link&utm_source=designer&utm_content=getneocharge&preview=ca7ae564e0933e050587221d42988af8&pageId=60750ea866545f3c2e0db803&mode=preview

Here is the Live Site:

It may be because you didn’t close the script for the 10-30 models. I added </script> at the end. Try that.

GOD BLESS! Thank you so much you’re a life saver.

1 Like