diff --git a/datacenterlight/templates/datacenterlight/cms/generic_product_header.html b/datacenterlight/templates/datacenterlight/cms/generic_product_header.html
new file mode 100644
index 00000000..7d5b36b4
--- /dev/null
+++ b/datacenterlight/templates/datacenterlight/cms/generic_product_header.html
@@ -0,0 +1,41 @@
+{% load cms_tags %}
+<style>
+.head-wrapper {
+      display: table;
+      width: 100%;
+      height: 95vh;
+      text-align: center;
+      background-color: #000;
+    }
+.head-slide {
+    display: table-cell;
+    vertical-align: middle;
+    color: #fff;
+    font-size: 85px;
+    }
+@media (min-width: 768px) {
+  .head-slide .btn-trans {
+    padding: 8px 15px;
+    min-width: 175px;
+    letter-spacing: 1px;
+    font-size: 0.25em;
+  }
+}
+.head-slide .btn-trans {
+    align-self: flex-end;
+    z-index: 2;
+    position: relative;
+}
+</style>
+<div>
+  <div class="head-wrapper">
+    <div class="head-slide">
+      {{ instance.header_text }}
+      {% if product_url %}
+        <div class="container-fluid">
+            <a class="btn btn-trans page-scroll url" href="{{product_url}}">Get the deal</a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
\ No newline at end of file