Adding a LARGE photo to DAWN THEME homepage

Hi !

I am looking to create this same homepage look on my DAWN shopify theme however,

I have gone through all options built into the dawn theme and I know its going to require coding.

Can someone please assist with some code to achieve this large photo on my homepage?

see photo for reference that wraps with transparent header.

Website to be actioned: Charlie Helena Collection- Mum & Babe Outfits |Accessories | Boho Rugs – Charliehelenacollection

1 Like

Hi @RC94

Did you change Slide height option of Slideshow settings to Large?

To make your Dawn theme have a big picture with a transparent header:

  1. Create a transparent header: Include CSS in the foundation.CSS file:
    .header-wrapper {
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: 10;
    }
  2. Insert a Full-Width Picture: Use the following CSS to make sure the picture in the image-banner.liquid file is full width:
    .banner-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    }
  3. Modify Padding: Take Out Padding Using:
    .main-content {
    margin-top: 0;
    padding-top: 0;
    }