Adding a LARGE photo to DAWN THEME homepage

Adding a LARGE photo to DAWN THEME homepage

RC94
Explorer
46 1 14

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

RC94_0-1728429797426.png

 

 

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

Hi @RC94 

Did you change Slide height option of Slideshow settings to Large? Screenshot 2024-10-09 at 09.07.34.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Odunola
Shopify Partner
16 2 4

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;
    }



If my suggestion works for you, please give it a Like or mark it as a Solution
Feel free to reach out to me
Email : adeniyiblessing888@gmail.com
WhatsApp [wa.me/+2347047775840]