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:

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

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.