Introduction

The image button element creates a clickable image box, perfect for showcasing your products or services.




Benefits, Features & Use Cases


 Improve user experience by letting your users see what they will purchase before selecting.


1. Product Gallery - add clarity and speed up the transaction by allowing customers to visualize the products they're interested in

2. Showcase your products with the price and/or quantity selector

3. Product Configurator - standardizes the buying process, allowing customers to edit product variables (such as color or size) while remaining fun and easy to use




Watch It In-Action


For this example, each hat costs €20, and each pair of pants cost €10



How to Activate & Use This Feature


First, click on the "+ Add Element" button



Then, click on the "Image Button" to add the element



Settings & Options


First, you can set a title for internal reference.





For the Input Box Style, we recommend you to be curious and explore all the options available:




You can set a name and a price for the item



To add an image, click on the image icon and select one from the WordPress media library




If you have WooCommerce integrated, you can link this item to a WooCommerce product.




You can add more items by clicking on the "+ Item" button.




For the advanced options: 




 Add Border to Image - surround the images with a borderline

Enable Quantity Selector to Images - have the quantity selected by the quantity selector icon below the image instead of a subsection slider


• Required - make this element mandatory before continuing to an email quote, payment or view a detailed list

Enable Price Hint - temporarily, a price bubble will appear when the item is selected, and the cost is added to the calculator total





Additional Information



Related Features


Element: File Upload https://designful.freshdesk.com/support/solutions/articles/48001166819-element-file-upload


Element: Slider https://designful.freshdesk.com/support/solutions/articles/48001207026-element-slider