Element: Image Buttons

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