![product builder product builder](https://www.sobha.com/manufacturing-concrete-products/wp-content/uploads/2020/09/Concrete-Masonry-Blocks.jpg)
Please be sure to drop us a line or share on facebook or twitter, instagram. We’ll help where we can but can’t promise the world. Take these examples as inspiration to try it yourself and see if you learn anything along the way.
Product builder install#
Evey WordPress install is unique for your needs and thus near impossible for us to help implement these examples into everyone’s site.
Product builder update#
Yeh we know we know, we’ll get to it as soon as possible and update the CSS example code above when we do.ĭue to the somewhat custom nature of this tutorial, we’re only able to offer very basic support to help you get these examples working. These examples are currently not mobile friendly. WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further. Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. Thanks to the guys at for letting us use their awesome product images. For this basic example, we’ve stripped back a lot fo the custom styles and CSS, that’s relevant to our website, and made it fairly generic, so you should be able to theoretically take the below CSS, jQuery and instructions and create your own.
Product builder how to#
In the above video, we show you how to create the basic product configurator seen below in the live demo. Just WordPress logins, Gravity Forms and Image Chocies. We wanted to be able to recreate this design only using standard Gravity Forms with Image Choices, no theme updates or server logins required. This helps us understand what needs to be put together, and how each element could be generated within the constraints of just using Gravity Forms and Image Choices add-on. He’res the design mockup we put together before jumping into custom CSS and jQuery. This is the first step in our prototypes to see how we could use Image Choices to achieve this quickly and easily for existing users of our Image Choices add-on. We’ve been toying with the idea of using Gravity Forms to power a product configurator for simple product orders, for a while now. You don’t have to be an expert, but the more confident you are with these, the better results you’ll get. The below guides and examples are intended for users with a little bit of CSS and jQuery knowledge.
![product builder product builder](https://blogs.autodesk.com/autocad/wp-content/uploads/sites/35/2016/02/autodesk-cad-manager-center_top-features-top-products_05.png)
In this tutorial showcase we show you how to build a product configurator with Gravity Forms and Image Choices Let’s look at how far you can take JetSloth’s Image Choices addon for Gravity Forms, with a little design skill, and some heavy custom CSS, the results speak for themselves.
![product builder product builder](https://volunteerbuildingproducts.com/wp-content/uploads/2020/12/Volunteer-building-products-staff-web-1536x720.jpg)
We wanted to design and prepare another great example of these two plugins, but this time push it a little further. With previous demos, we’ve tried to show you all how great Gravity Forms is with our Image Choices add-on. active is then used to reveal the active step.Here at JetSloth, we’re always trying to push the boundaries of design and code.
![product builder product builder](https://cnsourcelink.com/wp-content/uploads/2018/06/building-materials-from-China-importing-construction-materials-from-China-1200x565.jpg)
Just one note about the style of the main elements of the builder: the div.cd-builder-steps is used to wrap the different builder steps its list items are in absolute position, have a height and width of 100%, are one on top of the others and are hidden by default the class.
Product builder download#
The CSS used for this resource is quite simple, you can download the demo file to take a look at the entire code. The other steps depend on the model the user selects and are loaded using Ajax (more in the Events handling section). Īs for the builder steps, only the first one can be found in the index.html file. The HTML structure is composed of three main elements: a header.main-header for the builder top navigation, a div.cd-builder-steps for the builder steps and a footer.cd-builder-footer for the builder bottom navigation and the overview of the selected product. Therefore we decided to create an easy-to-customize template that can help you realize your own product builder! At the end of this process the user is generally given an action to perform: save the build, share it or buy the product directly.Ĭreating such a web component from scratch is no easy work. Product builders are useful shopping tools, that allow potential customers to “build” an ideal version of a product by combining different options.