> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/trade-and-b2b/overview-of-trade-dashboard/how-to-install-the-dashboard-and-quote-builder.md).

# How to install the dashboard and quote builder

Add the single Trade Dashboard block to Shopify customer accounts. One block carries both the dashboard and the quote builder, configured in Trade Settings.

The Trade Dashboard is **one app block** that carries the whole trade experience: the product dashboard and the Quotes view share the block through a tab switcher. Installing it is a single step in the theme editor; everything else is configured in the Roadmap app.

Use quote terminology if you want to present it as a quote builder.

{% hint style="info" %}
Earlier versions used two separate blocks, one for the dashboard and one for the quote builder. They're now combined, so there is only one block to add. If a layout from an older install still carries two blocks, the combined **Trade Dashboard** block replaces both.
{% endhint %}

### Add the block to customer accounts

{% stepper %}
{% step %}

#### Open the theme editor

In Shopify, go to **Online Store → Themes → Customize**.
{% endstep %}

{% step %}

#### Open customer accounts

Switch to **Checkout and customer accounts**.

Then open your new customer accounts layout.
{% endstep %}

{% step %}

#### Add the Trade Dashboard block

Add the **B2B Management** through **Header → Menu → Edit → Add menu item → Apps**.

The one block brings both tabs with it: the dashboard for browsing and building, and Quotes for reviewing and editing.

<div><figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2F6bGgO812bpF5ZyNh3a4P%2FScreenshot%202026-05-01%20at%205.13.37%E2%80%AFPM.png?alt=media&#x26;token=428e8452-2c9e-4f5a-9b91-d51847eaf26e" alt=""><figcaption></figcaption></figure> <figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2FAt0DSjBFsmBcjrElBY76%2FScreenshot%202026-09-07%20at%203.57.34%E2%80%AFPM.png?alt=media&amp;token=3eac886f-d3f2-4a9e-85e3-e4ac01bb3322" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Save your changes

Save the layout once the block is in the right place.
{% endstep %}
{% endstepper %}

### Configure dashboard settings

The block self-populates once it is added.

These settings no longer live in the Shopify theme editor.

Open the Roadmap app, then go to **Settings → Trade Settings → Trade Dashboard**. The tab's sections run top to bottom, each with its own guide:

* [Set the Trade Portal header, titles & tabs](/trade-and-b2b/overview-of-trade-dashboard/set-the-trade-portal-header-titles-and-tabs.md) — the page title and each tab's title and subtitle.
* [Customize how products display on the Trade Dashboard](/trade-and-b2b/overview-of-trade-dashboard/customize-how-products-display-on-the-trade-dashboard.md) — terminology, images, paging, pricing, the variant button, and subtitles.
* [Show pre-order and back-order info on Trade quotes](/trade-and-b2b/overview-of-trade-dashboard/show-pre-order-and-back-order-info-on-trade-quotes.md) — ETA metafields and badges.
* [Customize Trade Dashboard filters & sorting](/trade-and-b2b/overview-of-trade-dashboard/customize-trade-dashboard-filters-and-sorting.md) — the default sort and filter panel.
* [Configure Trade Dashboard access and quote builder](/trade-and-b2b/overview-of-trade-dashboard/configure-trade-dashboard-access-and-quote-builder.md) — quote fields, customer eligibility, and what **Confirm Order** does.

{% hint style="info" %}
Styling still comes from your Shopify customer account styling settings.
{% endhint %}

### How styling works

The Trade Dashboard inherits colours and fonts from your Shopify customer account styling settings in the B2B management tab's 'main' settings. That keeps the experience aligned with the rest of customer accounts.

<figure><img src="https://393112916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ8asLD4FVCFagK40xEr4%2Fuploads%2F2IjLdjnQhYL5a7Io2eGR%2FScreenshot%202026-09-07%20at%203.58.54%E2%80%AFPM.png?alt=media&amp;token=251df144-7939-44f7-8db9-d2e4e261f97b" alt=""><figcaption></figcaption></figure>

### Before you publish

Test the block with a real B2B customer account.

Check visibility, pricing, product access, and the wording customers see.

### Related guides

* [Overview of the Trade Dashboard](/trade-and-b2b/overview-of-trade-dashboard.md)
* [Overview of the quote builder](/trade-and-b2b/quote-builder-and-draft-orders/overview-of-the-quote-builder.md)
* [Set the Trade Portal header, titles & tabs](/trade-and-b2b/overview-of-trade-dashboard/set-the-trade-portal-header-titles-and-tabs.md)
* [Configure Trade Dashboard access and quote builder](/trade-and-b2b/overview-of-trade-dashboard/configure-trade-dashboard-access-and-quote-builder.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roadmap.so/trade-and-b2b/overview-of-trade-dashboard/how-to-install-the-dashboard-and-quote-builder.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.