> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Element: Image Buttons

# ${color}[#314AF3](Introduction)
  
The **image button element** creates a clickable image box, perfect for showcasing your products or services.

![](https://storage.crisp.chat/users/helpdesk/website/330fd3fd38c7d800/eda919d1-72a0-4a5b-a9a6-96b3fb_10yokd3.png)

---

# ${color}[#314AF3](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.

---
  
# ${color}[#314AF3](Watch It In Action)
  
For this example, each hat costs €20, and each pair of pants cost €10
![](https://storage.crisp.chat/users/helpdesk/website/58c916ef56bb3800/ee413ce4-6d3e-455d-89c2-be4ca8_ijcq6i.gif)

---
  
# ${color}[#314AF3](How to Activate & Use This Feature)
  
1. First, click on the **"+ Add Element"** **button**

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/add-element-subsection_ia39wq.png)

2. Then, click on the **"Image Button" ** to add the element

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/add-element_1cjl6dm.png)

### Settings & Options
  
1. First, you can set a title for internal reference.
![](https://storage.crisp.chat/users/helpdesk/website/b492d6807adbb000/70bf7b88-7cd0-4d89-b550-b4755d_1v9opne.png)
2. For the **Input Box Style**, we recommend you to be curious and explore all the options available:
![](https://storage.crisp.chat/users/helpdesk/website/732ab91b30b76800/4779392d-9f84-4479-abef-159a2b_1ir8iec.png)
3. You can set a **name** and a **price **for the item
![](https://storage.crisp.chat/users/helpdesk/website/4575a7077d8f8c00/f84578e2-5c9f-4106-a308-45c91e_g8dq.png)
4. To add an **image**, click on the image icon and select one from the WordPress media library
![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316817951/original/9r98RjBUYZFP5oIAEmXDrNLv4w-fpni9xg.png?1699477403)
5. If you have **WooCommerce** integrated, you can link this item to a WooCommerce product.
![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316818074/original/vFe7DLH8t9xijvtA4aKcVnNGWSxaaRcx2A.png?1699477479)
6. You can add more items by clicking on the **"+ Item"** button.
![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316818157/original/xPMSqfdDDJhm3PFRlvUCxeQ1Cf7R-D8iOQ.png?1699477537)
7. For the **advanced options**: 

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image-button-options_10rnzko.png)

* **Image Aspect Ratio** - choose between "cover" and "contain" display modes for optimal image presentation.
* **Image Max Height **- customize the height settings (in pixels) for consistent layouts.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image-button_qj5tdg.png)

* **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.

---

# ${color}[#314AF3](Additional Information)
  
### Related Features
  
[Element: File Upload](https://help.stylishcostcalculator.com/en/article/element-file-upload-1fjq4it/)
[Element: Slider](https://help.stylishcostcalculator.com/en/article/element-slider-1pim5ug/)

#### All Elements & Features

Learn more about [All Elements](/en/article/elements-13-12gquna/) 
Learn more about [All Features](/en/article/features-3-xlgunu/)  

#### Need Support? 

Ask a [question or request support](https://stylishcostcalculator.com/support/)  

Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508157/original/Txm2CafyMfEybziVGXvw-BnfU2V-9TJUBg.png?1666381303)](https://stylishcostcalculator.com/features/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508158/original/DWBiVRBRBPATUwVN7APXzDACQgYCwYmXVQ.png?1666381303)](https://stylishcostcalculator.com/templates/)