diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css
index 3f7699d0229..facd7ffc793 100644
--- a/assets/component-collection-hero.css
+++ b/assets/component-collection-hero.css
@@ -9,12 +9,6 @@
 }
 
 @media screen and (min-width: 750px) {
-  .collection-hero.collection-hero--with-image {
-    padding: calc(4rem + var(--page-width-margin)) 0
-      calc(4rem + var(--page-width-margin));
-    overflow: hidden;
-  }
-
   .collection-hero--with-image .collection-hero__inner {
     padding-bottom: 0;
   }
@@ -37,12 +31,11 @@
 }
 
 .collection-hero__title {
-  margin: 2.5rem 0;
+  margin: 0;
 }
 
 .collection-hero__title + .collection-hero__description {
   margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
   font-size: 1.6rem;
   line-height: calc(1 + 0.5 / var(--font-body-scale));
 }
@@ -51,7 +44,6 @@
   .collection-hero__title + .collection-hero__description {
     font-size: 1.8rem;
     margin-top: 2rem;
-    margin-bottom: 2rem;
   }
 
   .collection-hero__description {
@@ -63,12 +55,8 @@
   }
 }
 
-.collection-hero--with-image .collection-hero__title {
-  margin: 0;
-}
-
 .collection-hero--with-image .collection-hero__text-wrapper {
-  padding: 5rem 0 4rem;
+  padding-bottom: 4rem;
 }
 
 .collection-hero__image-container {
diff --git a/sections/main-collection-banner.liquid b/sections/main-collection-banner.liquid
index 004c89a69d6..2b3b46038d3 100644
--- a/sections/main-collection-banner.liquid
+++ b/sections/main-collection-banner.liquid
@@ -2,6 +2,17 @@
 {{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
+  .section-{{ section.id }}-padding {
+    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
+    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
+  }
+
+  @media screen and (min-width: 750px) {
+    .section-{{ section.id }}-padding {
+      padding-top: {{ section.settings.padding_top }}px;
+      padding-bottom: {{ section.settings.padding_bottom }}px;
+    }
+  }
   @media screen and (max-width: 749px) {
     .collection-hero--with-image .collection-hero__inner {
       padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
@@ -9,7 +20,7 @@
   }
 {%- endstyle -%}
 
-<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
+<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
   <div class="collection-hero__inner page-width">
     <div class="collection-hero__text-wrapper">
       <h1 class="collection-hero__title">
@@ -92,6 +103,30 @@
       ],
       "default": "background-1",
       "label": "t:sections.all.colors.label"
+    },
+    {
+      "type": "header",
+      "content": "t:sections.all.padding.section_padding_heading"
+    },
+    {
+      "type": "range",
+      "id": "padding_top",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_top",
+      "default": 36
+    },
+    {
+      "type": "range",
+      "id": "padding_bottom",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_bottom",
+      "default": 0
     }
   ]
 }