> ## 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).

# Floating Itemized List (Detailed List View): A Complete Guide

# ${color}[#314AF3](Introduction)

Add an **itemized list (detailed list)** anywhere on your page to give your users a visual representation of their quote.

![](https://storage.crisp.chat/users/helpdesk/website/8165578414d67000/054853cd-4020-4f7d-8bc8-4f72f9_t8ornr.png)

---

# ${color}[#314AF3](Benefits, Features & Use Cases)

The instant total summary allows your users to keep their attention on completing the calculator form without having to travel to any other screen.

### Benefits

* **Floating List** - Add the detailed list to a sticky sidebar to make it float as the user scrolls down the page.
* **Increase Conversions** - As your visitors are not distracted by other screens, they can focus on completing the form.
* **Enhanced Transparency** - Allows customers to see a breakdown of costs directly on the page, increasing trust and understanding.

### Use cases

* **Service Quotations:** Ideal for service-based businesses to display detailed quotes, enhancing clarity for both service providers and clients.
* **E-Commerce:** Retailers can leverage this for showing detailed cart summaries, improving checkout transparency.
* **Consultations and Bookings:** Professionals in consulting or booking services can use it to detail service costs, taxes, and applicable discounts in an easily accessible format.

---

![](https://storage.crisp.chat/users/helpdesk/website/48ef223a236eac00/5ce813c1-4d74-45cc-99fa-ffaa58_10w3sgx.png)

---

# ${color}[#314AF3](How to Activate & Use This Feature)

### Settings

Add this shortcode anywhere on your page **[scc_calculator-detail idvalue='1']**  

|| **Note:** Change the 1 for the ID number of your calculator.

### Tutorial Video
${youtube}[Video Tutorial](nZWaT6kUMqA)

---

# ${color}[#314AF3](Frequently Asked Question)

**Q: How can I add an itemized list to my page?**
* You can add an itemized list by using the shortcode **[scc_calculator-detail idvalue='1']**. Make sure to replace '1' with the ID number of your specific calculator.

**Q: What are the benefits of using an itemized list for quotes?**
* The itemized list provides a floating summary that follows the user as they scroll, increasing conversions by keeping users focused, and enhancing transparency by showing a detailed cost breakdown directly on the page.

**Q: Can I customize the layout of the itemized list?**
* Currently, you cannot customize the layout of the itemized list directly. However, you can use CSS to style it according to your preferences.

---

# ${color}[#314AF3](Additional Information)

### Related Features

[• Multiple Totals](/en/article/multiple-totals-does-the-plugin-support-multiple-totals-or-subtotals-1dvpwkk/)

### Limitations

|| At this moment, you cannot customize the layout of this itemized list. However, you can use CSS to style it any way you want.

#### All Elements & Features
  
Learn more about [All Elements](/en/category/elements-hnffz2/) 
Learn more about [All Features](/en/category/features-22x2mc/)  
 
#### 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/)