How can I modify the Collection Banner section in Dawn 5.0?

Store Design
1

Hi there. I am looking to made a couple of amends to the Collection Banner section in Dawn 5.0.

  1. Change the Collection Banner Image position to be first on the mobile view.

  2. Remove the padding around the Collection Banner Image.

Do you know how I may achieve that? If anyone could please help I would super grateful.

Thanks so much,

Graham

Current positioning
Current positioning450×859 204 KB

Desired positioning
Desired positioning428×654 267 KB

Here’s the section code:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @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);
    }
  }
{%- endstyle -%}

  

    

      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
      

      {%- if section.settings.show_collection_description -%}
        {{ collection.description }}

      {%- endif -%}
    

    {%- if section.settings.show_collection_image and collection.image -%}
      
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    }
  ]
}
{% endschema %}
2

@GrahamT

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thanks! It’s a currently unpublished theme on https://conscious-chocolate.myshopify.com/

4

Thanks but i can’t see that view please share your draft theme preview url

5

Here you go: https://hbpeg18u341gn6a5-7290912813.shopifypreview.com

6

@GrahamT

thanks for perfect url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__text-wrapper {
    padding: 2rem !important;
}
.collection-hero--with-image .collection-hero__inner {
    padding: 0 !important;
    flex-direction: column-reverse !important;
}
}

I hope that helps you out! Best of luck :blush:

7

That worked perfectly! Thank you very much :grin:

8

@GrahamT

its my pleasure to help us

9

Ketan,

Will that code increase the top padding or margin on the collection banner ? ( dawn theme)