# Customize Page

## 1. Edit Page Description

This is the first mini-tab you’ll land on. It lets you customize the **header section** of your Quick Order page. In this section, you can customize the header area of your Quick Order page.&#x20;

<figure><img src="https://165668525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6BtZ1bmXof30clbYP14n%2Fuploads%2FR1TpGMsHOFlrhqxoTjQr%2Fimage.png?alt=media&#x26;token=904831bc-e7a1-49bb-89f6-9ff549b09f7a" alt=""><figcaption></figcaption></figure>

These are the main settings:

<table><thead><tr><th width="292.5859375">Sections</th><th>Details</th></tr></thead><tbody><tr><td><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeX3Ux0Rg5a_T5nIIOobRdIht5S68l4xZNVS-Lfuv7s8aB_R7jpImveY0YQ7F3pCKGXwZq2pWArV6DIOgqiadCFvb8S_5uZrOLfdFT90ywK4i-5oNfByQlEHBlaG6iYhT-ydQMl?key=qVxHa1HQO_7i_uHU_7CVGw" alt=""></td><td><p>In this section, you can:</p><ul><li>Show/Hide the page description</li></ul></td></tr><tr><td><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfS5O3cu-hVZDUDmIDszK4gekvyq0oSgtEHvvHCClEXGITz2BIzq29AoFTuKHA0WbFswvpEW9b8XEqwB4MYgcaC8P7VIF6wQezWfU1zgxxlzEW6e3ISrT5SCz_DhXnODONORCNe2A?key=qVxHa1HQO_7i_uHU_7CVGw" alt=""></td><td><p><strong>2. Edit Title</strong></p><ul><li>Content: Enter the main title of the page (visible to customers).</li><li>Text Size: Adjust the font size to make it larger or smaller.</li><li>Text Color: Select a color that matches your branding.</li></ul></td></tr><tr><td><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcc6I1MyfGgl5wGYmlJNvDkTkzttAL-Rn_oygt_bRW7UzMEvqCh6iLWTwV6tYAJZipN0GQPjGkhKraYXJnQkMv1TZA64SomPYHjOPKkCbo55IXB3oh1FBYhPKvzz8hdovP95gB2og?key=qVxHa1HQO_7i_uHU_7CVGw" alt=""></td><td><p><strong>3. Edit Subtitle</strong></p><ul><li>Content: Add a supporting message or explanation under the title.</li><li>Text Size: Adjust the size to your preference.</li><li>Text Color: Choose a suitable color for the subtitle.<br></li></ul></td></tr><tr><td><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfqaCbff8XNZAYkwnoTB4iqHEj2-YJ0Qs0KBsnsSsk-HXbDeIATsBsKEpdxTXmuvV97v-wQzhS76AFh7yRIF6abucVEEM9qRV8Lv51AOuri9MADYfLr7ItSdzfKNyfbQOSoMntw3w?key=qVxHa1HQO_7i_uHU_7CVGw" alt=""></td><td><p><strong>4. Background Settings</strong></p><p>You can customize the background of the description section using one of the following:</p><ul><li>Color: Choose a solid color as the background.</li><li>Image: Use an image by entering a direct image link.</li></ul><p>📌 Learn <a href="broken-reference">how to get a direct image link</a>.</p></td></tr></tbody></table>

## **2. Filter & Search Bar**

This is the second mini-tab in **Customization Quick Order Page.** You can find it here. This section controls the filters and search functionality shown below the header.

<figure><img src="https://165668525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6BtZ1bmXof30clbYP14n%2Fuploads%2FIXWqd4sj1VMgf98nXJvV%2Fimage.png?alt=media&#x26;token=ad6e3986-ed78-456b-bbe2-8da40253dc19" alt=""><figcaption></figcaption></figure>

You can **add, remove, or hide** the search bar and any of the filters. Main settings are:

<table><thead><tr><th width="200.3828125">Settings</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Search Bar</strong></td><td>Lets customers search by product title</td><td></td></tr><tr><td><strong>Availability</strong></td><td>Filter to show only products that are in stock</td><td></td></tr><tr><td><strong>Collections</strong></td><td>Filter by Shopify collections. If you selected specific collections in the product settings, only those will appear</td><td></td></tr><tr><td><strong>Product Types</strong></td><td>Based on the product type set in Shopify</td><td></td></tr><tr><td><strong>Price</strong></td><td>Based on the vendor assigned to each product</td><td></td></tr><tr><td><strong>Vendors</strong></td><td>Filter products using product tags. Only shows tags that are relevant to selected products</td><td></td></tr><tr><td><strong>Tags</strong></td><td>Filter by minimum and maximum price</td><td></td></tr></tbody></table>

## **3. Product Information Display**

This is the second mini-tab in **Customization Quick Order Page.** You can find it here. This mini-tab controls what information appears in each product row.

<figure><img src="https://165668525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6BtZ1bmXof30clbYP14n%2Fuploads%2F9qZ97eeyxxaAXBuzmDiS%2Fimage.png?alt=media&#x26;token=2bca80dd-5d24-4f9d-ad2f-42760b42d8d8" alt=""><figcaption></figcaption></figure>

You can choose to **show or hide** the following fields:

* **SKU**
* **Product Type**
* **Vendor**
* **Inventory** (Quantity left in stock)
* **Discount Badge** (if applicable)

Simply tick or untick the options to adjust what appears.

## **4. Page Style**

This final mini-tab allows you to style the Quick Order page to match your store’s branding.

<figure><img src="https://165668525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6BtZ1bmXof30clbYP14n%2Fuploads%2FijY56UrODVlyIttlK1bd%2Fimage.png?alt=media&#x26;token=5f91c5d4-a580-4aa8-b56a-4f5b134067ae" alt=""><figcaption></figcaption></figure>

**Main customization options:**

* **Corner Radius**: Adjust the roundness of elements like buttons, modals, and text fields.
* **Border Width**: Control the thickness of borders (used on dividers, buttons, and input fields).
* **Color Scheme**: Set the colors for different groups of elements. These are organized into categories:

| Color Category       | Includes                                                                   |
| -------------------- | -------------------------------------------------------------------------- |
| **General**          | Background, text, borders                                                  |
| **Primary Button**   | Add to Cart, View Options buttons                                          |
| **Secondary Button** | Bulk Import, Pagination buttons                                            |
| **Plain Button**     | Quantity Rule, Custom Pricing, etc.                                        |
| **Box Elements**     | Search bar, quantity field, type badges, sorting field, price filter field |

🎨 You can try changing the colors and immediately see the preview on the right-hand side.
