Please help! Online shop choice buttons question

#1

OK, I hope I can explain this right. I will post a link at the end of the post which means “a website is worth a thousand words”.

I am putting an online shop together and I want my potential customers to be able to choose between options and then see the results. My website example will be a coffee cup but I want to do this with multiple objects.

Like, in the coffee cup example posted at the end of this message, you choose options, colors and so on, and you then see the results.

I want to open a shop with many customizable objects and use this method. So if you say you want the text to read “My best friend”, and you want the cup colors to be white and green, and you want the person to have a certain hairstyle, when you choose these options, the “results” are visible. In the link, you have a “preview” option to see what your choices look like after you choose them, and this is exactly what I am looking for. I have absolutely no idea how this is done. Is it a program you buy, do I need to write the code on the backend myself, is it a plug in? As you can see, I am clueless on this.

Am I describing this correctly?

Example here: https://gossby.com/personalized-dog-mugs-girl-and-dogs-life-is-better-with-dogs?variant=915&sref=46

#2

Hi @studiofletch!

I tried using the inspect tool on the page and it looks like it is just html,css,javascript.

So maybe you can inspect the page using your browser’s developers tools.

Good luck!

#3

They seem to be using a combination of image and svg to achieve this result. Here’s the link to the image they are using - https://gossby.com/resource/template/core/image/catalog/campaign/type/preview/mug/insulatedCoffee/back.png.

It’s probably a custom made solution and isn’t easy/cheap to make.

#4

That’s done with client-side JavaScript. Depending on what the user selects, they exchange the preview image (presumably the src attribute of the <img> tag). The possible options are form inputs - the quotes options for example are radio buttons that are made invisible with CSS, and their labels carry the image with the desired quote.

If you want to learn how to do this, I’d suggest the following:

Build a simple page with a form and some radio buttons, and an <img> tag for the preview image. Then use an onchange event on the radio buttons and write a script that sets the src attribute of the image according to the currently selected radio button.

1 Like