Changing dropdown for each variant

Site URL: https://www.pjmckayauthor.com/shop/p/the-telling-time

I just started using Squarespace, and my client wants me to add another variant to an existing product.

Right now, when "paperback" is selected, the "quantity" form field remains and the purchase button triggers the cart and stays in Squarespace.

When "ebook" is selected, this results in the quantity field disappearing, replaced by another dropdown with a list of Amazon regions, and when one is selected the purchase button links to the appropriate Amazon site.

I need to add an "audiobook" variant, with essentially the same setup as the "ebook" variant - another dropdown for various ebook platforms, and when one is selected, the purchase button links to the appropriate site.

However, I cannot figure out how to either create that variant setup OR to duplicate the "ebook" variant and change the links.

Any assistance would be hugely appreciated!

The ebook behaviour is not native to SS. That effect is being created by custom code in the site.

So if you're familiar with Javascript you could potentially duplicate and alter the existing code to extend the effect.

I just managed to find a script in the header code, after inspecting the site in Chrome - where would I find the script having been put into the backend?

The first place I'd look is in Store Settings > Advanced > Page Header Code Injection for the store page. Then  Settings > Advanced > Code Injection > HEADER and/or FOOTER.

Found it, thanks! Now to solve the problem that I don't know Javascript... (I'm barely capable of front-end coding.)