> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/quick-order/full-setup-guide.md).

# Full Setup Guide

This operational guide walks you through fully setting up and optimizing the Quick Order experience for your store. It assumes you have already installed the app and completed the basic Quick Start steps.

**Main Setup Flow:**

1. Enable app embed in your Shopify theme
2. Build and publish Quick Order pages (The guided 3-Step Setup Bar)
3. Set up a Universal Page (Single master link for all buyers)
4. Add Quick Order pages to your storefront navigation

***

## 1. Enable app embed in your theme

Before Quick Order components can render on your website, the app embed must be enabled in your Shopify theme.

Check your app embed status:

1. In Shopify Admin, open **BSS B2B Quotes**.
2. On the dashboard, review the embedded app status banner.
3. If you see a notification that the app is not enabled, click **Enable app**.
4. The Shopify Theme Editor opens directly to the app embed panel.
5. Turn the app embed toggle **ON**.
6. Click **Save** in the Theme Editor, then return to the app and confirm the notice is cleared.

This step ensures your storefront can display bulk order forms, pricing breaks, and variant tables.

***

## 2. Build and publish Quick Order pages

The page builder uses a guided **3-Step Setup Bar** to ensure every page is properly configured before going live:

```mermaid
flowchart LR
    TMP["Choose a Template\n(Scratch or Wholesale)"] -->|Continue| S1["Step 1\nChoose customer type"]
    S1 -->|Next| S2["Step 2\nSet up Quick Order visibility"]
    S2 -->|Next| S3["Step 3\nCustomize Quick Order page\n(Customizer Workspace)"]
    S3 -->|Save| PUB["Publish Window\nPage title & Page URL handle"]
```

### 2.1. Step 1: Choose Customer Type & Name

From **Quick Order > Pages**:

1. Click **Create new page**.
2. In the **"Choose a template"** window, choose a starting point:
   * **Start from scratch**: Build your custom layout from the ground up (you can save it as a template later if you want to reuse it).
   * **B2B - Wholesale**: A pre-configured layout optimized for high-volume corporate buyers, featuring SKU displays, stock levels, and instant CSV imports.
   * **My templates**: Reusable custom layouts previously saved for your store.
3. Click **Continue** to start Step 1:
   * **Customer Type ("Who are you creating this Quick Order page for?")**:
     * **Default Customers**: Best for retail buyers, guest visitors, or tagged wholesale accounts using standard Shopify catalog pricing.
     * **Company Customers**: Best for wholesale corporate clients managed through B2B Catalogs. In Step 2, you can load catalogs assigned to a **B2B Market** (available across all Shopify plans) or assign specific **Company Locations** (requires Shopify Plus). Requires an active **Enterprise Plan** subscription in the app.
   * **General Information (`Name`)**: Enter an internal administrative name for your team (e.g., *Wholesale Tier 1 Catalog*). This field is required; if left blank, clicking **Next** highlights the field and displays `"Name is required"` before proceeding.
4. Click **Next** to proceed to Step 2.

***

### 2.2. Step 2: Set Up Visibility, Product Scope & Ordering

Control customer accessibility and catalog item scoping in a single, unified view:

#### Customer Access & Exclusions ("Who can see this page")

* **Who Sees It**: Select *All customers*, *Logged-in customers*, or restrict access to *Specific customers* or *Customer tags*.
* **Customer Exclusions (Default Customers Only)**: Block specific accounts or tags from accessing the page. (Hidden for Company Customers, which are governed by Shopify B2B location assignments).
* *Tag Display*: Tag selectors display up to 10 tags inline with a `+N more` expand/collapse link.

#### Product Scope & Exclusions ("Which products are displayed")

* **What Products Appear**: Select *All products*, *Specific products*, *Product collections*, *Product tags*, or **B2B Catalogs** (via *B2B Market* on all plans, or *Company Location* on Shopify Plus).
* **Product Exclusions (Default Customers Only)**: Filter out restricted items or clearance categories so they do not appear on the bulk order table. Summarized in a clean 2-item inline card with a `+N more` tooltip.

#### Sorting Rules & Product Order Preview

* **Sort Criteria**: Choose default table ordering (*Title A–Z*, *Title Z-A*, *Price: Low to High*, *Price: High to Low*, *Tag A–Z*, *Tag Z-A*, *Collection order*).
* **Collection Order Tip**: Selecting "Collection order" preserves the manual sort order of your Shopify collection **only when a collection is selected**. Adding two or more collections or tags automatically defaults to *Title A–Z* so buyers can easily browse products.
* **Live Product Order Preview**: Displays a 5-item-per-page preview table showing product thumbnails, titles, lowest prices, and first tags so you can verify your catalog selection.
* **Sync Products**: The app caches catalog queries for instant storefront loading. When updating tags or collections in Shopify Admin, click **Sync products** to refresh your catalog cache immediately.

Click **Next** to advance to Step 3.

***

### 2.3. Step 3: Customize Storefront Design (The Customizer Workspace)

Step 3 opens your interactive **Storefront Customizer**:

* **Customizer Navigation (Left)**: Collapsible sidebar navigating the 5 styling categories.
* **Settings & Controls (Center)**: Configure headers, search filters, product columns, and color styling.
* **Live Storefront Preview (Right)**: Real-time interactive preview showing how your table looks and behaves across screen sizes, with a **Reset to default** button.

#### The 5 Customization Sections:

1. **Page Description**:
   * Header banner title (max 60 characters with counter).
   * Title font size slider (`20px` – `100px`, default `68px`) and color picker.
   * Subtitle guidance instructions for buyers (max 300 characters with counter).
   * Background styling (solid color or custom banner image URL).
   * Up to **4 custom links** (e.g., *Return to Catalog*, *Download PDF Price Sheet*).
