Product Categories

Product CategoriesCreate custom categories for all of the products you are authorized to sell.

Category Name No. of Products Last Modify Date
Government 10 11/25/2020
Hardware-based 160 11/25/2020
Healthcare 23 11/25/2020
Azure 15 11/25/2020
Non-Profits 12 11/25/2020
Small Business 150 11/25/2020
Top Sellers 230 11/25/2020
        
<!--Catalog Management Categories-->
<div class="storefront-rightbar catalog-management categories">
 <h1 class="storefront-heading">Product Categories<span>Create custom categories for all of the products you are authorized to sell.</span></h1>
 <div class="products-search">
    <div class="search-input-col">
       <i class="icon-cross"></i>
       <i class="icon-search"></i>
       <input type="text" class="form-control form-control-padding search-category" placeholder="Search by category name" autocomplete="off">
    </div>
    <button class="btn btn-outline openRtFly" data-flyout="createNewCat"><i class="icon-plus"></i> Create New Category</button>
 </div>
 <div class="categories-table">
    <div class="list-view-tile summary-tab-table templates">
       <table class="table custom-table adminTable">
          <thead class="thead-light">
             <tr>
                <th scope="col" width="30%">Category Name</th>
                <th scope="col" width="25%">No. of Products</th>
                <th scope="col" width="25%">Last Modify Date</th>
                <th scope="col" width="20%"></th>
             </tr>
          </thead>
          <tbody>
             <tr class="prod-row newCategoryRow" style="display: none;">
                <td><span class="text-blue"><strong>Subscription-Based</strong></span></td>
                <td>10</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);" ><i class="icon-subscriptions"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();" >
                         <div class="circle-link"><i class="icon-line-edit"></i></div>
                      </a>
                      <a href="javascript:void();"><i class="icon-circle-del"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="addOnRow addon-shadow" style="display: none;">
                <td colspan="4" class="p-0 border-0">
                   <div class="total-customer-col">
                      <div class="cutomer-container">
                         <div class="table-search">
                            <h1>Product List</h1>
                            <div class="products-search">
                               <div class="search-input-col">
                                  <i class="icon-search"></i>
                                  <input type="text" class="form-control form-control-padding ui-autocomplete-input" placeholder="Search by product name/SKU#" autocomplete="off">
                               </div>
                               <button class="btn btn-outline ml-auto openRtFly" data-flyout="addProducts">Add Product</button>
                               <button class="btn btn-outline del"  data-toggle="modal" data-target="#alertModal" data-delete="delProd" ><i class="icon-delete m-0" data-toggle="tooltip" data-placement="top" title="Delete"></i></button>
                            </div>
                         </div>
                         <div class="customers-box">
                            <div class="customer-tabel-col pt-0">
                               <table>
                                  <thead>
                                     <tr>
                                        <th class="th-col-1">Product Name</th>
                                        <th class="th-col-2 text-right">MSRP (USD)</th>
                                        <th class="th-col-3 text-right">Unit  Price (USD)</th>
                                        <th class="th-col-4 text-center">Billing Type</th>
                                        <th class="th-col-5"></th>
                                     </tr>
                                  </thead>
                                  <tbody tabindex="5" style="overflow-y: hidden; outline: none;">
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">6.00</td>
                                        <td class="text-right">4.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit"></i><i class="icon-delete"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">6.00</td>
                                        <td class="text-right">4.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit"></i><i class="icon-delete"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">12.00</td>
                                        <td class="text-right">9.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit"></i><i class="icon-delete"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">12.00</td>
                                        <td class="text-right">9.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit"></i><i class="icon-delete"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">18.00</td>
                                        <td class="text-right">14.76</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit"></i><i class="icon-delete"></i></div>
                                        </td>
                                     </tr>
                                  </tbody>
                               </table>
                            </div>
                            <nav aria-label="navigation" class="pagination-col">
                               <span class="item-dropdown-col">
                                  View
                                  <div class="items-dropdown">
                                     <i class="icon-arrow-bottom"></i>
                                     <select>
                                        <option>16</option>
                                     </select>
                                  </div>
                                  <span class="view-text">Items Per Page</span>
                               </span>
                               <div class="pagination-holder m-auto">
                               </div>
                               <ul class="next-prev-page">
                                  <li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
                                  <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
                                  <li><span class="page-count">1 of 12</span></li>
                                  <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
                                  <li class="last-page"><a href="javascript:void(0);">Last <i
                                     class="icon-left-arrow-double pr-1"></i></a></li>
                               </ul>
                            </nav>
                         </div>
                      </div>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Government</strong></span></td>
                <td>10</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <div class="link-text-more moreMainDiv ml-auto">
                         <a href="javascript:void(0);" class="openMoreFly"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category" ><span class="path1"></span><span class="path2"></span></i></a>
                         <div class="text-more-flyout" style="display: none;">
                            <i class="icon-dropdown-arrow"></i>
                            <h6>Copy Category</h6>
                            <div class="temp-details">
                               <label class="mt-2">Template Name  <span class="asterisk">*</span></label>
                               <div class="search-input-col">
                                  <i class="icon-cross" style="display: none;"></i>
                                  <input type="text" class="form-control form-control-padding " placeholder="Enter template name">
                               </div>
                               <div class="mini-flyout-footer-btns">
                                  <input type="button" class="btn btn-outline ml-auto cancelCopy" value="Cancel">
                                  <input type="button" class="btn btn-primary disabled createCopy" value="Create Copy">
                               </div>
                            </div>
                         </div>
                      </div>
                      <!-- <a href="javascript:void(0);" ><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a> -->
                      <a href="javascript:void();" >
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();" data-toggle="modal" data-target="#alertModal" class="delete" data-delete="delCat"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="addOnRow addon-shadow" style="display: none;">
                <td colspan="4" class="p-0 border-0">
                   <div class="total-customer-col">
                      <div class="cutomer-container">
                         <div class="table-search">
                            <h1>Product List</h1>
                            <div class="products-search">
                               <div class="search-input-col">
                                  <i class="icon-search"></i>
                                  <input type="text" class="form-control form-control-padding ui-autocomplete-input" placeholder="Search by product name/SKU#" autocomplete="off">
                               </div>
                               <button class="btn btn-outline ml-auto openRtFly" data-flyout="addProducts">Add Product</button>
                               <button class="btn btn-outline del" data-toggle="modal" data-target="#alertModal" data-delete="delProd"><i class="icon-delete m-0"  data-toggle="tooltip" data-placement="top" title="Delete All" ></i></button>
                            </div>
                         </div>
                         <div class="customers-box">
                            <div class="customer-tabel-col pt-0">
                               <table>
                                  <thead>
                                     <tr>
                                        <th class="th-col-1">Product Name</th>
                                        <th class="th-col-2 text-right">MSRP (USD)</th>
                                        <th class="th-col-3 text-right">Unit  Price (USD)</th>
                                        <th class="th-col-4 text-center">Billing Type</th>
                                        <th class="th-col-5"></th>
                                     </tr>
                                  </thead>
                                  <tbody tabindex="5" style="overflow-y: hidden; outline: none;">
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">6.00</td>
                                        <td class="text-right">4.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i> <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="Delete Category"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">6.00</td>
                                        <td class="text-right">4.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i> <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="Delete Category"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">12.00</td>
                                        <td class="text-right">9.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i> <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="Delete Category"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">12.00</td>
                                        <td class="text-right">9.94</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                          <div class="sub-action-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i> <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="Delete Category"></i></div>
                                        </td>
                                     </tr>
                                     <tr>
                                        <td><span class="product-name">One Drive For Business Plan 1</span><span class="snx-sku">SNX SKU#  4006192</span></td>
                                        <td class="text-right">18.00</td>
                                        <td class="text-right">14.76</td>
                                        <td class="text-center">Monthly</td>
                                        <td>
                                           <div class="sub-action-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i> <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="Delete Category"></i></div>
                                        </td>
                                     </tr>
                                  </tbody>
                               </table>
                            </div>
                            <nav aria-label="navigation" class="pagination-col">
                               <span class="item-dropdown-col">
                                  View
                                  <div class="items-dropdown">
                                     <i class="icon-arrow-bottom"></i>
                                     <select>
                                        <option>16</option>
                                     </select>
                                  </div>
                                  <span class="view-text">Items Per Page</span>
                               </span>
                               <div class="pagination-holder m-auto">
                               </div>
                               <ul class="next-prev-page">
                                  <li><a href="javascript:void(0);"><i class="icon-left-arrow-double mr-1"></i>First</a></li>
                                  <li><a href="javascript:void(0);"><i class="icon-left-arrow mr-1"></i>Previous</a></li>
                                  <li><span class="page-count">1 of 12</span></li>
                                  <li><a href="javascript:void(0);">Next<i class="icon-right-arrow-b ml-1"></i></a></li>
                                  <li class="last-page"><a href="javascript:void(0);">Last <i
                                     class="icon-left-arrow-double pr-1"></i></a></li>
                               </ul>
                            </nav>
                         </div>
                      </div>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td class="non-edit"><span class="text-blue"><strong>Hardware-based</strong></span></td>
                <td class="editTd" style="display: none;">
                   <div class="search-input-col">
                      <i class="icon-cross" style="display: none;"></i>
                      <input type="text" class="form-control form-control-padding " value="Hardware-based">
                   </div>
                </td>
                <td >160</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">

                      <a href="javascript:void(0)" class="editTd cross-circle cancelEditing" style="display: none;"><i class="icon-cross-circle" data-toggle="tooltip" data-placement="top" title="Cancel Editing"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void(0)" class="editTd cross-circle saveRow" style="display: none;"><i class="icon-file-v1" data-toggle="tooltip" data-placement="top" title="Save"><span class="path1"></span><span class="path2"></span></i></a>

                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Healthcare</strong></span></td>
                <td>23</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Azure</strong></span></td>
                <td>15</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Non-Profits</strong></span></td>
                <td>12</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Small Business</strong></span></td>
                <td>150</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
             <tr class="prod-row">
                <td><span class="text-blue"><strong>Top Sellers</strong></span></td>
                <td>230</td>
                <td>11/25/2020</td>
                <td>
                   <div class="table-action-link">
                      <a href="javascript:void(0);"  class="non-edit ml-auto"><i class="icon-subscriptions" data-toggle="tooltip" data-placement="top" title="Copy Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void();"  class="non-edit editTemplate">
                         <div class="circle-link"><i class="icon-line-edit" data-toggle="tooltip" data-placement="top" title="Edit Category"></i></div>
                      </a>
                      <a href="javascript:void();"  class="non-edit"><i class="icon-circle-del" data-toggle="tooltip" data-placement="top" title="Delete Category"><span class="path1"></span><span class="path2"></span></i></a>
                      <a href="javascript:void()" class="row-expand-icon non-edit" data-toggle="tooltip" data-placement="top" title="Expand"><i class="icon-arrow-bottom"></i></a>
                   </div>
                </td>
             </tr>
          </tbody>
       </table>
    </div>
 </div>
</div>
<!--Catalog Management Categories-->