Finalized WALMART screenshots! Maybe It can be productized.

Custom_Templates/customer_templates/Magis Center/catalog.html.liquid

@@ -0,0 +1,80 @@
+{% include "header_absolute" %}
+{% include "course_version_outdated_alert", courses: courses.in_catalog %}
+<div class="basic-hero has-image">
+  <div class="hero-content">
+    <div class="np-resource-title">{{ catalog.headline }}</div>
+    <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
+    <form
+        class="np-header-search hero-search"
+        data-test="mobile-search"
+        method="get"
+        action="{% route search %}"
+      >
+        <input
+          aria-label="Search"
+          class="np-header-search-input hero-search-input"
+          type="text"
+          name="q"
+          placeholder="Search"
+        />
+        <i class="np-header-search-icon far fa-search"></i>
+      </form>
+  </div>
+</div>
+<div class="category-dropdown-section">
+  <div class="np-max-width">
+    <div class="category-dropdown">
+      <select id="categorySelect">
+        <option value="all">Show All</option>
+        {% for cat in categories.in_catalog %}
+          <option value="{{cat.id}}">{{cat.name}}</option>
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+</div>
+<main class="np-main np-catalog np-subpage-container np-max-width">
+  {% include "courses_catalog" %}
+</main>
+{% include "footer" %}
+
+<style>
+
+.category-dropdown-section {
+  background-color: #fafafa;
+  padding: 32px 0;
+} 
+
+.category-dropdown {
+  max-width:400px;
+}
+
+.category-dropdown select {
+  width: 100%;
+  height: 45px;
+  border-radius: 6px;
+  background: #f3f3f3;
+  padding: 6px;
+  font-weight: 700;
+  font-size: 14px;
+  text-transform:uppercase;
+}
+
+</style>
+
+<script>
+  $('#categorySelect').on('change', function() {
+    let selectedValue = this.value
+
+    if (selectedValue == "all") {
+      $(".course-column").show()
+    } else {
+      $(".course-column").hide()
+      $(".course-column").each(function() {
+        if ($(this).data("id").includes(selectedValue)) {
+          $(this).show()
+        }
+      })
+    }
+  });
+</script>