2. **Filter & Search Bar**:
   * Toggle search bar, sort dropdown, and bulk CSV import button.
   * Enable faceted filters: In-Stock Availability, Price range, and Collections.
   * Product & Variant Metafield filters (Growth Plan and above).
3. **Product Information**:
   * Choose table columns to display: SKU, Product Type, Vendor, Inventory/Stock Level, and Discount Badge (Price is a standard catalog column and is always shown).
   * Manage Product Metafields and Variant Metafields (Growth Plan and above).
4. **Page Style**:
   * General: Adjust Corner radius (default `6px`) and Border width (default `1px`).
   * Color scheme: Customize colors for Page, Main product button ("Add to cart"), Second product button ("Add to quote"), Text links, and Input fields (including normal and hover states).
5. **Settings**:
   * **Quick Order Variant Display**: Choose between **Show all variants in a list** (inline rows with quantity boxes for fast bulk ordering) or **Show variants in a pop-up** (pop-up modal for items with 50+ options).
   * **Integrations**: Check **"Integrated with Request for Quote"** to render "Add to Quote" buttons on products matching your Quote Logics.

***

### 2.4. Publish Your Page

1. When your Step 3 configuration is complete, click **Save** in the top bar.
2. The **"Publish Quick Order Page"** modal opens automatically:
   * **Page title**: Enter the customer-facing title shown in browser tabs and store navigation (e.g., *Wholesale Quick Order*).
   * **Page URL handle**: Set the web address slug (e.g., `wholesale-order`, creating `/pages/wholesale-order`).
3. Click **Publish**. The app automatically creates the Shopify Page and links your store theme.

***

### 2.5. Example Storefront Configurations

Use this quick reference table to align customer audience, product scope, and display options for typical store needs:

| Your Goal                                                                                  | Customer Type     | Visibility & Scope                                                                      | Display & Customizer Settings                                                                                     | R4Q Integration                                         |
| ------------------------------------------------------------------------------------------ | ----------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| <p><strong>Simple Bulk Order Page</strong><br>Fast replenishment for any buyer</p>         | Default Customers | <p>All Customers<br>All Products</p>                                                    | <p>Columns: Thumbnail, Title, Price, Qty.<br>Variant Display: Show all variants</p>                               | Disabled (Direct to Cart)                               |
| <p><strong>Wholesale Re-ordering</strong><br>Dealers ordering by SKU/brand</p>             | Default Customers | <p>Tagged Customers (<code>dealer</code>)<br>Specific Collections</p>                   | <p>Columns: Title, Vendor, Stock, Price.<br>Filters: Vendor & In-Stock.<br>Variant Display: Show all variants</p> | Disabled                                                |
| <p><strong>Custom Quote Catalog</strong><br>High-ticket items requiring custom pricing</p> | Default Customers | <p>All Logged-in Customers<br>Specific Products</p>                                     | <p>Columns: Thumbnail, Title, Specs.<br>Variant Display: Modal variant</p>                                        | **Enabled** (Add to Quote replaces or complements Cart) |
| <p><strong>Corporate B2B Orders</strong><br>Contracted catalog & negotiated pricing</p>    | Company Customers | <p>B2B Market (All plans) or Company Location (Shopify Plus)<br>App Enterprise Plan</p> | <p>Columns: Title, SKU, B2B Tiered Price.<br>Faceted Filters: Catalog collections</p>                             | Optional                                                |

***

## 3. Set Up a Universal Page

If your store has multiple Quick Order pages (e.g., one for VIPs, one for Wholesale, one for Staff), sharing multiple links with buyers can cause confusion. The **Universal Page** solves this by providing **one single master link** for all buyers.

### 3.1. Configure Universal Settings

In the app, navigate to **Quick Order > Advanced Settings**:

1. **Universal URL:** This is your master link (e.g., `/pages/quick-order-portal`).
2. **Display Logic:** Choose how the portal routes incoming buyers:
   * **Show only one eligible page (Recommended):**\
     The system automatically forwards the customer to the specific page they are eligible to see based on their account or tags.
   * **Show all eligible pages (Landing Page Menu):**\
     If a buyer qualifies for multiple catalogs, they see a clean menu listing all accessible pages so they can choose which catalog to open.
3. Click **Save** to activate your Universal page.

### 3.2. Customize the Landing Page

If you select the "Show all eligible pages" option, you can style the landing page to match your store's branding:

* Customize the Header Title and Subtitle instructions.
* Set brand colors for category cards and buttons.
* Ensure a cohesive, professional buying portal for your B2B customers.

***

## 4. Add Quick Order pages to your online store navigation

Once your pages are published, add them to your store's navigation menu so customers can easily locate them:

#### 4.1. Get Your Shareable Links

* **For a specific page:** Copy the page URL from your Quick Order page list (or click **View page** to copy the URL).
* **For the Universal Page:** Copy your master URL handle from Advanced Settings (e.g., `/pages/quick-order-portal`).

#### 4.2. Update Shopify Navigation

1. In Shopify Admin, go to **Online Store → Navigation**.
2. Click the menu where you want to add the link (e.g., “Main menu” or “Footer menu”).
3. Click **Add menu item**:
   * **Name**: Enter your preferred navigation label (e.g., *"Wholesale Portal"* or *"Quick Order"*).
   * **Link**: Select your created Quick Order page from the Pages list, or paste the copied URL directly.
4. Click **Save menu**.

{% hint style="info" %}
**Merchant Tip:** Adding the **Universal Page** to your Main Menu is the best practice. It ensures that whenever a visitor clicks the link, they are automatically directed to the correct catalog and pricing tier for their account type without seeing restricted pages.
{% endhint %}