diff --git a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
index e69de29bb2d..88ba7fd898a 100644
--- a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
+++ b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
@@ -0,0 +1,53 @@
+{%- macro card(title, image, url, text_primary=False) -%}
+{%- set align_class = resolve_class({
+	'text-right': text_primary,
+	'text-centre': align == 'Center',
+	'text-left': align == 'Left',
+}) -%}
+<div class="card h-100">
+	{% if image %}
+	<img class="card-img-top" src="{{ image }}" alt="{{ title }}">
+	{% endif %}
+	<div class="card-body text-center text-muted small">
+		{{ title or '' }}
+	</div>
+	<a href="{{ url or '#' }}" class="stretched-link"></a>
+</div>
+{%- endmacro -%}
+
+<div class="section-with-cards">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+	<!-- {%- set card_size = card_size or 'Small' -%} -->
+	<div class="{{ resolve_class({'mt-6': title}) }}">
+		<div class="card-grid">
+			{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8'] -%}
+			{%- set category = values['category_' + index] -%}
+				{%- if category -%}
+					{%- set category = frappe.get_doc("Item Group", category) -%}
+					{{ card(category.name, category.image, category.route) }}
+				{%- endif -%}
+			{%- endfor -%}
+		</div>
+	</div>
+</div>
+
+<style>
+	.card-grid {
+		display: grid;
+		grid-gap: 15px;
+		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
+	}
+
+	.card {
+		border: none;
+	}
+
+	.card:hover {
+		box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
+	}
+</style>
diff --git a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.json b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.json
index 1a3143c2098..ba5f63b48b2 100644
--- a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.json
+++ b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.json
@@ -5,78 +5,68 @@
  "doctype": "Web Template",
  "fields": [
   {
-   "__unsaved": 1,
    "fieldname": "title",
    "fieldtype": "Data",
    "label": "Title",
    "reqd": 1
   },
   {
-   "__unsaved": 1,
    "fieldname": "subtitle",
    "fieldtype": "Data",
    "label": "Subtitle",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_1_group",
+   "fieldname": "category_1",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_2_group",
+   "fieldname": "category_2",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_3_group",
+   "fieldname": "category_3",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_4_group",
+   "fieldname": "category_4",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_5_group",
+   "fieldname": "category_5",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_6_group",
+   "fieldname": "category_6",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_7_group",
+   "fieldname": "category_7",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
-   "fieldname": "category_8_group",
+   "fieldname": "category_8",
    "fieldtype": "Link",
    "label": "Item Group",
    "options": "Item Group",
@@ -84,7 +74,7 @@
   }
  ],
  "idx": 0,
- "modified": "2020-11-17 15:27:36.250460",
+ "modified": "2020-11-18 17:26:28.726260",
  "modified_by": "Administrator",
  "module": "Shopping Cart",
  "name": "Product Category Cards",