Build your own product - on a page

Hello, my aim is to design a ‘build your own’ scrolling section on a page for the users to build and visualise tables. The page will include a section with a few different table tops on it. So when a specific table top is clicked on, the same section will display table bases/leg variations on the same page as it would scroll to the left/right to display the bases. Any ideas on how that can be achieved? Thank you!

Hi Sakshi,

If you’re just trying to capture the results as a form ( customer’s name is W and they want table top X with base Y and legs Z ) then the build is pretty much just a standard form with 3 custom radio button sets.

I’d dig through “custom radio buttons” and find some implementations where it’s either just shown as a large button, or preferably an image, that you can click and select, with maybe a border to indicate selection.

You could use the CMS for the data storage if you want, for manageability. The bigger challenge will be getting the right scrolling behavior you want, and making it work smoothly on mobile devices in a tight mobile portrait view.

Hello Michael, thanks for your response! To explain my situation better (see image). The yellow box is the section. So when the user clicks on ‘Square’, I want the yellow box to show bases (similar illustrations) that are compatible with the ‘Square’ top. So essentially, the yellow box would remain static on the screen, but just show different illustrations with a scroll transition. Do you think I would be able to do that with radio buttons or forms?

Yes, but you’ve changed up the description slightly, so that now you have a multi-step form.

You pick option 1 and then option 1’s go away, presenting option 2’s, etc.

I use custom code to handle the multi-step form transitions, validations, and business logic.

If you need help with the programming, drop me a message and I’ll send you my rates.