Matrix B2B

Installation Guide

This guide will walk you through installing the Quick Order Matrix on your Shopify store. The entire process takes about 10 minutes and requires basic familiarity with the Shopify admin.

Prerequisites

Before you begin, make sure you have:

  • ✅ Access to your Shopify store admin
  • ✅ Permission to edit your theme code (store owner or staff with theme editing rights)
  • ✅ Basic familiarity with Shopify's theme editor

Note: The installation involves uploading files to your theme. If you're not comfortable with this, consider hiring a Shopify developer to assist.

Step 1: Download the Quick Order Matrix

  1. Download the quick-order-matrix.zip file
  2. Extract the ZIP file on your computer
  3. You should see the following file structure:
quick-order-matrix/
├── templates/
│   └── collection.quick-order.liquid
├── sections/
│   └── quick-order-matrix.liquid
└── assets/
    └── js/
        └── components/
            └── quick-order.js

These three files are all you need to install.

Step 2: Access Your Theme Code Editor

  1. Log into your Shopify Admin
  2. Navigate to Online Store → Themes
  3. Find your current (published) theme
  4. Click the ⋯ (three dots) button
  5. Select Edit code

[IMAGE PLACEHOLDER: shopify-edit-code.png]

Navigate to Shopify Admin → Online Store → Themes → ⋯ → Edit Code

You should now see the Shopify code editor with folders on the left sidebar.

Step 3: Upload the Files

You'll now upload each of the three files to the correct location in your theme.

3a. Create the Section File

  1. In the left sidebar, find the Sections folder
  2. Click Add a new section
  3. Name it quick-order-matrix
  4. Delete any placeholder code in the editor
  5. Open sections/quick-order-matrix.liquid from your downloaded files
  6. Copy the entire contents and paste into the Shopify editor
  7. Click Save

[IMAGE PLACEHOLDER: create-section-file.png]

Creating a new section file named "quick-order-matrix" in the Shopify code editor

3b. Create the JavaScript Asset

  1. In the left sidebar, find the Assets folder
  2. Click Add a new asset
  3. Select Create a blank file
  4. Name it quick-order.js (make sure to include the .js extension)
  5. Delete any placeholder code in the editor
  6. Open assets/js/components/quick-order.js from your downloaded files
  7. Copy the entire contents and paste into the Shopify editor
  8. Click Save

Important: The file must be named exactly quick-order.js and placed directly in the Assets folder (not in a subfolder).

3c. Create the Collection Template

  1. In the left sidebar, find the Templates folder
  2. Click Add a new template
  3. Select collection from the dropdown
  4. Name it quick-order (without the "collection." prefix - Shopify adds this automatically)
  5. Delete any placeholder code in the editor
  6. Open templates/collection.quick-order.liquid from your downloaded files
  7. Copy the entire contents and paste into the Shopify editor
  8. Click Save

Important: The template must be named exactly collection.quick-order.liquid for Shopify to recognize it as a collection template option.

Step 4: Create or Select a Collection

Now you'll assign the Quick Order Matrix template to a collection.

  1. Navigate to Products → Collections in your Shopify admin
  2. Either:
    • Create a new collection (e.g., "Wholesale Catalog", "Bulk Orders")
    • Select an existing collection you want to use for bulk ordering
  3. Add products to your collection (if creating new)

Tip: Collections display up to 200 products in the matrix. If you have more than 200 products, consider creating multiple collections organized by category (e.g., "Electronics", "Accessories", "Apparel").

Step 5: Assign the Template to Your Collection

  1. While editing your collection, look at the right sidebar
  2. Scroll down to find the Theme template section
  3. Click the dropdown menu
  4. Select quick-order from the list of templates
  5. Click Save

[IMAGE PLACEHOLDER: template-dropdown.png]

Selecting the "quick-order" template from the Theme template dropdown in Collection settings

Step 6: Test Your Installation

  1. Click View collection (or navigate to your collection's URL)
  2. You should now see the Quick Order Matrix instead of the standard collection page

What Success Looks Like:

You should see:

  • ✅ A table with columns: Product, SKU, Stock, Quantity, Total
  • ✅ All your products listed with their variants as separate rows
  • ✅ Stock status badges (green for In Stock, yellow for Low Stock, red for Out of Stock)
  • ✅ Quantity input fields for each variant
  • ✅ A sticky footer at the bottom showing total items and an "Add All to Cart" button

[IMAGE PLACEHOLDER: successful-matrix.png]

A properly functioning Quick Order Matrix showing products, variants, and stock status

Test the Functionality:

  1. Enter quantities for a few products
  2. Watch the total items count update in the sticky footer
  3. Click Add All to Cart
  4. Verify that all items were added to your cart correctly

Troubleshooting Common Installation Issues

Interactive Features Not Working

Problem: The matrix displays but quantity inputs don't work or "Add to Cart" button does nothing

Solution: This is usually a theme compatibility issue. Try:

  • Contact your theme developer to check compatibility
  • Consider switching to a modern Shopify theme
  • See the Troubleshooting & FAQ for more help

Matrix Looks Unstyled or Broken

Problem: The matrix displays but has no colors, spacing, or proper layout

Solution: This is usually a theme compatibility issue. Try:

  • Contact your theme developer to check compatibility
  • Consider switching to a modern Shopify theme
  • See the Troubleshooting & FAQ for more help

Template Doesn't Appear in Dropdown

Problem: You don't see "quick-order" in the Theme template dropdown

Solutions:

  • Verify the file is named exactly collection.quick-order.liquid (not quick-order.liquid)
  • Make sure it's in the Templates folder, not Sections or Assets
  • Try refreshing your browser or logging out and back into Shopify
  • Save the file again in the code editor

Matrix is Empty or Shows No Products

Problem: The matrix loads but shows no products

Solutions:

  • Verify your collection has products added to it
  • Check that products have variants (all products have at least one variant in Shopify)
  • If you have more than 50 products, only the first 50 will display (Shopify limitation)

Images Not Showing

Problem: Product images appear broken or missing

Solutions:

  • Verify your products have featured images set in Shopify
  • Check your browser console for 404 errors on image URLs
  • Ensure your Shopify CDN is functioning correctly

Next Steps

Congratulations! You've successfully installed the Quick Order Matrix.

What's Next?

Need Help?

If you're experiencing issues not covered in this guide:

  1. Check the Troubleshooting & FAQ page
  2. Verify all three files are uploaded correctly with exact naming
  3. Test in a different browser or device
  4. Consider hiring a Shopify developer if you need assistance

The Quick Order Matrix is designed to be simple to install, but every Shopify theme is different. When in doubt, consult with your theme developer or a Shopify expert.

Previous
Getting Started
Next
Features & Capabilities